npm - @praxisui/page-builder - Versions diffs - 10.0.0-rc.37 → 10.0.0-rc.39 - Mend

@praxisui/page-builder 10.0.0-rc.37 → 10.0.0-rc.39

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 (5) hide show

package/README.md +8 -0
package/ai/component-registry.json +2 -2
package/fesm2022/praxisui-page-builder.mjs +2152 -34
package/package.json +4 -4
package/types/praxisui-page-builder.d.ts +387 -3

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

@@ -7,7 +7,7 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$2 from '@praxisui/core';
-import { PraxisIconDirective, providePraxisI18n, BUILTIN_WIDGET_SHELL_PRESETS, SETTINGS_EDITOR_SECTIONS_HOSTED, PraxisI18nService, getWidgetShellActionIdError, WidgetShellComponent, SettingsSectionTabsComponent, PraxisIconButtonComponent, NestedWidgetConfigAccessor, GLOBAL_ACTION_CATALOG, ComponentMetadataRegistry, CompositionValidatorService, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SurfaceOpenActionEditorComponent, BUILTIN_PAGE_LAYOUT_PRESETS, resolveWidgetPageLayoutPreset, BUILTIN_PAGE_THEME_PRESETS, prepareCanvasArrangement, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, ResourceDiscoveryService, WidgetPageDataSourceRuntimeService, WidgetPageStateRuntimeService, applyDeclarativeValuePipe, validateCanvasArrangement, ResourceQuickConnectComponent, PraxisJsonLogicService, canonicalJsonSha256, ComponentRuntimeProfileService, buildApiUrl, deepMerge, generateId, ObservabilityDashboardService, PraxisRuntimeComponentObservationRegistryService, PraxisCustomizationModeService, domainKnowledgeTimelineToRichContentDocument, DomainRuleService, DomainKnowledgeService, SETTINGS_PANEL_BRIDGE, DynamicWidgetPageComponent, DYNAMIC_PAGE_SHELL_EDITOR } from '@praxisui/core';
+import { PraxisIconDirective, providePraxisI18n, BUILTIN_WIDGET_SHELL_PRESETS, SETTINGS_EDITOR_SECTIONS_HOSTED, PraxisI18nService, getWidgetShellActionIdError, WidgetShellComponent, SettingsSectionTabsComponent, PraxisIconButtonComponent, NestedWidgetConfigAccessor, GLOBAL_ACTION_CATALOG, ComponentMetadataRegistry, CompositionValidatorService, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SurfaceOpenActionEditorComponent, BUILTIN_PAGE_LAYOUT_PRESETS, resolveWidgetPageLayoutPreset, BUILTIN_PAGE_THEME_PRESETS, prepareCanvasArrangement, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, ResourceDiscoveryService, WidgetPageDataSourceRuntimeService, WidgetPageStateRuntimeService, applyDeclarativeValuePipe, mapCatalogFieldsToMetadata, humanizeCatalogFieldName, validateCanvasArrangement, ResourceQuickConnectComponent, PraxisJsonLogicService, canonicalJsonSha256, ComponentRuntimeProfileService, buildApiUrl, deepMerge, generateId, ObservabilityDashboardService, PraxisRuntimeComponentObservationRegistryService, PraxisCustomizationModeService, domainKnowledgeTimelineToRichContentDocument, DomainRuleService, DomainKnowledgeService, SETTINGS_PANEL_BRIDGE, DynamicWidgetPageComponent, DYNAMIC_PAGE_SHELL_EDITOR, IconPickerService, createEmptyNavigationGroupsAuthoringDocument, GOVERNED_PAGE_DEFAULT_ALLOWED_ICONS, upsertNavigationGroupEntry, UiLayoutLifecycleContractError, UiLayoutLifecycleHttpError, decodePageAuthoringDocument, decodeNavigationGroupsAuthoringDocument, buildGovernedPageTarget, buildPublishedPageIdentity, validateRuntimeNavigationMenuNodes, validatePageAuthoringDocument, uiLayoutJsonIdentity, upsertPageNavigationBinding, materializeGovernedPagePreview } from '@praxisui/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { A11yModule, CdkTrapFocus } from '@angular/cdk/a11y';
@@ -19,21 +19,24 @@ import * as i4 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i5 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7 from '@angular/material/form-field';
+import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i9 from '@angular/material/input';
+import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/select';
+import * as i3$2 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import { BehaviorSubject, merge, timeout, map, catchError, throwError, firstValueFrom, from, share, concatMap, of, timer, takeUntil, Subject, tap, filter, take, isObservable } from 'rxjs';
+import { BehaviorSubject, merge, timeout, map, catchError, throwError, firstValueFrom, from, share, concatMap, of, timer, takeUntil, Subject, tap, filter, take, isObservable, Observable } from 'rxjs';
 import { SETTINGS_PANEL_DATA } from '@praxisui/settings-panel';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2$3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i9$1 from '@angular/material/tabs';
+import * as i9 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { AgenticAuthoringTurnClientService, withAuthoringScopePolicyContextHints, toPraxisAssistantConversationMessages, PraxisAssistantTurnOrchestratorService, PraxisAssistantSessionRegistryService, createPraxisAssistantViewportLayout, PraxisAiAssistantShellComponent } from '@praxisui/ai';
+import { RouterLink } from '@angular/router';
+import { validateDynamicFormPageWidget, DYNAMIC_FORM_GOVERNED_PAGE_PREVIEW_ADAPTER } from '@praxisui/dynamic-form';
+import { validateTablePageWidget, TABLE_GOVERNED_PAGE_PREVIEW_ADAPTER } from '@praxisui/table';
 const PLACEHOLDER = 1;
@@ -1550,6 +1553,19 @@ const PRAXIS_PAGE_BUILDER_EN_US = {
     'praxis.pageBuilder.editor.state.syncDataSourcesToState': "Sync target paths to state.values",
     'praxis.pageBuilder.studio.composer.groupFieldHint': "Choose the boolean or categorical field used in summary indicators.",
     'praxis.pageBuilder.studio.composer.statsUnsupportedHint': "This resource does not publish stats/group-by aggregation; summary indicators were disabled automatically.",
+    'praxis.pageBuilder.saveAs.title': 'Page name',
+    'praxis.pageBuilder.saveAs.menu': 'Menu name',
+    'praxis.pageBuilder.saveAs.menuHint': 'Use an existing menu name or create a new one.',
+    'praxis.pageBuilder.saveAs.icon': 'Choose menu icon',
+    'praxis.pageBuilder.saveAs.save': 'Save as new page',
+    'praxis.pageBuilder.saveAs.saving': 'Saving…',
+    'praxis.pageBuilder.saveAs.saved': 'Page and menu saved.',
+    'praxis.pageBuilder.saveAs.open': 'Open saved page',
+    'praxis.pageBuilder.saveAs.failed': 'Could not confirm the saved page. Review the destination and try again.',
+    'praxis.pageBuilder.saveAs.invalidIcon': 'Choose a Material Icons name without a family prefix.',
+    'praxis.pageBuilder.saveAs.invalidName': 'Enter a valid name within the allowed length.',
+    'praxis.pageBuilder.saveAs.copy': 'Create page copy',
+    'praxis.pageBuilder.saveAs.copyFailed': 'Could not prepare a copy of this page.',
 };
 const PRAXIS_PAGE_BUILDER_PT_BR = {
@@ -2740,6 +2756,19 @@ const PRAXIS_PAGE_BUILDER_PT_BR = {
     'praxis.pageBuilder.editor.state.syncDataSourcesToState': "Sincronizar targetPaths em state.values",
     'praxis.pageBuilder.studio.composer.groupFieldHint': "Escolha o campo booleano ou categórico usado nos indicadores de resumo.",
     'praxis.pageBuilder.studio.composer.statsUnsupportedHint': "Este recurso não publica agregação stats/group-by; os indicadores de resumo foram desativados automaticamente.",
+    'praxis.pageBuilder.saveAs.title': 'Nome da página',
+    'praxis.pageBuilder.saveAs.menu': 'Nome do menu',
+    'praxis.pageBuilder.saveAs.menuHint': 'Use o nome de um menu existente ou crie outro.',
+    'praxis.pageBuilder.saveAs.icon': 'Escolher ícone do menu',
+    'praxis.pageBuilder.saveAs.save': 'Salvar como nova página',
+    'praxis.pageBuilder.saveAs.saving': 'Salvando…',
+    'praxis.pageBuilder.saveAs.saved': 'Página e menu salvos.',
+    'praxis.pageBuilder.saveAs.open': 'Abrir página salva',
+    'praxis.pageBuilder.saveAs.failed': 'Não foi possível confirmar a página salva. Confira o destino e tente novamente.',
+    'praxis.pageBuilder.saveAs.invalidIcon': 'Escolha um nome Material Icons sem prefixo de família.',
+    'praxis.pageBuilder.saveAs.invalidName': 'Informe um nome válido dentro do limite permitido.',
+    'praxis.pageBuilder.saveAs.copy': 'Criar cópia da página',
+    'praxis.pageBuilder.saveAs.copyFailed': 'Não foi possível preparar a cópia desta página.',
 };
 function createPraxisPageBuilderI18nConfig(options = {}) {
@@ -5590,7 +5619,7 @@ class WidgetShellEditorComponent {
         </div>
       </details>
     </div>
-  `, isInline: true, styles: [":host{display:block;container:shell-editor / inline-size}.shell-effective-style{display:grid;gap:4px;margin:0;font-size:12px}.shell-effective-style span{color:var(--md-sys-color-on-surface-variant)}.shell-topic-panel,.shell-topic{display:grid;gap:var(--pfx-spacing-4, 16px)}.shell-topic-panel{padding-block:var(--pfx-spacing-4, 16px);min-width:0}.shell-topic-panel[hidden]{display:none}.shell-topic-panel>.shell-grid{margin-block-end:var(--pfx-spacing-4, 16px)}.shell-link-summary{display:grid;gap:var(--pfx-spacing-1, 4px);padding-block:var(--pfx-spacing-3, 12px);overflow-wrap:anywhere}.shell-button-task{display:grid;gap:var(--pfx-spacing-4, 16px);min-width:0}.shell-button-count{margin:0;font-size:14px}.shell-action-technical,.shell-action-scopes{min-width:0;font-size:12px}.shell-action-technical summary,.shell-action-scopes summary{cursor:pointer;padding-block:8px}.shell-action-technical summary:focus-visible,.shell-action-scopes summary:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.shell-action-contract{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}.shell-action-contract dd{margin:0;overflow-wrap:anywhere}.shell-action-technical .shell-action-row{margin-top:12px}.shell-editor{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:20px;padding:12px 4px 20px}.shell-controls{display:grid;gap:var(--pfx-spacing-4, 16px);min-width:0;container:shell-controls / inline-size}.shell-preview-region{min-width:0}.shell-highlight-control{display:grid;gap:8px;min-width:0;grid-column:1 / -1}.shell-highlight-label{font-size:13px;font-weight:600}.shell-highlight-options{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}.shell-highlight-options mat-button-toggle{min-width:0}.shell-highlight-control p{margin:0;overflow-wrap:anywhere}@container shell-controls (max-width: 480px){.shell-controls .shell-grid,.shell-controls .shell-action-row,.shell-controls .shell-quick-inputs,.shell-controls .shell-available-item{grid-template-columns:minmax(0,1fr)}.shell-controls .shell-available-item>button{justify-self:start}}.shell-intro{margin:0;max-width:68ch;color:var(--md-sys-color-on-surface-variant);font-size:14px;line-height:1.5}.shell-details{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--pfx-spacing-4, 16px)}.shell-details summary{cursor:pointer;color:var(--md-sys-color-on-surface);font-weight:600;line-height:1.5}.shell-details summary:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:4px}.shell-option-content{display:grid;gap:var(--pfx-spacing-4, 16px);margin-top:var(--pfx-spacing-4, 16px);min-width:0}.shell-details>.shell-grid{margin-top:var(--pfx-spacing-4, 16px)}.shell-details>.shell-section{margin:var(--pfx-spacing-4, 16px) 0 var(--pfx-spacing-2, 8px)}.shell-validation{color:var(--md-sys-color-error);margin:0;line-height:1.5}.shell-section{margin:4px 0 -8px;color:var(--md-sys-color-on-surface);font-size:14px;font-weight:650;line-height:1.4}.shell-grid{display:grid;gap:12px 16px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.shell-field--wide{grid-column:1 / -1}.shell-preset-preview__body{display:grid;align-content:start;height:100%;color:var(--md-sys-color-on-surface-variant)}.shell-preset-preview__body .shell-mini-value,.shell-preset-preview__body .shell-mini-line{background:currentColor}.shell-preset-copy strong{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pfx-spacing-2, 8px)}.shell-preset-check{color:var(--md-sys-color-primary);flex-shrink:0}.shell-preset-field,.shell-preset-copy{display:grid}.shell-preset-field{gap:8px}.shell-preset-label{color:var(--md-sys-color-on-surface);font-size:13px;font-weight:600}.shell-preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.shell-preset-option{min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;padding:10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);text-align:left;cursor:pointer}.shell-preset-option:hover{background:var(--md-sys-color-surface-container-low)}.shell-preset-option:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.shell-preset-option--selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 1px var(--md-sys-color-primary)}.shell-preset-preview{box-sizing:border-box;display:block;height:64px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);background:var(--shell-mini-bg, var(--md-sys-color-surface));-webkit-backdrop-filter:var(--shell-mini-filter, none);backdrop-filter:var(--shell-mini-filter, none)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.shell-preset-preview--backdrop{background:var(--shell-mini-fallback, var(--md-sys-color-surface))}}@media(prefers-reduced-transparency:reduce){.shell-preset-preview--backdrop{background:var(--shell-mini-fallback, var(--md-sys-color-surface));-webkit-backdrop-filter:none;backdrop-filter:none}}.shell-preset-preview__header{display:flex;align-items:center;gap:4px;padding-inline:8px;height:22px;border-bottom:1px solid transparent}.shell-preset-preview--none{border-style:dashed;border-radius:8px;background:transparent;box-shadow:none}.shell-preset-copy{gap:3px}.shell-preset-copy small{color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35}.shell-flags{display:flex;gap:16px;align-items:center}.shell-actions-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shell-available{display:grid;gap:12px}.shell-available-toolbar{display:grid;gap:12px;grid-template-columns:minmax(200px,1fr)}.shell-available-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.shell-available-list{display:grid;gap:10px}.shell-available-item{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--md-sys-color-outline-variant);padding-block:12px;align-items:start;min-width:0}.shell-available-main{min-width:0;overflow-wrap:anywhere}.shell-available-title{display:flex;align-items:center;gap:10px}.shell-available-text{display:grid;gap:4px}.shell-available-label{font-weight:600}.shell-available-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-available-payload{font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-action-availability{font-size:12px;line-height:1.5;padding:8px 10px;border-inline-start:2px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.shell-available-warning{font-size:11px;color:var(--md-sys-color-error)}.shell-available-actions{display:flex;align-items:flex-start;justify-content:flex-end}.shell-badge{padding:2px 6px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);font-size:10px}.shell-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.shell-actions{display:grid;gap:12px}.shell-action{border-top:1px solid var(--md-sys-color-outline-variant);padding-block:16px;display:grid;gap:8px}.shell-action-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.shell-action-actions{display:flex;justify-content:flex-end}.shell-action-hint,.shell-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-hint{margin:0;line-height:1.5;align-self:center;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-quick-inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.shell-input-path{font-size:12px;color:var(--md-sys-color-on-surface-variant);align-self:center}.shell-editor .mat-mdc-form-field{width:100%;min-width:0}:host{display:block;min-width:0}.shell-editor>*,.shell-action>*{min-width:0}.shell-available-text,.shell-input-path{min-width:0;overflow-wrap:anywhere}.shell-preview-region{min-width:0;background:var(--md-sys-color-surface)}.shell-preview-content{display:grid;gap:12px;padding-top:12px}.shell-preview-heading{cursor:pointer;padding-block:8px}.shell-preview-heading:before{content:\"\\25b8\"}.shell-preview-region[open]>.shell-preview-heading:before{content:\"\\25be\"}.shell-preview-heading:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.shell-preview-heading,.shell-override-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.shell-preview-heading strong{margin-right:auto;font-size:14px}.shell-preview-heading>span,.shell-override-summary{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-preview{padding:16px;background:var(--md-sys-color-surface-container-low);min-width:0}.shell-sample-content{display:grid;gap:8px}.shell-sample-content>span{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-sample-content strong{font-size:32px;line-height:1.15;font-variant-numeric:tabular-nums}.shell-mini-title,.shell-mini-action,.shell-mini-value,.shell-mini-line{display:block;background:var(--md-sys-color-on-surface-variant);opacity:.45;border-radius:2px}.shell-mini-title{width:24px;height:3px}.shell-mini-action{width:4px;height:4px;margin-left:auto}.shell-mini-value{width:20px;height:8px;margin:8px 8px 4px;opacity:.7}.shell-mini-line{width:32px;height:3px;margin-inline:8px}@media(max-width:640px){.shell-editor{padding-inline:0}.shell-grid,.shell-action-row,.shell-quick-inputs,.shell-available-toolbar{grid-template-columns:minmax(0,1fr)}.shell-actions-head,.shell-flags{flex-wrap:wrap}.shell-field--wide{grid-column:auto}}\n"], dependencies: [{ kind: "component", type: WidgetShellComponent, selector: "praxis-widget-shell", inputs: ["shell", "context", "dragSurfaceEnabled", "dragSurfaceLabel"], outputs: ["action", "dragSurfacePointerDown", "dragSurfaceKeydown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: i9.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: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: SettingsSectionTabsComponent, selector: "praxis-settings-section-tabs", inputs: ["sections", "selectedId", "label", "invalidLabel", "panelId"], outputs: ["selectedIdChange"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;container:shell-editor / inline-size}.shell-effective-style{display:grid;gap:4px;margin:0;font-size:12px}.shell-effective-style span{color:var(--md-sys-color-on-surface-variant)}.shell-topic-panel,.shell-topic{display:grid;gap:var(--pfx-spacing-4, 16px)}.shell-topic-panel{padding-block:var(--pfx-spacing-4, 16px);min-width:0}.shell-topic-panel[hidden]{display:none}.shell-topic-panel>.shell-grid{margin-block-end:var(--pfx-spacing-4, 16px)}.shell-link-summary{display:grid;gap:var(--pfx-spacing-1, 4px);padding-block:var(--pfx-spacing-3, 12px);overflow-wrap:anywhere}.shell-button-task{display:grid;gap:var(--pfx-spacing-4, 16px);min-width:0}.shell-button-count{margin:0;font-size:14px}.shell-action-technical,.shell-action-scopes{min-width:0;font-size:12px}.shell-action-technical summary,.shell-action-scopes summary{cursor:pointer;padding-block:8px}.shell-action-technical summary:focus-visible,.shell-action-scopes summary:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.shell-action-contract{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px}.shell-action-contract dd{margin:0;overflow-wrap:anywhere}.shell-action-technical .shell-action-row{margin-top:12px}.shell-editor{display:grid;grid-template-columns:minmax(0,1fr);min-width:0;gap:20px;padding:12px 4px 20px}.shell-controls{display:grid;gap:var(--pfx-spacing-4, 16px);min-width:0;container:shell-controls / inline-size}.shell-preview-region{min-width:0}.shell-highlight-control{display:grid;gap:8px;min-width:0;grid-column:1 / -1}.shell-highlight-label{font-size:13px;font-weight:600}.shell-highlight-options{display:flex;flex-wrap:wrap;width:fit-content;max-width:100%}.shell-highlight-options mat-button-toggle{min-width:0}.shell-highlight-control p{margin:0;overflow-wrap:anywhere}@container shell-controls (max-width: 480px){.shell-controls .shell-grid,.shell-controls .shell-action-row,.shell-controls .shell-quick-inputs,.shell-controls .shell-available-item{grid-template-columns:minmax(0,1fr)}.shell-controls .shell-available-item>button{justify-self:start}}.shell-intro{margin:0;max-width:68ch;color:var(--md-sys-color-on-surface-variant);font-size:14px;line-height:1.5}.shell-details{border-top:1px solid var(--md-sys-color-outline-variant);padding-top:var(--pfx-spacing-4, 16px)}.shell-details summary{cursor:pointer;color:var(--md-sys-color-on-surface);font-weight:600;line-height:1.5}.shell-details summary:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:4px}.shell-option-content{display:grid;gap:var(--pfx-spacing-4, 16px);margin-top:var(--pfx-spacing-4, 16px);min-width:0}.shell-details>.shell-grid{margin-top:var(--pfx-spacing-4, 16px)}.shell-details>.shell-section{margin:var(--pfx-spacing-4, 16px) 0 var(--pfx-spacing-2, 8px)}.shell-validation{color:var(--md-sys-color-error);margin:0;line-height:1.5}.shell-section{margin:4px 0 -8px;color:var(--md-sys-color-on-surface);font-size:14px;font-weight:650;line-height:1.4}.shell-grid{display:grid;gap:12px 16px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.shell-field--wide{grid-column:1 / -1}.shell-preset-preview__body{display:grid;align-content:start;height:100%;color:var(--md-sys-color-on-surface-variant)}.shell-preset-preview__body .shell-mini-value,.shell-preset-preview__body .shell-mini-line{background:currentColor}.shell-preset-copy strong{display:flex;align-items:baseline;justify-content:space-between;gap:var(--pfx-spacing-2, 8px)}.shell-preset-check{color:var(--md-sys-color-primary);flex-shrink:0}.shell-preset-field,.shell-preset-copy{display:grid}.shell-preset-field{gap:8px}.shell-preset-label{color:var(--md-sys-color-on-surface);font-size:13px;font-weight:600}.shell-preset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.shell-preset-option{min-width:0;display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px;padding:10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);text-align:left;cursor:pointer}.shell-preset-option:hover{background:var(--md-sys-color-surface-container-low)}.shell-preset-option:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.shell-preset-option--selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 1px var(--md-sys-color-primary)}.shell-preset-preview{box-sizing:border-box;display:block;height:64px;overflow:hidden;border:1px solid var(--md-sys-color-outline-variant);background:var(--shell-mini-bg, var(--md-sys-color-surface));-webkit-backdrop-filter:var(--shell-mini-filter, none);backdrop-filter:var(--shell-mini-filter, none)}@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.shell-preset-preview--backdrop{background:var(--shell-mini-fallback, var(--md-sys-color-surface))}}@media(prefers-reduced-transparency:reduce){.shell-preset-preview--backdrop{background:var(--shell-mini-fallback, var(--md-sys-color-surface));-webkit-backdrop-filter:none;backdrop-filter:none}}.shell-preset-preview__header{display:flex;align-items:center;gap:4px;padding-inline:8px;height:22px;border-bottom:1px solid transparent}.shell-preset-preview--none{border-style:dashed;border-radius:8px;background:transparent;box-shadow:none}.shell-preset-copy{gap:3px}.shell-preset-copy small{color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35}.shell-flags{display:flex;gap:16px;align-items:center}.shell-actions-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.shell-available{display:grid;gap:12px}.shell-available-toolbar{display:grid;gap:12px;grid-template-columns:minmax(200px,1fr)}.shell-available-filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.shell-available-list{display:grid;gap:10px}.shell-available-item{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;border-bottom:1px solid var(--md-sys-color-outline-variant);padding-block:12px;align-items:start;min-width:0}.shell-available-main{min-width:0;overflow-wrap:anywhere}.shell-available-title{display:flex;align-items:center;gap:10px}.shell-available-text{display:grid;gap:4px}.shell-available-label{font-weight:600}.shell-available-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-available-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-available-payload{font-size:11px;color:var(--md-sys-color-on-surface-variant)}.shell-action-availability{font-size:12px;line-height:1.5;padding:8px 10px;border-inline-start:2px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant)}.shell-available-warning{font-size:11px;color:var(--md-sys-color-error)}.shell-available-actions{display:flex;align-items:flex-start;justify-content:flex-end}.shell-badge{padding:2px 6px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant);font-size:10px}.shell-code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.shell-actions{display:grid;gap:12px}.shell-action{border-top:1px solid var(--md-sys-color-outline-variant);padding-block:16px;display:grid;gap:8px}.shell-action-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.shell-action-actions{display:flex;justify-content:flex-end}.shell-action-hint,.shell-empty{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-hint{margin:0;line-height:1.5;align-self:center;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-quick-inputs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.shell-input-path{font-size:12px;color:var(--md-sys-color-on-surface-variant);align-self:center}.shell-editor .mat-mdc-form-field{width:100%;min-width:0}:host{display:block;min-width:0}.shell-editor>*,.shell-action>*{min-width:0}.shell-available-text,.shell-input-path{min-width:0;overflow-wrap:anywhere}.shell-preview-region{min-width:0;background:var(--md-sys-color-surface)}.shell-preview-content{display:grid;gap:12px;padding-top:12px}.shell-preview-heading{cursor:pointer;padding-block:8px}.shell-preview-heading:before{content:\"\\25b8\"}.shell-preview-region[open]>.shell-preview-heading:before{content:\"\\25be\"}.shell-preview-heading:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.shell-preview-heading,.shell-override-summary{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.shell-preview-heading strong{margin-right:auto;font-size:14px}.shell-preview-heading>span,.shell-override-summary{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-preview{padding:16px;background:var(--md-sys-color-surface-container-low);min-width:0}.shell-sample-content{display:grid;gap:8px}.shell-sample-content>span{font-size:12px;color:var(--md-sys-color-on-surface-variant)}.shell-sample-content strong{font-size:32px;line-height:1.15;font-variant-numeric:tabular-nums}.shell-mini-title,.shell-mini-action,.shell-mini-value,.shell-mini-line{display:block;background:var(--md-sys-color-on-surface-variant);opacity:.45;border-radius:2px}.shell-mini-title{width:24px;height:3px}.shell-mini-action{width:4px;height:4px;margin-left:auto}.shell-mini-value{width:20px;height:8px;margin:8px 8px 4px;opacity:.7}.shell-mini-line{width:32px;height:3px;margin-inline:8px}@media(max-width:640px){.shell-editor{padding-inline:0}.shell-grid,.shell-action-row,.shell-quick-inputs,.shell-available-toolbar{grid-template-columns:minmax(0,1fr)}.shell-actions-head,.shell-flags{flex-wrap:wrap}.shell-field--wide{grid-column:auto}}\n"], dependencies: [{ kind: "component", type: WidgetShellComponent, selector: "praxis-widget-shell", inputs: ["shell", "context", "dragSurfaceEnabled", "dragSurfaceLabel"], outputs: ["action", "dragSurfacePointerDown", "dragSurfaceKeydown"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.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: i4$1.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: i3$2.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: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: SettingsSectionTabsComponent, selector: "praxis-settings-section-tabs", inputs: ["sections", "selectedId", "label", "invalidLabel", "panelId"], outputs: ["selectedIdChange"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WidgetShellEditorComponent, decorators: [{
             type: Component,
@@ -16952,11 +16981,49 @@ class DynamicPageConfigEditorComponent {
             }
         }
         const normalizedPath = resourcePath.replace(/^\/+|\/+$/g, '');
-        const fallbackFields = (entry?.responseFields || []).map((f) => ({
-            name: f.name,
-            label: f.label || f.name,
-            type: f.type || 'string',
-        }));
+        const mappedMetas = mapCatalogFieldsToMetadata(entry?.responseFields);
+        const metaByName = new Map(mappedMetas.map((meta) => [meta.name, meta]));
+        const fallbackFields = (entry?.responseFields || [])
+            .filter((f) => Boolean(f?.name && String(f.name).trim()))
+            .map((f) => {
+            const name = String(f.name).trim();
+            const rawLabel = typeof f.label === 'string' ? f.label.trim() : '';
+            const label = rawLabel && rawLabel !== name
+                ? rawLabel
+                : humanizeCatalogFieldName(name);
+            const mapped = metaByName.get(name);
+            const description = typeof f.description === 'string' && f.description.trim()
+                ? f.description.trim()
+                : undefined;
+            return {
+                name,
+                label,
+                type: f.type || 'string',
+                ...(description ? { description } : {}),
+                ...(typeof f.format === 'string' && f.format.trim()
+                    ? { format: f.format.trim() }
+                    : {}),
+                ...(typeof f.controlType === 'string' && f.controlType.trim()
+                    ? { controlType: f.controlType.trim() }
+                    : mapped?.controlType
+                        ? { controlType: mapped.controlType }
+                        : {}),
+                ...(Array.isArray(f.enumValues) ? { enumValues: f.enumValues } : {}),
+                ...(mapped?.options?.length
+                    ? {
+                        options: mapped.options.map((opt) => {
+                            const optLabel = String(opt.label ?? opt.text ?? opt.value);
+                            return {
+                                key: String(opt.value),
+                                value: String(opt.value),
+                                label: optLabel,
+                                text: opt.text ?? optLabel,
+                            };
+                        }),
+                    }
+                    : {}),
+            };
+        });
         if (normalizedPath !== this.composerSchemaPath || fallbackFields.length > 0 || !entry) {
             this.composerSchemaPath = '';
             this.composerSchemaFields.set(fallbackFields);
@@ -16973,10 +17040,17 @@ class DynamicPageConfigEditorComponent {
         if (current && fields.some((f) => f.name === current))
             return;
         const isBoolean = (f) => this.getComposerFieldTypeBadge(f).toLowerCase() === 'boolean';
-        const isStatusSemantic = (f) => /^(ativo|status|situacao|enabled|active)/i.test(String(f.name || ''));
+        const hasEnumOptions = (f) => {
+            const raw = f;
+            return ((Array.isArray(raw['enumValues']) && raw['enumValues'].length > 0)
+                || (Array.isArray(f.options) && f.options.length > 0));
+        };
+        const isStatusSemantic = (f) => /^(ativo|status|situacao|situação|situacaofuncional|enabled|active)/i.test(String(f.name || ''));
         const candidate = fields.find((f) => isBoolean(f) && isStatusSemantic(f))
             ?? fields.find((f) => isBoolean(f))
-            ?? fields.find((f) => /^(ativo|status|situacao|enabled|active|tipo|categoria|estado)/i.test(String(f.name || '')))
+            ?? fields.find((f) => hasEnumOptions(f) && isStatusSemantic(f))
+            ?? fields.find((f) => /^(ativo|status|situacao|situação|situacaofuncional|enabled|active|tipo|categoria|estado)/i.test(String(f.name || '')))
+            ?? fields.find((f) => hasEnumOptions(f))
             ?? fields[0];
         if (candidate?.name) {
             this.composerGroupFieldControl.setValue(candidate.name, { emitEvent: false });
@@ -17063,6 +17137,55 @@ class DynamicPageConfigEditorComponent {
             },
         });
     }
+    resolveGroupByMappings(groupField) {
+        const baseMappings = {
+            true: 'active',
+            false: 'inactive',
+            1: 'active',
+            0: 'inactive',
+            ATIVO: 'active',
+            INATIVO: 'inactive',
+            ACTIVE: 'active',
+            INACTIVE: 'inactive',
+            A: 'active',
+            I: 'inactive',
+        };
+        const fieldDef = this.composerSchemaFields().find((f) => String(f?.name || '').trim() === groupField);
+        if (!fieldDef)
+            return baseMappings;
+        const raw = fieldDef;
+        const enumValues = [];
+        if (Array.isArray(raw['enumValues'])) {
+            for (const v of raw['enumValues']) {
+                const s = String(v ?? '').trim();
+                if (s)
+                    enumValues.push(s);
+            }
+        }
+        else if (Array.isArray(fieldDef.options)) {
+            for (const opt of fieldDef.options) {
+                const s = String(opt?.value ?? opt?.key ?? '').trim();
+                if (s)
+                    enumValues.push(s);
+            }
+        }
+        if (!enumValues.length)
+            return baseMappings;
+        const positiveRegex = /^(true|1|ativo|active|a|sim|yes|abert[ao]|em_andamento|andamento|aprovad[ao]|concluid[ao]|regular|valid[ao]|normal|enabled)$/i;
+        const hasPositiveMatch = enumValues.some((v) => positiveRegex.test(v));
+        for (let i = 0; i < enumValues.length; i += 1) {
+            const val = enumValues[i];
+            if (baseMappings[val] !== undefined)
+                continue;
+            if (hasPositiveMatch) {
+                baseMappings[val] = positiveRegex.test(val) ? 'active' : 'inactive';
+            }
+            else {
+                baseMappings[val] = i === 0 ? 'active' : 'inactive';
+            }
+        }
+        return baseMappings;
+    }
     composeCollectionScreen(overrides) {
         const resourcePath = (overrides?.resourcePath ?? this.composerResourcePathControl.value).trim();
         if (!resourcePath)
@@ -17274,18 +17397,7 @@ class DynamicPageConfigEditorComponent {
                     transform: {
                         kind: 'group-by-map',
                         totalField: 'total',
-                        mappings: {
-                            true: 'active',
-                            false: 'inactive',
-                            1: 'active',
-                            0: 'inactive',
-                            ATIVO: 'active',
-                            INATIVO: 'inactive',
-                            ACTIVE: 'active',
-                            INACTIVE: 'inactive',
-                            A: 'active',
-                            I: 'inactive',
-                        },
+                        mappings: this.resolveGroupByMappings(groupField),
                         ratios: {
                             activeRatePct: {
                                 numerator: 'active',
@@ -18460,7 +18572,7 @@ 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 && !item.title.endsWith('(' + 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.externalSourceLabels.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                <praxis-resource-quick-connect\n                  [formControl]=\"composerResourcePathControl\"\n                  intent=\"collection\"\n                  [label]=\"tx('studio.composer.resourcePath', 'Resource path')\"\n                  (resourceSelected)=\"onComposerResourceSelected($event)\"\n                  data-testid=\"composer-resource-path\"\n                />\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\n                    matInput\n                    [formControl]=\"composerGroupFieldControl\"\n                    [matAutocomplete]=\"composerGroupFieldPicker\"\n                    data-testid=\"composer-group-field\"\n                  />\n                  <mat-autocomplete\n                    #composerGroupFieldPicker=\"matAutocomplete\"\n                    (optionSelected)=\"composerGroupFieldControl.markAsPristine()\"\n                  >\n                    @for (field of filteredComposerGroupFieldOptions(); track field.name) {\n                      <mat-option [value]=\"field.name\" [attr.data-testid]=\"'composer-group-field-option-' + field.name\">\n                        <div class=\"composer-rich-field-option\">\n                          <div class=\"composer-rich-field-option__header\">\n                            <span class=\"composer-rich-field-option__label\">{{ field.label || field.name }}</span>\n                            @if (field.label && field.label !== field.name) {\n                              <code class=\"composer-rich-field-option__code\">{{ field.name }}</code>\n                            }\n                            @if (getComposerFieldTypeBadge(field); as badge) {\n                              <span class=\"composer-rich-field-option__badge\">{{ badge }}</span>\n                            }\n                          </div>\n                          @if (getComposerFieldDescription(field); as desc) {\n                            <span class=\"composer-rich-field-option__desc\">{{ desc }}</span>\n                          }\n                        </div>\n                      </mat-option>\n                    }\n                  </mat-autocomplete>\n                  @if (composerSelectedResource()?.capabilities?.stats === false) {\n                    <mat-hint data-testid=\"composer-stats-unsupported-hint\">{{ tx('studio.composer.statsUnsupportedHint', 'This resource does not publish stats/group-by aggregation; summary indicators were disabled automatically.') }}</mat-hint>\n                  } @else {\n                    <mat-hint>{{ tx('studio.composer.groupFieldHint', 'Choose the boolean or categorical field used in summary indicators.') }}</mat-hint>\n                  }\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\"><mat-icon aria-hidden=\"true\">{{ w.icon }}</mat-icon><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 {@if (bindablePageWidgets().length > 0) {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgets', 'Widgets in group') }}</mat-label><mat-select multiple [value]=\"groupingSelectedWidgetKeys($index)\" (selectionChange)=\"onGroupingWidgetSelectionChange($index, $event.value)\" [attr.data-testid]=\"'grouping-widget-select-' + $index\" panelClass=\"praxis-binder-widget-select-panel\"><mat-select-trigger><span class=\"binder-widget-trigger\"><mat-icon aria-hidden=\"true\" class=\"binder-widget-trigger-icon\">{{ groupingSelectedWidgetIcon($index) }}</mat-icon><span class=\"binder-widget-trigger-text\">{{ groupingSelectedWidgetsLabel($index) }}</span></span></mat-select-trigger>@for (w of bindablePageWidgets(); track w.key) {<mat-option [value]=\"w.key\" [attr.data-widget-key]=\"w.key\" class=\"binder-widget-option\"><span class=\"binder-widget-option-row\"><mat-icon class=\"binder-widget-option-icon\" aria-hidden=\"true\">{{ w.icon }}</mat-icon><span class=\"binder-widget-option-copy\"><strong class=\"binder-widget-option-title\">{{ w.title }}</strong>@if (w.description) {<small class=\"binder-widget-option-desc\">{{ w.description }}</small>}</span><span class=\"binder-widget-option-sr-key\" aria-hidden=\"true\">{{ w.key }}</span></span></mat-option>}</mat-select></mat-form-field>}<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                <div class=\"studio-actions\">\n                  @if (dataSourceNodes.controls.length) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      data-testid=\"page-state-sync-from-datasources\"\n                      (click)=\"syncStateValuesFromDataSources()\"\n                    >\n                      <mat-icon>sync</mat-icon>{{ tx('editor.state.syncFromDataSources', 'Sync state paths') }}\n                    </button>\n                  }\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              </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                    <praxis-resource-quick-connect\n                      formControlName=\"resourcePath\"\n                      [intent]=\"ds.controls.kind.value === 'stats-query' ? 'stats' : (ds.controls.kind.value === 'raw-http' ? 'any' : 'collection')\"\n                      [endpointKey]=\"resolveEndpointKey(ds.controls.endpointKey.value)\"\n                      [label]=\"tx('editor.state.resourcePath', 'Resource path')\"\n                      [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\"\n                    />\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\n                        matInput\n                        formControlName=\"targetStatePath\"\n                        [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\"\n                        (blur)=\"syncStateValuesFromDataSources()\"\n                      />\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\" panelClass=\"praxis-binder-widget-select-panel\">\n                    @if (selectedBinderWidget(); as selectedWidget) {\n                      <mat-select-trigger>\n                        <span class=\"binder-widget-trigger\">\n                          <mat-icon aria-hidden=\"true\" class=\"binder-widget-trigger-icon\">{{ selectedWidget.icon }}</mat-icon>\n                          <span class=\"binder-widget-trigger-text\">\n                            <strong>{{ selectedWidget.title }}</strong>\n                            @if (selectedWidget.description) {\n                              <small> \u00B7 {{ selectedWidget.description }}</small>\n                            }\n                          </span>\n                        </span>\n                      </mat-select-trigger>\n                    }\n                    @for (w of bindablePageWidgets(); track w.key) {\n                      <mat-option [value]=\"w.key\" [attr.data-widget-key]=\"w.key\" class=\"binder-widget-option\">\n                        <span class=\"binder-widget-option-row\">\n                          <mat-icon aria-hidden=\"true\" class=\"binder-widget-option-icon\">{{ w.icon }}</mat-icon>\n                          <span class=\"binder-widget-option-copy\">\n                            <strong class=\"binder-widget-option-title\">{{ w.title }}</strong>\n                            @if (w.description) {\n                              <small class=\"binder-widget-option-desc\">{{ w.description }}</small>\n                            }\n                          </span>\n                          <span class=\"binder-widget-option-sr-key\" aria-hidden=\"true\">{{ w.key }}</span>\n                        </span>\n                      </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              @if (availableStateBindingTokens().length) {\n                <div class=\"binder-input-suggestions\" data-testid=\"binder-token-suggestions\">\n                  <span class=\"hint\">{{ tx('editor.state.binderTokenSuggestions', 'Available tokens:') }}</span>\n                  @for (availableToken of availableStateBindingTokens(); track availableToken) {\n                    <button\n                      type=\"button\"\n                      class=\"binder-input-suggestion-chip\"\n                      [class.active]=\"binderTokenControl.value === availableToken\"\n                      [attr.data-testid]=\"'binder-token-suggestion-' + availableToken\"\n                      (click)=\"selectBinderTokenSuggestion(availableToken)\"\n                    >\n                      <code>{{ availableToken }}</code>\n                    </button>\n                  }\n                </div>\n              }\n              <div class=\"binder-input-suggestions\" data-testid=\"binder-pipe-suggestions\">\n                <span class=\"hint\">{{ tx('editor.state.binderPipeSuggestions', 'Formatadores CSP-safe (pipes):') }}</span>\n                @for (pipeSegment of binderDeclarativePipes; track pipeSegment) {\n                  <button\n                    type=\"button\"\n                    class=\"binder-input-suggestion-chip\"\n                    [attr.data-testid]=\"'binder-pipe-chip-' + pipeSegment\"\n                    (click)=\"appendBinderTokenPipe(pipeSegment)\"\n                  >\n                    <code>{{ pipeSegment }}</code>\n                  </button>\n                }\n              </div>\n              @if (binderTokenPipeError(); as pipeErr) {\n                <p class=\"studio-status binder-unbound-warning\" role=\"alert\" data-testid=\"binder-pipe-error\">{{ pipeErr }}</p>\n              } @else if (binderTokenLivePreview(); as livePreviewVal) {\n                <p class=\"hint\" data-testid=\"binder-live-preview\">\n                  {{ tx('editor.state.binderLivePreview', 'Preview simulado:') }} <strong>{{ livePreviewVal }}</strong>\n                </p>\n              }\n              @if (selectedBinderWidgetInputSuggestions().length) {\n                <div class=\"binder-input-suggestions\" data-testid=\"binder-input-suggestions\">\n                  <span class=\"hint\">{{ tx('editor.state.binderInputSuggestions', 'Suggested paths:') }}</span>\n                  @for (suggestedPath of selectedBinderWidgetInputSuggestions(); track suggestedPath) {\n                    <button\n                      type=\"button\"\n                      class=\"binder-input-suggestion-chip\"\n                      [class.active]=\"binderInputPathControl.value === suggestedPath\"\n                      [attr.data-testid]=\"'binder-input-suggestion-' + suggestedPath\"\n                      (click)=\"selectBinderInputPathSuggestion(suggestedPath)\"\n                    >\n                      <code>{{ suggestedPath }}</code>\n                    </button>\n                  }\n                </div>\n              }\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 (invalidWidgetStateBindingPipes().length) {\n                <div class=\"binder-unbound-warning\" role=\"alert\" data-testid=\"binder-invalid-pipes-warning\">\n                  <mat-icon aria-hidden=\"true\">error_outline</mat-icon>\n                  <div class=\"binder-unbound-warning__body\">\n                    <span>{{ tx('editor.state.invalidWidgetPipesWarning', 'Formatadores (pipes) inv\u00E1lidos detectados:') }}</span>\n                    <div class=\"binder-unbound-warning__chips\">\n                      @for (invalidBinding of invalidWidgetStateBindingPipes(); track invalidBinding.widgetKey + ':' + invalidBinding.inputPath) {\n                        <button\n                          type=\"button\"\n                          class=\"binder-unbound-chip\"\n                          [attr.data-testid]=\"'binder-invalid-pipe-chip-' + invalidBinding.widgetKey + '-' + invalidBinding.inputPath\"\n                          (click)=\"loadStateBindingIntoForm(invalidBinding)\"\n                        >\n                          <strong>{{ invalidBinding.widgetTitle }}</strong>.<code>{{ invalidBinding.inputPath }}</code> (<code>{{ invalidBinding.expression }}</code>)\n                        </button>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (unboundWidgetStatePlaceholders().length; as unboundCount) {\n                <div class=\"binder-unbound-warning\" role=\"status\" data-testid=\"binder-unbound-placeholders-warning\">\n                  <mat-icon aria-hidden=\"true\">warning_amber</mat-icon>\n                  <div class=\"binder-unbound-warning__body\">\n                    <span>{{ tx('editor.state.unboundPlaceholdersWarning', 'Placeholders sem v\u00EDnculo detectados:') }}</span>\n                    <div class=\"binder-unbound-warning__chips\">\n                      @for (item of unboundWidgetStatePlaceholders(); track item.widgetKey + ':' + item.placeholder) {\n                        <button\n                          type=\"button\"\n                          class=\"binder-unbound-chip\"\n                          [attr.data-testid]=\"'binder-unbound-chip-' + item.widgetKey + '-' + item.placeholder\"\n                          [attr.title]=\"tx('editor.state.selectUnboundPlaceholderHint', 'Clique para preencher widget e caminho no formul\u00E1rio')\"\n                          (click)=\"selectUnboundPlaceholder(item)\"\n                        >\n                          <strong>{{ item.widgetTitle }}</strong> (<code>{{ '${' + item.placeholder + '}' }}</code>)\n                        </button>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (currentWidgetStateBindings().length) {\n                <ul class=\"blocked-widgets-list binder-active-list\" data-testid=\"active-widget-state-bindings\">\n                  @for (binding of currentWidgetStateBindings(); track binding.widgetKey + ':' + binding.inputPath) {\n                    @let previewVal = resolveStateTokenPreview(binding.token);\n                    <li class=\"binder-active-item\">\n                      <mat-icon aria-hidden=\"true\" class=\"binder-active-icon\">{{ widgetIconForKey(binding.widgetKey) }}</mat-icon>\n                      <button\n                        type=\"button\"\n                        class=\"binder-active-copy binder-active-select-btn\"\n                        [attr.data-testid]=\"'binder-select-' + binding.widgetKey + '-' + binding.inputPath\"\n                        [attr.title]=\"tx('editor.state.editBindingHint', 'Click to load binding into form')\"\n                        (click)=\"loadStateBindingIntoForm(binding)\"\n                      >\n                        <strong>{{ binding.widgetTitle }}</strong>.<code>{{ binding.inputPath }}</code> \u2190 <code>{{ binding.token }}</code>\n                        @if (previewVal !== null) {\n                          <small class=\"binder-preview-badge\" [attr.data-testid]=\"'binder-preview-' + binding.widgetKey + '-' + binding.inputPath\">= {{ previewVal }}</small>\n                        }\n                      </button>\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\">{{ limitsTargetIcon(limitsTargetControl.value) }}</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                  <mat-select-trigger>\n                    <span class=\"binder-widget-trigger\">\n                      <mat-icon aria-hidden=\"true\" class=\"binder-widget-trigger-icon\">{{ limitsTargetIcon(limitsTargetControl.value) }}</mat-icon>\n                      <span class=\"binder-widget-trigger-text\">{{ limitsTargetLabel(limitsTargetControl.value) }}</span>\n                    </span>\n                  </mat-select-trigger>\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">\n                      <mat-icon aria-hidden=\"true\">{{ limitsTargetIcon(index) }}</mat-icon>\n                      <span>{{ limitsTargetLabel(index) }}</span>\n                    </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))}@container (max-width: 600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}@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))}.quick-geometry-label{display:inline-flex;align-items:center;gap:6px;min-width:0}.quick-geometry-label mat-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-widget-trigger{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}.binder-widget-trigger-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-widget-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.binder-widget-trigger-text small{color:var(--md-sys-color-on-surface-variant, currentColor);font-weight:400}.binder-widget-option-row{position:relative;display:flex;align-items:flex-start;gap:10px;padding-block:4px;min-width:0}.binder-widget-option-icon{font-size:20px;width:20px;height:20px;margin-top:2px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-widget-option-copy{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}.binder-widget-option-title{font-weight:600;color:var(--md-sys-color-on-surface, currentColor);overflow-wrap:anywhere}.binder-widget-option-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant, currentColor);overflow-wrap:anywhere}.binder-widget-option-sr-key{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none}.binder-input-suggestions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.binder-input-suggestion-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .3));background:var(--md-sys-color-surface, transparent);color:var(--md-sys-color-on-surface, currentColor);font-size:12px;cursor:pointer;transition:border-color .1s,background-color .1s}.binder-input-suggestion-chip:hover{border-color:var(--md-sys-color-primary, currentColor);background:var(--md-sys-color-surface-container-low, rgba(128, 128, 128, .08))}.binder-input-suggestion-chip.active{border-color:var(--md-sys-color-primary, currentColor);background:var(--md-sys-color-primary-container, rgba(128, 128, 128, .16));color:var(--md-sys-color-on-primary-container, currentColor)}.binder-active-list{list-style:none;padding-inline-start:0;gap:6px}.binder-active-item{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:var(--md-sys-color-surface, rgba(255, 255, 255, .03))}.binder-active-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-active-copy{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.binder-active-select-btn{appearance:none;border:none;background:transparent;color:inherit;font:inherit;text-align:start;padding:2px 4px;border-radius:4px;cursor:pointer}.binder-active-select-btn:hover{background:var(--md-sys-color-surface-container-low, rgba(128, 128, 128, .08))}.binder-active-select-btn:focus-visible{outline:2px solid var(--md-sys-color-primary, currentColor);outline-offset:2px}.binder-preview-badge{display:inline-flex;align-items:center;margin-inline-start:6px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:600;color:var(--md-sys-color-on-secondary-container, #1d192b);background:var(--md-sys-color-secondary-container, rgba(103, 80, 164, .14))}.binder-unbound-warning{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;font-size:12px;border:1px solid var(--md-sys-color-tertiary, rgba(180, 110, 0, .35));background:color-mix(in srgb,var(--md-sys-color-tertiary-container, #ffdea6) 45%,transparent);color:var(--md-sys-color-on-surface, inherit)}.binder-unbound-warning__body{display:grid;gap:6px}.binder-unbound-warning__chips{display:flex;flex-wrap:wrap;gap:6px}.binder-unbound-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .35));background:var(--md-sys-color-surface, rgba(255, 255, 255, .65));color:inherit;font:inherit;font-size:11px;cursor:pointer}.binder-unbound-chip:hover{border-color:var(--md-sys-color-primary, currentColor)}.binder-unbound-chip:focus-visible{outline:2px solid var(--md-sys-color-primary, currentColor);outline-offset:2px}.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))}.composer-rich-field-option{display:flex;flex-direction:column;gap:2px;padding:2px 0;line-height:1.3;min-width:0}.composer-rich-field-option__header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.composer-rich-field-option__label{font-weight:500;color:var(--md-sys-color-on-surface, currentColor);overflow:hidden;text-overflow:ellipsis}.composer-rich-field-option__code{font-family:var(--mat-sys-mono-font, monospace);font-size:11px;padding:1px 6px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14));color:var(--md-sys-color-on-surface-variant, currentColor)}.composer-rich-field-option__badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary, #4f46e5) 14%,transparent);color:var(--md-sys-color-primary, currentColor)}.composer-rich-field-option__desc{font-size:11px;color:var(--md-sys-color-on-surface-variant, currentColor);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\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: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i7.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: i9.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: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i9$1.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: 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"] }, { kind: "component", type: ResourceQuickConnectComponent, selector: "praxis-resource-quick-connect", inputs: ["resourcePath", "endpointKey", "apiUrlEntry", "intent", "resources", "label", "placeholder", "hint", "disabled"], outputs: ["resourcePathChange", "resourceSelected"] }], 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 && !item.title.endsWith('(' + 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.externalSourceLabels.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                <praxis-resource-quick-connect\n                  [formControl]=\"composerResourcePathControl\"\n                  intent=\"collection\"\n                  [label]=\"tx('studio.composer.resourcePath', 'Resource path')\"\n                  (resourceSelected)=\"onComposerResourceSelected($event)\"\n                  data-testid=\"composer-resource-path\"\n                />\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\n                    matInput\n                    [formControl]=\"composerGroupFieldControl\"\n                    [matAutocomplete]=\"composerGroupFieldPicker\"\n                    data-testid=\"composer-group-field\"\n                  />\n                  <mat-autocomplete\n                    #composerGroupFieldPicker=\"matAutocomplete\"\n                    (optionSelected)=\"composerGroupFieldControl.markAsPristine()\"\n                  >\n                    @for (field of filteredComposerGroupFieldOptions(); track field.name) {\n                      <mat-option [value]=\"field.name\" [attr.data-testid]=\"'composer-group-field-option-' + field.name\">\n                        <div class=\"composer-rich-field-option\">\n                          <div class=\"composer-rich-field-option__header\">\n                            <span class=\"composer-rich-field-option__label\">{{ field.label || field.name }}</span>\n                            @if (field.label && field.label !== field.name) {\n                              <code class=\"composer-rich-field-option__code\">{{ field.name }}</code>\n                            }\n                            @if (getComposerFieldTypeBadge(field); as badge) {\n                              <span class=\"composer-rich-field-option__badge\">{{ badge }}</span>\n                            }\n                          </div>\n                          @if (getComposerFieldDescription(field); as desc) {\n                            <span class=\"composer-rich-field-option__desc\">{{ desc }}</span>\n                          }\n                        </div>\n                      </mat-option>\n                    }\n                  </mat-autocomplete>\n                  @if (composerSelectedResource()?.capabilities?.stats === false) {\n                    <mat-hint data-testid=\"composer-stats-unsupported-hint\">{{ tx('studio.composer.statsUnsupportedHint', 'This resource does not publish stats/group-by aggregation; summary indicators were disabled automatically.') }}</mat-hint>\n                  } @else {\n                    <mat-hint>{{ tx('studio.composer.groupFieldHint', 'Choose the boolean or categorical field used in summary indicators.') }}</mat-hint>\n                  }\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\"><mat-icon aria-hidden=\"true\">{{ w.icon }}</mat-icon><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 {@if (bindablePageWidgets().length > 0) {<mat-form-field appearance=\"outline\" class=\"wide\"><mat-label>{{ tx('editor.grouping.widgets', 'Widgets in group') }}</mat-label><mat-select multiple [value]=\"groupingSelectedWidgetKeys($index)\" (selectionChange)=\"onGroupingWidgetSelectionChange($index, $event.value)\" [attr.data-testid]=\"'grouping-widget-select-' + $index\" panelClass=\"praxis-binder-widget-select-panel\"><mat-select-trigger><span class=\"binder-widget-trigger\"><mat-icon aria-hidden=\"true\" class=\"binder-widget-trigger-icon\">{{ groupingSelectedWidgetIcon($index) }}</mat-icon><span class=\"binder-widget-trigger-text\">{{ groupingSelectedWidgetsLabel($index) }}</span></span></mat-select-trigger>@for (w of bindablePageWidgets(); track w.key) {<mat-option [value]=\"w.key\" [attr.data-widget-key]=\"w.key\" class=\"binder-widget-option\"><span class=\"binder-widget-option-row\"><mat-icon class=\"binder-widget-option-icon\" aria-hidden=\"true\">{{ w.icon }}</mat-icon><span class=\"binder-widget-option-copy\"><strong class=\"binder-widget-option-title\">{{ w.title }}</strong>@if (w.description) {<small class=\"binder-widget-option-desc\">{{ w.description }}</small>}</span><span class=\"binder-widget-option-sr-key\" aria-hidden=\"true\">{{ w.key }}</span></span></mat-option>}</mat-select></mat-form-field>}<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                <div class=\"studio-actions\">\n                  @if (dataSourceNodes.controls.length) {\n                    <button\n                      mat-button\n                      type=\"button\"\n                      data-testid=\"page-state-sync-from-datasources\"\n                      (click)=\"syncStateValuesFromDataSources()\"\n                    >\n                      <mat-icon>sync</mat-icon>{{ tx('editor.state.syncFromDataSources', 'Sync state paths') }}\n                    </button>\n                  }\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              </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                    <praxis-resource-quick-connect\n                      formControlName=\"resourcePath\"\n                      [intent]=\"ds.controls.kind.value === 'stats-query' ? 'stats' : (ds.controls.kind.value === 'raw-http' ? 'any' : 'collection')\"\n                      [endpointKey]=\"resolveEndpointKey(ds.controls.endpointKey.value)\"\n                      [label]=\"tx('editor.state.resourcePath', 'Resource path')\"\n                      [attr.data-testid]=\"'page-datasource-resourcePath-' + $index\"\n                    />\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\n                        matInput\n                        formControlName=\"targetStatePath\"\n                        [attr.data-testid]=\"'page-datasource-targetStatePath-' + $index\"\n                        (blur)=\"syncStateValuesFromDataSources()\"\n                      />\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\" panelClass=\"praxis-binder-widget-select-panel\">\n                    @if (selectedBinderWidget(); as selectedWidget) {\n                      <mat-select-trigger>\n                        <span class=\"binder-widget-trigger\">\n                          <mat-icon aria-hidden=\"true\" class=\"binder-widget-trigger-icon\">{{ selectedWidget.icon }}</mat-icon>\n                          <span class=\"binder-widget-trigger-text\">\n                            <strong>{{ selectedWidget.title }}</strong>\n                            @if (selectedWidget.description) {\n                              <small> \u00B7 {{ selectedWidget.description }}</small>\n                            }\n                          </span>\n                        </span>\n                      </mat-select-trigger>\n                    }\n                    @for (w of bindablePageWidgets(); track w.key) {\n                      <mat-option [value]=\"w.key\" [attr.data-widget-key]=\"w.key\" class=\"binder-widget-option\">\n                        <span class=\"binder-widget-option-row\">\n                          <mat-icon aria-hidden=\"true\" class=\"binder-widget-option-icon\">{{ w.icon }}</mat-icon>\n                          <span class=\"binder-widget-option-copy\">\n                            <strong class=\"binder-widget-option-title\">{{ w.title }}</strong>\n                            @if (w.description) {\n                              <small class=\"binder-widget-option-desc\">{{ w.description }}</small>\n                            }\n                          </span>\n                          <span class=\"binder-widget-option-sr-key\" aria-hidden=\"true\">{{ w.key }}</span>\n                        </span>\n                      </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              @if (availableStateBindingTokens().length) {\n                <div class=\"binder-input-suggestions\" data-testid=\"binder-token-suggestions\">\n                  <span class=\"hint\">{{ tx('editor.state.binderTokenSuggestions', 'Available tokens:') }}</span>\n                  @for (availableToken of availableStateBindingTokens(); track availableToken) {\n                    <button\n                      type=\"button\"\n                      class=\"binder-input-suggestion-chip\"\n                      [class.active]=\"binderTokenControl.value === availableToken\"\n                      [attr.data-testid]=\"'binder-token-suggestion-' + availableToken\"\n                      (click)=\"selectBinderTokenSuggestion(availableToken)\"\n                    >\n                      <code>{{ availableToken }}</code>\n                    </button>\n                  }\n                </div>\n              }\n              <div class=\"binder-input-suggestions\" data-testid=\"binder-pipe-suggestions\">\n                <span class=\"hint\">{{ tx('editor.state.binderPipeSuggestions', 'Formatadores CSP-safe (pipes):') }}</span>\n                @for (pipeSegment of binderDeclarativePipes; track pipeSegment) {\n                  <button\n                    type=\"button\"\n                    class=\"binder-input-suggestion-chip\"\n                    [attr.data-testid]=\"'binder-pipe-chip-' + pipeSegment\"\n                    (click)=\"appendBinderTokenPipe(pipeSegment)\"\n                  >\n                    <code>{{ pipeSegment }}</code>\n                  </button>\n                }\n              </div>\n              @if (binderTokenPipeError(); as pipeErr) {\n                <p class=\"studio-status binder-unbound-warning\" role=\"alert\" data-testid=\"binder-pipe-error\">{{ pipeErr }}</p>\n              } @else if (binderTokenLivePreview(); as livePreviewVal) {\n                <p class=\"hint\" data-testid=\"binder-live-preview\">\n                  {{ tx('editor.state.binderLivePreview', 'Preview simulado:') }} <strong>{{ livePreviewVal }}</strong>\n                </p>\n              }\n              @if (selectedBinderWidgetInputSuggestions().length) {\n                <div class=\"binder-input-suggestions\" data-testid=\"binder-input-suggestions\">\n                  <span class=\"hint\">{{ tx('editor.state.binderInputSuggestions', 'Suggested paths:') }}</span>\n                  @for (suggestedPath of selectedBinderWidgetInputSuggestions(); track suggestedPath) {\n                    <button\n                      type=\"button\"\n                      class=\"binder-input-suggestion-chip\"\n                      [class.active]=\"binderInputPathControl.value === suggestedPath\"\n                      [attr.data-testid]=\"'binder-input-suggestion-' + suggestedPath\"\n                      (click)=\"selectBinderInputPathSuggestion(suggestedPath)\"\n                    >\n                      <code>{{ suggestedPath }}</code>\n                    </button>\n                  }\n                </div>\n              }\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 (invalidWidgetStateBindingPipes().length) {\n                <div class=\"binder-unbound-warning\" role=\"alert\" data-testid=\"binder-invalid-pipes-warning\">\n                  <mat-icon aria-hidden=\"true\">error_outline</mat-icon>\n                  <div class=\"binder-unbound-warning__body\">\n                    <span>{{ tx('editor.state.invalidWidgetPipesWarning', 'Formatadores (pipes) inv\u00E1lidos detectados:') }}</span>\n                    <div class=\"binder-unbound-warning__chips\">\n                      @for (invalidBinding of invalidWidgetStateBindingPipes(); track invalidBinding.widgetKey + ':' + invalidBinding.inputPath) {\n                        <button\n                          type=\"button\"\n                          class=\"binder-unbound-chip\"\n                          [attr.data-testid]=\"'binder-invalid-pipe-chip-' + invalidBinding.widgetKey + '-' + invalidBinding.inputPath\"\n                          (click)=\"loadStateBindingIntoForm(invalidBinding)\"\n                        >\n                          <strong>{{ invalidBinding.widgetTitle }}</strong>.<code>{{ invalidBinding.inputPath }}</code> (<code>{{ invalidBinding.expression }}</code>)\n                        </button>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (unboundWidgetStatePlaceholders().length; as unboundCount) {\n                <div class=\"binder-unbound-warning\" role=\"status\" data-testid=\"binder-unbound-placeholders-warning\">\n                  <mat-icon aria-hidden=\"true\">warning_amber</mat-icon>\n                  <div class=\"binder-unbound-warning__body\">\n                    <span>{{ tx('editor.state.unboundPlaceholdersWarning', 'Placeholders sem v\u00EDnculo detectados:') }}</span>\n                    <div class=\"binder-unbound-warning__chips\">\n                      @for (item of unboundWidgetStatePlaceholders(); track item.widgetKey + ':' + item.placeholder) {\n                        <button\n                          type=\"button\"\n                          class=\"binder-unbound-chip\"\n                          [attr.data-testid]=\"'binder-unbound-chip-' + item.widgetKey + '-' + item.placeholder\"\n                          [attr.title]=\"tx('editor.state.selectUnboundPlaceholderHint', 'Clique para preencher widget e caminho no formul\u00E1rio')\"\n                          (click)=\"selectUnboundPlaceholder(item)\"\n                        >\n                          <strong>{{ item.widgetTitle }}</strong> (<code>{{ '${' + item.placeholder + '}' }}</code>)\n                        </button>\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (currentWidgetStateBindings().length) {\n                <ul class=\"blocked-widgets-list binder-active-list\" data-testid=\"active-widget-state-bindings\">\n                  @for (binding of currentWidgetStateBindings(); track binding.widgetKey + ':' + binding.inputPath) {\n                    @let previewVal = resolveStateTokenPreview(binding.token);\n                    <li class=\"binder-active-item\">\n                      <mat-icon aria-hidden=\"true\" class=\"binder-active-icon\">{{ widgetIconForKey(binding.widgetKey) }}</mat-icon>\n                      <button\n                        type=\"button\"\n                        class=\"binder-active-copy binder-active-select-btn\"\n                        [attr.data-testid]=\"'binder-select-' + binding.widgetKey + '-' + binding.inputPath\"\n                        [attr.title]=\"tx('editor.state.editBindingHint', 'Click to load binding into form')\"\n                        (click)=\"loadStateBindingIntoForm(binding)\"\n                      >\n                        <strong>{{ binding.widgetTitle }}</strong>.<code>{{ binding.inputPath }}</code> \u2190 <code>{{ binding.token }}</code>\n                        @if (previewVal !== null) {\n                          <small class=\"binder-preview-badge\" [attr.data-testid]=\"'binder-preview-' + binding.widgetKey + '-' + binding.inputPath\">= {{ previewVal }}</small>\n                        }\n                      </button>\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\">{{ limitsTargetIcon(limitsTargetControl.value) }}</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                  <mat-select-trigger>\n                    <span class=\"binder-widget-trigger\">\n                      <mat-icon aria-hidden=\"true\" class=\"binder-widget-trigger-icon\">{{ limitsTargetIcon(limitsTargetControl.value) }}</mat-icon>\n                      <span class=\"binder-widget-trigger-text\">{{ limitsTargetLabel(limitsTargetControl.value) }}</span>\n                    </span>\n                  </mat-select-trigger>\n                  @for (target of canvasLimits.targets; track target.scope + ':' + target.key; let index = $index) {\n                    <mat-option [value]=\"index\">\n                      <mat-icon aria-hidden=\"true\">{{ limitsTargetIcon(index) }}</mat-icon>\n                      <span>{{ limitsTargetLabel(index) }}</span>\n                    </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))}@container (max-width: 600px){.grid{grid-template-columns:minmax(0,1fr)}.head,.summary{align-items:stretch}.head>button{width:100%}}@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))}.quick-geometry-label{display:inline-flex;align-items:center;gap:6px;min-width:0}.quick-geometry-label mat-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-widget-trigger{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0}.binder-widget-trigger-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-widget-trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.binder-widget-trigger-text small{color:var(--md-sys-color-on-surface-variant, currentColor);font-weight:400}.binder-widget-option-row{position:relative;display:flex;align-items:flex-start;gap:10px;padding-block:4px;min-width:0}.binder-widget-option-icon{font-size:20px;width:20px;height:20px;margin-top:2px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-widget-option-copy{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.3}.binder-widget-option-title{font-weight:600;color:var(--md-sys-color-on-surface, currentColor);overflow-wrap:anywhere}.binder-widget-option-desc{font-size:12px;color:var(--md-sys-color-on-surface-variant, currentColor);overflow-wrap:anywhere}.binder-widget-option-sr-key{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;opacity:0;pointer-events:none}.binder-input-suggestions{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.binder-input-suggestion-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .3));background:var(--md-sys-color-surface, transparent);color:var(--md-sys-color-on-surface, currentColor);font-size:12px;cursor:pointer;transition:border-color .1s,background-color .1s}.binder-input-suggestion-chip:hover{border-color:var(--md-sys-color-primary, currentColor);background:var(--md-sys-color-surface-container-low, rgba(128, 128, 128, .08))}.binder-input-suggestion-chip.active{border-color:var(--md-sys-color-primary, currentColor);background:var(--md-sys-color-primary-container, rgba(128, 128, 128, .16));color:var(--md-sys-color-on-primary-container, currentColor)}.binder-active-list{list-style:none;padding-inline-start:0;gap:6px}.binder-active-item{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:6px;background:var(--md-sys-color-surface, rgba(255, 255, 255, .03))}.binder-active-icon{font-size:18px;width:18px;height:18px;flex-shrink:0;color:var(--md-sys-color-primary, currentColor)}.binder-active-copy{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.binder-active-select-btn{appearance:none;border:none;background:transparent;color:inherit;font:inherit;text-align:start;padding:2px 4px;border-radius:4px;cursor:pointer}.binder-active-select-btn:hover{background:var(--md-sys-color-surface-container-low, rgba(128, 128, 128, .08))}.binder-active-select-btn:focus-visible{outline:2px solid var(--md-sys-color-primary, currentColor);outline-offset:2px}.binder-preview-badge{display:inline-flex;align-items:center;margin-inline-start:6px;padding:1px 6px;border-radius:999px;font-size:11px;font-weight:600;color:var(--md-sys-color-on-secondary-container, #1d192b);background:var(--md-sys-color-secondary-container, rgba(103, 80, 164, .14))}.binder-unbound-warning{display:flex;align-items:flex-start;gap:8px;padding:8px 10px;border-radius:6px;font-size:12px;border:1px solid var(--md-sys-color-tertiary, rgba(180, 110, 0, .35));background:color-mix(in srgb,var(--md-sys-color-tertiary-container, #ffdea6) 45%,transparent);color:var(--md-sys-color-on-surface, inherit)}.binder-unbound-warning__body{display:grid;gap:6px}.binder-unbound-warning__chips{display:flex;flex-wrap:wrap;gap:6px}.binder-unbound-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--md-sys-color-outline-variant, rgba(128, 128, 128, .35));background:var(--md-sys-color-surface, rgba(255, 255, 255, .65));color:inherit;font:inherit;font-size:11px;cursor:pointer}.binder-unbound-chip:hover{border-color:var(--md-sys-color-primary, currentColor)}.binder-unbound-chip:focus-visible{outline:2px solid var(--md-sys-color-primary, currentColor);outline-offset:2px}.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))}.composer-rich-field-option{display:flex;flex-direction:column;gap:2px;padding:2px 0;line-height:1.3;min-width:0}.composer-rich-field-option__header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0}.composer-rich-field-option__label{font-weight:500;color:var(--md-sys-color-on-surface, currentColor);overflow:hidden;text-overflow:ellipsis}.composer-rich-field-option__code{font-family:var(--mat-sys-mono-font, monospace);font-size:11px;padding:1px 6px;border-radius:999px;background:var(--md-sys-color-surface-container-highest, rgba(128, 128, 128, .14));color:var(--md-sys-color-on-surface-variant, currentColor)}.composer-rich-field-option__badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary, #4f46e5) 14%,transparent);color:var(--md-sys-color-primary, currentColor)}.composer-rich-field-option__desc{font-size:11px;color:var(--md-sys-color-on-surface-variant, currentColor);white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\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: MatAutocompleteModule }, { kind: "component", type: i2$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: i4.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.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: i4$1.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: i3$2.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: "directive", type: i3$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i9.MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: 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"] }, { kind: "component", type: ResourceQuickConnectComponent, selector: "praxis-resource-quick-connect", inputs: ["resourcePath", "endpointKey", "apiUrlEntry", "intent", "resources", "label", "placeholder", "hint", "disabled"], outputs: ["resourcePathChange", "resourceSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageConfigEditorComponent, decorators: [{
             type: Component,
@@ -20398,7 +20510,7 @@ class PageConfigEditorComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".page-inset-field{grid-column:1 / -1;min-width:0}.page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:flex-start;gap:12px}.page-head__copy{display:grid;gap:4px}.page-title{font-weight:600;font-size:18px;line-height:1.2}.page-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.spacer{flex:1}.page-summary{display:flex;flex-wrap:wrap;gap:8px}.page-tabs{border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent)}.page-tabs ::ng-deep .mdc-tab{min-width:120px}.page-tabs ::ng-deep .mdc-tab__text-label{font-size:13px;font-weight:600}.page-tab-panel{display:grid;gap:12px;padding:16px 4px 4px}.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 88%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:500}.page-chip mat-icon{width:18px;height:18px;font-size:18px}.page-chip--accent{border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 30%,transparent)}.page-chip--warning{border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 35%,transparent)}.page-identity{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 70%,transparent);font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.page-section-help{margin-top:-4px;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{margin-right:-4px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.page-head{flex-direction:column}.state-group-head{align-items:stretch;flex-direction:column}}\n"], dependencies: [{ kind: "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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i9.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: 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 });
+  `, isInline: true, styles: [".page-inset-field{grid-column:1 / -1;min-width:0}.page-config{display:grid;gap:12px;padding:16px;background:var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface));border:1px solid var(--md-sys-color-outline-variant);border-radius:12px}.page-head{display:flex;align-items:flex-start;gap:12px}.page-head__copy{display:grid;gap:4px}.page-title{font-weight:600;font-size:18px;line-height:1.2}.page-subtitle{max-width:72ch;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.spacer{flex:1}.page-summary{display:flex;flex-wrap:wrap;gap:8px}.page-tabs{border-radius:16px;overflow:hidden;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 78%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent)}.page-tabs ::ng-deep .mdc-tab{min-width:120px}.page-tabs ::ng-deep .mdc-tab__text-label{font-size:13px;font-weight:600}.page-tab-panel{display:grid;gap:12px;padding:16px 4px 4px}.page-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 88%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:500}.page-chip mat-icon{width:18px;height:18px;font-size:18px}.page-chip--accent{border-color:color-mix(in srgb,var(--md-sys-color-primary) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 30%,transparent)}.page-chip--warning{border-color:color-mix(in srgb,var(--md-sys-color-error) 35%,var(--md-sys-color-outline-variant));color:var(--md-sys-color-error);background:color-mix(in srgb,var(--md-sys-color-error-container) 35%,transparent)}.page-identity{display:grid;gap:4px;padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 82%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 70%,transparent);font-size:13px;color:var(--md-sys-color-on-surface-variant)}.page-section{font-weight:600;margin-top:8px}.page-section-help{margin-top:-4px;color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.45}.grid-form{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.state-grid{display:grid;gap:16px}.state-values,.state-group{padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-surface-container-low) 92%,transparent),transparent),var(--md-sys-color-surface-container-lowest, var(--md-sys-color-surface))}.state-group{display:grid;gap:12px}.state-group-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-group-title{font-weight:600}.state-group-help{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-list{display:grid;gap:12px}.state-card{display:grid;gap:12px;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 80%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface-container) 84%,transparent)}.state-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.state-card-title{font-weight:600}.state-card-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.span-2{grid-column:span 2}.span-3{grid-column:1 / -1}.state-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px}.state-operator-hint{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--md-sys-color-on-surface-variant);background:color-mix(in srgb,var(--md-sys-color-secondary-container) 35%,transparent)}.state-operator-hint mat-icon{color:var(--md-sys-color-secondary)}.page-actions{display:flex;justify-content:flex-end}.page-error{color:var(--md-sys-color-error);font-size:13px}.page-config .mat-mdc-form-field{width:100%;--mdc-outlined-text-field-container-height: 48px;--mdc-outlined-text-field-outline-color: var(--md-sys-color-outline-variant);--mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);--mdc-outlined-text-field-focus-outline-color: var(--md-sys-color-primary);--mdc-outlined-text-field-error-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-focus-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-error-hover-outline-color: var(--md-sys-color-error);--mdc-outlined-text-field-label-text-color: var(--md-sys-color-on-surface-variant);--mdc-outlined-text-field-input-text-color: var(--md-sys-color-on-surface);--mdc-outlined-text-field-supporting-text-color: var(--md-sys-color-on-surface-variant)}.help-icon-button{margin-right:-4px}.mat-mdc-form-field-icon-suffix{align-self:center}@media(max-width:720px){.span-2,.span-3{grid-column:auto}.page-head{flex-direction:column}.state-group-head{align-items:stretch;flex-direction:column}}\n"], dependencies: [{ kind: "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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.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: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i9.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i9.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PageConfigEditorComponent, decorators: [{
             type: Component,
@@ -31250,13 +31362,14 @@ class DynamicPageBuilderComponent {
             return metadataHints;
         }
         switch (componentId) {
+            case 'praxis-crud':
+                return { recommendedCols: 12, recommendedRows: 6 };
             case 'praxis-table':
                 return { recommendedCols: 8, recommendedRows: 6 };
             case 'praxis-filter':
                 return { recommendedCols: 12, recommendedRows: 3 };
             case 'praxis-chart':
             case 'praxis-list':
-            case 'praxis-crud':
                 return { recommendedCols: 8, recommendedRows: 5 };
             default:
                 return undefined;
@@ -31772,7 +31885,7 @@ class DynamicPageBuilderComponent {
             emptyText: this.tx('agentic.projectKnowledgeCockpit.timelineEmpty', 'No safe timeline events published for this change-set yet.'),
         });
         const timelineNode = document.nodes.find((node) => node.type === 'timeline');
-        return timelineNode?.type === 'timeline' ? timelineNode.items ?? [] : [];
+        return timelineNode?.type === 'timeline' ? (timelineNode.items ?? []) : [];
     }
     trackProjectKnowledgeTimelineItem(index, item) {
         return item.id || `${index}:${item.title || item.badge || 'timeline'}`;
@@ -34411,7 +34524,7 @@ class DynamicPageBuilderComponent {
         if (!metadataInputs?.length || !widgetKey)
             return;
         const inputNames = new Set(metadataInputs.map((input) => input.name));
-        for (const identityInput of ['componentInstanceId', 'tabsId', 'formId']) {
+        for (const identityInput of ['componentInstanceId', 'tabsId', 'formId', 'crudId']) {
             if (inputNames.has(identityInput)
                 && inputs[identityInput] === undefined
                 && presetInputs?.[identityInput] === undefined) {
@@ -34623,6 +34736,7 @@ class DynamicPageBuilderComponent {
             <div class="builder-governance-persistence" data-testid="dashboard-layout-status" role="status"
               aria-live="polite" aria-atomic="true"
+              [class.busy]="isGovernanceBusy()"
               [class.customized]="isLayoutCustomized()" [class.governed]="!isLayoutCustomized()">
               <span>{{ governancePersistenceLabel() }}</span>
               @if (governancePersistence().status === 'saved' && governanceLastSavedAt(); as saved) {
@@ -35196,7 +35310,7 @@ class DynamicPageBuilderComponent {
         }
       </praxis-floating-toolbar>
     </div>
-    `, isInline: true, styles: [":host{display:block;position:relative;min-height:var(--pdx-page-builder-min-height, 420px)}.builder-shell{display:block;position:relative;min-height:inherit;height:100%;box-sizing:border-box}.builder-shell--bottom-toolbar{padding-block-end:calc(80px + env(safe-area-inset-bottom,0px))}.builder-shell:has(.pdx-shell.fullscreen) praxis-floating-toolbar{display:none}.builder-governance-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;margin-bottom:16px;border-radius:14px;background:var(--surface-gradient, color-mix(in srgb, var(--md-sys-color-surface-container, #1e293b) 95%, transparent));border:1px solid var(--border, color-mix(in srgb, var(--md-sys-color-outline-variant, #334155) 60%, transparent));gap:16px;flex-wrap:wrap}.builder-governance-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.builder-governance-status-indicator{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border-radius:9999px;background:color-mix(in srgb,var(--ready, #22c55e) 12%,transparent);border:1px solid color-mix(in srgb,var(--ready, #22c55e) 28%,transparent)}.builder-governance-dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--ready, #22c55e);box-shadow:0 0 8px var(--ready, #22c55e);animation:builderGovernancePulse 2s infinite cubic-bezier(.4,0,.6,1)}.builder-governance-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ready, #22c55e)}.builder-governance-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--primary, #3b82f6) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary, #3b82f6) 24%,transparent);font-size:11px;font-weight:600;color:var(--primary, #3b82f6)}.builder-governance-badge .material-symbols-outlined{font-size:14px}.builder-governance-persistence{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent;transition:all .2s ease}.builder-governance-persistence.governed{background:color-mix(in srgb,var(--muted, #64748b) 15%,transparent);border-color:color-mix(in srgb,var(--border, #334155) 80%,transparent);color:var(--muted-foreground, #94a3b8)}.builder-governance-persistence.customized{background:color-mix(in srgb,var(--primary, #3b82f6) 14%,transparent);border-color:color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent);color:var(--primary, #3b82f6)}.builder-governance-persistence .builder-governance-saved-time{opacity:.75;font-weight:400}.builder-governance-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.builder-governance-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .15s ease}.builder-governance-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);background:color-mix(in srgb,var(--primary, #3b82f6) 10%,var(--surface, #1e293b))}.builder-governance-btn:disabled{opacity:.5;cursor:not-allowed}.builder-governance-btn--reset{border-color:color-mix(in srgb,var(--warning, #eab308) 40%,transparent);color:var(--warning, #eab308)}.builder-governance-btn--reset:hover:not(:disabled){border-color:var(--warning, #eab308);background:color-mix(in srgb,var(--warning, #eab308) 12%,transparent)}.builder-governance-btn .material-symbols-outlined,.builder-governance-toggle-btn .material-symbols-outlined{font-size:16px}.builder-governance-toggle-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .2s cubic-bezier(.16,1,.3,1)}.builder-governance-toggle-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--primary, #3b82f6) 20%,transparent)}.builder-governance-toggle-btn.active{background:linear-gradient(135deg,var(--primary, #3b82f6),color-mix(in srgb,var(--primary, #3b82f6) 80%,black));border-color:var(--primary, #3b82f6);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent)}.builder-governance-toggle-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes builderGovernancePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.builder-authoring-lineage-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--md-sys-color-error, #b3261e);border-radius:10px;background:var(--md-sys-color-error-container, #f9dedc);color:var(--md-sys-color-on-error-container, #410e0b)}.builder-authoring-lineage-alert strong{display:block}.builder-authoring-lineage-alert p{margin:4px 0 0}.builder-authoring-lineage-alert ul{margin:8px 0 0;padding-inline-start:20px}@media(forced-colors:active){.builder-authoring-lineage-alert{border:2px solid CanvasText;background:Canvas;color:CanvasText}}.agentic-diagnostics-panel{position:absolute;z-index:21;right:16px;width:min(520px,calc(100% - 32px));max-height:min(440px,calc(100% - 32px));overflow:auto;padding:12px;border:1px solid rgba(107,114,128,.28);border-radius:8px;background:#fffffff5;color:#111827;box-shadow:0 14px 36px #0000003d}.agentic-diagnostics-panel--collapsed{width:min(280px,calc(100% - 32px));max-height:58px;overflow:hidden;padding:10px 12px;pointer-events:auto}.agentic-diagnostics-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}.agentic-diagnostics-panel__header-actions{display:flex;align-items:center;gap:8px}.agentic-diagnostics-panel__badge{padding:2px 6px;border:1px solid rgba(107,114,128,.28);border-radius:8px;font-size:11px;font-weight:600;color:#4b5563}.agentic-diagnostics-panel__toggle,.shared-rule-cockpit__toggle{appearance:none;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 84%,transparent);color:var(--md-sys-color-primary);cursor:pointer;font-size:11px;font-weight:700;line-height:1;padding:6px 9px;white-space:nowrap}.agentic-diagnostics-panel__description{margin:8px 0 10px;color:#4b5563;font-size:12px;line-height:1.4}.agentic-diagnostics-panel pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.45;color:#1f2937}.agentic-diagnostics-panel__health{display:grid;gap:8px;margin-bottom:12px}.agentic-diagnostics-panel__health h3,.agentic-diagnostics-panel__health p{margin:0}.agentic-diagnostics-panel__health h3{font-size:13px}.agentic-diagnostics-panel__health p{color:#4b5563;font-size:11px}.agentic-diagnostics-panel__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.agentic-diagnostics-panel__metrics div{padding:8px;border-radius:8px;background:#f3f4f6}.agentic-diagnostics-panel__metrics dt{color:#4b5563;font-size:10px}.agentic-diagnostics-panel__metrics dd{margin:3px 0 0;font-size:14px;font-weight:700}.agentic-diagnostics-panel__health-table{width:100%;border-collapse:collapse;font-size:10px}.agentic-diagnostics-panel__health-table caption{margin-bottom:4px;text-align:left;font-weight:700}.agentic-diagnostics-panel__health-table th,.agentic-diagnostics-panel__health-table td{padding:5px 4px;border-bottom:1px solid #e5e7eb;text-align:left}.agentic-diagnostics-panel__raw summary{margin-bottom:8px;cursor:pointer;font-size:11px;font-weight:700}@media(max-width:520px){.agentic-diagnostics-panel__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}praxis-ai-assistant-shell{position:fixed;inset:0;z-index:140;pointer-events:none}@media(min-width:1100px){.builder-shell--agentic-review-rail{box-sizing:border-box;padding-right:464px}}.builder-shell__agentic-toggle{position:relative}.builder-shell__agentic-toggle--open,.builder-shell__agentic-toggle--minimized{outline:2px solid rgba(96,165,250,.52);outline-offset:2px}.builder-shell__agentic-toggle--minimized:after{content:\"\";position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#34d399}.builder-shell__connections-toggle--open{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary, #6750a4) 52%,transparent);outline-offset:2px}.builder-shell__connections-toggle{position:relative}.builder-shell__connections-toggle--recommended:not(.builder-shell__connections-toggle--open){outline:2px solid rgba(34,211,238,.48);outline-offset:2px}.builder-shell__connections-toggle-badge{position:absolute;top:5px;right:5px;width:9px;height:9px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#22d3ee;box-shadow:0 0 0 3px #22d3ee2e}.shared-rule-cockpit{position:absolute;z-index:120;left:16px;bottom:88px;width:min(720px,calc(100% - 32px));max-height:min(560px,calc(100vh - 140px));padding:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 24%,transparent);border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface-container-high) 76%),color-mix(in srgb,var(--md-sys-color-tertiary-container) 18%,var(--md-sys-color-surface-container) 82%));color:var(--md-sys-color-on-surface);box-shadow:0 18px 46px color-mix(in srgb,var(--md-sys-color-shadow, #000) 24%,transparent);overflow:auto;overscroll-behavior:contain}.shared-rule-cockpit--collapsed{width:min(360px,calc(100% - 32px));max-height:72px;overflow:hidden;padding:10px 12px}.shared-rule-cockpit__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shared-rule-cockpit__header-actions{display:flex;align-items:center;gap:8px}.shared-rule-cockpit__header div{display:grid;gap:2px}.shared-rule-cockpit__header strong{font-size:14px;line-height:1.2}.shared-rule-cockpit__header span{color:var(--md-sys-color-on-surface-variant);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__badge{flex:0 0 auto;max-width:220px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 74%,transparent);color:var(--md-sys-color-primary);font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shared-rule-cockpit__description,.shared-rule-cockpit__status,.shared-rule-cockpit__error{margin:10px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.shared-rule-cockpit__error{color:var(--md-sys-color-error);font-weight:600}.shared-rule-cockpit__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.shared-rule-cockpit__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}.shared-rule-cockpit__facts div{min-width:0;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 72%,transparent)}.shared-rule-cockpit__facts dt{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.shared-rule-cockpit__facts dd{margin:4px 0 0;color:var(--md-sys-color-on-surface);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__enforcement-matrix{display:grid;gap:10px;margin-top:12px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 58%,transparent)}.shared-rule-cockpit__matrix-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.shared-rule-cockpit__matrix-header div{display:grid;gap:2px}.shared-rule-cockpit__matrix-header strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__matrix-header span,.shared-rule-cockpit__matrix-source{color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-badge{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#16a34a1f;color:#166534;font-weight:800;white-space:nowrap}.shared-rule-cockpit__projection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shared-rule-cockpit__projection{display:grid;gap:3px;min-width:0;padding:9px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 52%,transparent);border-radius:11px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent)}.shared-rule-cockpit__projection[data-status=ready]{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 24%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 32%,var(--md-sys-color-surface-container-low) 68%)}.shared-rule-cockpit__projection span{color:var(--md-sys-color-primary);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}.shared-rule-cockpit__projection strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__projection small,.shared-rule-cockpit__projection em{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-style:normal;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-source{margin:0}.shared-rule-cockpit__timeline{display:grid;gap:8px;max-height:190px;margin:12px 0 0;padding:0;overflow:auto;list-style:none}.shared-rule-cockpit__timeline-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 76%,transparent)}.shared-rule-cockpit__timeline-icon{display:grid;width:24px;height:24px;place-items:center;border-radius:999px;background:#1e40af1a;color:var(--md-sys-color-primary);font-family:Material Icons;font-size:16px;line-height:1}.shared-rule-cockpit__timeline-item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.35}.shared-rule-cockpit__timeline-item p,.shared-rule-cockpit__timeline-item small,.shared-rule-cockpit__timeline-item time,.shared-rule-cockpit__timeline-empty{display:block;margin:3px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__timeline-badge{display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-secondary-container) 42%,transparent);color:var(--md-sys-color-on-secondary-container);font-size:10px;font-weight:700}.shared-rule-cockpit__timeline-empty{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 64%,transparent)}@media(max-width:720px){.shared-rule-cockpit{bottom:72px;max-height:calc(100vh - 112px)}.shared-rule-cockpit__facts,.shared-rule-cockpit__projection-grid{grid-template-columns:1fr}}\n"], dependencies: [{ 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.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"] }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton"], outputs: ["pageChange", "persistenceChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }, { kind: "component", type: FloatingToolbarComponent, selector: "praxis-floating-toolbar", inputs: ["visible", "canUndo", "canRedo", "showSave", "showPreview", "showAdd", "showSettings", "editingEnabled", "previewActive", "connectionMode", "modeLabel", "addLabel", "saveLabel", "undoLabel", "redoLabel", "settingsLabel", "previewLabel", "exitPreviewLabel"], outputs: ["add", "undo", "redo", "settings", "preview", "save"] }, { kind: "component", type: ConnectionEditorComponent, selector: "praxis-connection-editor", inputs: ["open", "page"], outputs: ["pageChange", "focusWidget", "openPageSettings", "close"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }] });
+    `, isInline: true, styles: [":host{display:block;position:relative;min-height:var(--pdx-page-builder-min-height, 420px)}.builder-shell{display:block;position:relative;min-height:inherit;height:100%;box-sizing:border-box}.builder-shell--bottom-toolbar{padding-block-end:calc(80px + env(safe-area-inset-bottom,0px))}.builder-shell:has(.pdx-shell.fullscreen) praxis-floating-toolbar{display:none}.builder-governance-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;margin-bottom:16px;border-radius:14px;background:var(--surface-gradient, color-mix(in srgb, var(--md-sys-color-surface-container, #1e293b) 95%, transparent));border:1px solid var(--border, color-mix(in srgb, var(--md-sys-color-outline-variant, #334155) 60%, transparent));gap:16px;flex-wrap:wrap}.builder-governance-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.builder-governance-status-indicator{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border-radius:9999px;background:color-mix(in srgb,var(--ready, #22c55e) 12%,transparent);border:1px solid color-mix(in srgb,var(--ready, #22c55e) 28%,transparent)}.builder-governance-dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--ready, #22c55e);box-shadow:0 0 8px var(--ready, #22c55e);animation:builderGovernancePulse 2s infinite cubic-bezier(.4,0,.6,1)}.builder-governance-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ready, #22c55e)}.builder-governance-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--primary, #3b82f6) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary, #3b82f6) 24%,transparent);font-size:11px;font-weight:600;color:var(--primary, #3b82f6)}.builder-governance-badge .material-symbols-outlined{font-size:14px}.builder-governance-persistence{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent;transition:all .2s ease}.builder-governance-persistence.governed{background:color-mix(in srgb,var(--muted, #64748b) 15%,transparent);border-color:color-mix(in srgb,var(--border, #334155) 80%,transparent);color:var(--muted-foreground, #94a3b8)}.builder-governance-persistence.customized{background:color-mix(in srgb,var(--primary, #3b82f6) 14%,transparent);border-color:color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent);color:var(--primary, #3b82f6)}.builder-governance-persistence .builder-governance-saved-time{opacity:.75;font-weight:400}.builder-governance-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.builder-governance-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .15s ease}.builder-governance-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);background:color-mix(in srgb,var(--primary, #3b82f6) 10%,var(--surface, #1e293b))}.builder-governance-btn:disabled{opacity:.5;cursor:not-allowed}.builder-governance-btn--reset{border-color:color-mix(in srgb,var(--warning, #eab308) 40%,transparent);color:var(--warning, #eab308)}.builder-governance-btn--reset:hover:not(:disabled){border-color:var(--warning, #eab308);background:color-mix(in srgb,var(--warning, #eab308) 12%,transparent)}.builder-governance-btn .material-symbols-outlined,.builder-governance-toggle-btn .material-symbols-outlined{font-size:16px}.builder-governance-toggle-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .2s cubic-bezier(.16,1,.3,1)}.builder-governance-toggle-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--primary, #3b82f6) 20%,transparent)}.builder-governance-toggle-btn.active{background:linear-gradient(135deg,var(--primary, #3b82f6),color-mix(in srgb,var(--primary, #3b82f6) 80%,black));border-color:var(--primary, #3b82f6);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent)}.builder-governance-toggle-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes builderGovernancePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.builder-authoring-lineage-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--md-sys-color-error, #b3261e);border-radius:10px;background:var(--md-sys-color-error-container, #f9dedc);color:var(--md-sys-color-on-error-container, #410e0b)}.builder-authoring-lineage-alert strong{display:block}.builder-authoring-lineage-alert p{margin:4px 0 0}.builder-authoring-lineage-alert ul{margin:8px 0 0;padding-inline-start:20px}@media(forced-colors:active){.builder-authoring-lineage-alert{border:2px solid CanvasText;background:Canvas;color:CanvasText}}.agentic-diagnostics-panel{position:absolute;z-index:21;right:16px;width:min(520px,calc(100% - 32px));max-height:min(440px,calc(100% - 32px));overflow:auto;padding:12px;border:1px solid rgba(107,114,128,.28);border-radius:8px;background:#fffffff5;color:#111827;box-shadow:0 14px 36px #0000003d}.agentic-diagnostics-panel--collapsed{width:min(280px,calc(100% - 32px));max-height:58px;overflow:hidden;padding:10px 12px;pointer-events:auto}.agentic-diagnostics-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}.agentic-diagnostics-panel__header-actions{display:flex;align-items:center;gap:8px}.agentic-diagnostics-panel__badge{padding:2px 6px;border:1px solid rgba(107,114,128,.28);border-radius:8px;font-size:11px;font-weight:600;color:#4b5563}.agentic-diagnostics-panel__toggle,.shared-rule-cockpit__toggle{appearance:none;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 84%,transparent);color:var(--md-sys-color-primary);cursor:pointer;font-size:11px;font-weight:700;line-height:1;padding:6px 9px;white-space:nowrap}.agentic-diagnostics-panel__description{margin:8px 0 10px;color:#4b5563;font-size:12px;line-height:1.4}.agentic-diagnostics-panel pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.45;color:#1f2937}.agentic-diagnostics-panel__health{display:grid;gap:8px;margin-bottom:12px}.agentic-diagnostics-panel__health h3,.agentic-diagnostics-panel__health p{margin:0}.agentic-diagnostics-panel__health h3{font-size:13px}.agentic-diagnostics-panel__health p{color:#4b5563;font-size:11px}.agentic-diagnostics-panel__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.agentic-diagnostics-panel__metrics div{padding:8px;border-radius:8px;background:#f3f4f6}.agentic-diagnostics-panel__metrics dt{color:#4b5563;font-size:10px}.agentic-diagnostics-panel__metrics dd{margin:3px 0 0;font-size:14px;font-weight:700}.agentic-diagnostics-panel__health-table{width:100%;border-collapse:collapse;font-size:10px}.agentic-diagnostics-panel__health-table caption{margin-bottom:4px;text-align:left;font-weight:700}.agentic-diagnostics-panel__health-table th,.agentic-diagnostics-panel__health-table td{padding:5px 4px;border-bottom:1px solid #e5e7eb;text-align:left}.agentic-diagnostics-panel__raw summary{margin-bottom:8px;cursor:pointer;font-size:11px;font-weight:700}@media(max-width:520px){.agentic-diagnostics-panel__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}praxis-ai-assistant-shell{position:fixed;inset:0;z-index:140;pointer-events:none}@media(min-width:1100px){.builder-shell--agentic-review-rail{box-sizing:border-box;padding-right:464px}}.builder-shell__agentic-toggle{position:relative}.builder-shell__agentic-toggle--open,.builder-shell__agentic-toggle--minimized{outline:2px solid rgba(96,165,250,.52);outline-offset:2px}.builder-shell__agentic-toggle--minimized:after{content:\"\";position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#34d399}.builder-shell__connections-toggle--open{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary, #6750a4) 52%,transparent);outline-offset:2px}.builder-shell__connections-toggle{position:relative}.builder-shell__connections-toggle--recommended:not(.builder-shell__connections-toggle--open){outline:2px solid rgba(34,211,238,.48);outline-offset:2px}.builder-shell__connections-toggle-badge{position:absolute;top:5px;right:5px;width:9px;height:9px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#22d3ee;box-shadow:0 0 0 3px #22d3ee2e}.shared-rule-cockpit{position:absolute;z-index:120;left:16px;bottom:88px;width:min(720px,calc(100% - 32px));max-height:min(560px,calc(100vh - 140px));padding:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 24%,transparent);border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface-container-high) 76%),color-mix(in srgb,var(--md-sys-color-tertiary-container) 18%,var(--md-sys-color-surface-container) 82%));color:var(--md-sys-color-on-surface);box-shadow:0 18px 46px color-mix(in srgb,var(--md-sys-color-shadow, #000) 24%,transparent);overflow:auto;overscroll-behavior:contain}.shared-rule-cockpit--collapsed{width:min(360px,calc(100% - 32px));max-height:72px;overflow:hidden;padding:10px 12px}.shared-rule-cockpit__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shared-rule-cockpit__header-actions{display:flex;align-items:center;gap:8px}.shared-rule-cockpit__header div{display:grid;gap:2px}.shared-rule-cockpit__header strong{font-size:14px;line-height:1.2}.shared-rule-cockpit__header span{color:var(--md-sys-color-on-surface-variant);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__badge{flex:0 0 auto;max-width:220px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 74%,transparent);color:var(--md-sys-color-primary);font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shared-rule-cockpit__description,.shared-rule-cockpit__status,.shared-rule-cockpit__error{margin:10px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{font-weight:550;color:var(--pdx-text-shimmer-base, var(--md-sys-color-on-surface-variant))}@supports ((-webkit-background-clip: text) or (background-clip: text)){.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{background-image:var( --pdx-text-shimmer-gradient, linear-gradient( 105deg, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 0%, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 26%, color-mix(in oklab, var(--md-sys-color-tertiary, #6366f1) 74%, #a855f7 26%) 40%, var(--pdx-text-shimmer-peak, var(--md-sys-color-on-surface, #ffffff)) 50%, color-mix(in oklab, var(--md-sys-color-primary, #006a6a) 74%, #ec4899 26%) 60%, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 74%, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 100% ) );background-size:300% 100%;background-position:100% 50%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sharedRuleCockpitTextShimmer var(--pdx-text-shimmer-duration, 2.6s) linear infinite;will-change:background-position}}@media(prefers-reduced-motion:reduce),(forced-colors:active),print{.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{animation:none!important;background-image:none!important;-webkit-text-fill-color:currentColor!important;color:var(--md-sys-color-primary)!important;will-change:auto}}@media(forced-colors:active){.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}@keyframes sharedRuleCockpitTextShimmer{0%{background-position:100% 50%}to{background-position:0% 50%}}.shared-rule-cockpit__error{color:var(--md-sys-color-error);font-weight:600}.shared-rule-cockpit__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.shared-rule-cockpit__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}.shared-rule-cockpit__facts div{min-width:0;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 72%,transparent)}.shared-rule-cockpit__facts dt{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.shared-rule-cockpit__facts dd{margin:4px 0 0;color:var(--md-sys-color-on-surface);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__enforcement-matrix{display:grid;gap:10px;margin-top:12px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 58%,transparent)}.shared-rule-cockpit__matrix-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.shared-rule-cockpit__matrix-header div{display:grid;gap:2px}.shared-rule-cockpit__matrix-header strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__matrix-header span,.shared-rule-cockpit__matrix-source{color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-badge{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#16a34a1f;color:#166534;font-weight:800;white-space:nowrap}.shared-rule-cockpit__projection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shared-rule-cockpit__projection{display:grid;gap:3px;min-width:0;padding:9px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 52%,transparent);border-radius:11px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent)}.shared-rule-cockpit__projection[data-status=ready]{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 24%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 32%,var(--md-sys-color-surface-container-low) 68%)}.shared-rule-cockpit__projection span{color:var(--md-sys-color-primary);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}.shared-rule-cockpit__projection strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__projection small,.shared-rule-cockpit__projection em{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-style:normal;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-source{margin:0}.shared-rule-cockpit__timeline{display:grid;gap:8px;max-height:190px;margin:12px 0 0;padding:0;overflow:auto;list-style:none}.shared-rule-cockpit__timeline-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 76%,transparent)}.shared-rule-cockpit__timeline-icon{display:grid;width:24px;height:24px;place-items:center;border-radius:999px;background:#1e40af1a;color:var(--md-sys-color-primary);font-family:Material Icons;font-size:16px;line-height:1}.shared-rule-cockpit__timeline-item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.35}.shared-rule-cockpit__timeline-item p,.shared-rule-cockpit__timeline-item small,.shared-rule-cockpit__timeline-item time,.shared-rule-cockpit__timeline-empty{display:block;margin:3px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__timeline-badge{display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-secondary-container) 42%,transparent);color:var(--md-sys-color-on-secondary-container);font-size:10px;font-weight:700}.shared-rule-cockpit__timeline-empty{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 64%,transparent)}@media(max-width:720px){.shared-rule-cockpit{bottom:72px;max-height:calc(100vh - 112px)}.shared-rule-cockpit__facts,.shared-rule-cockpit__projection-grid{grid-template-columns:1fr}}\n"], dependencies: [{ 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.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"] }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton", "blockMutations"], outputs: ["pageChange", "persistenceChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }, { kind: "component", type: FloatingToolbarComponent, selector: "praxis-floating-toolbar", inputs: ["visible", "canUndo", "canRedo", "showSave", "showPreview", "showAdd", "showSettings", "editingEnabled", "previewActive", "connectionMode", "modeLabel", "addLabel", "saveLabel", "undoLabel", "redoLabel", "settingsLabel", "previewLabel", "exitPreviewLabel"], outputs: ["add", "undo", "redo", "settings", "preview", "save"] }, { kind: "component", type: ConnectionEditorComponent, selector: "praxis-connection-editor", inputs: ["open", "page"], outputs: ["pageChange", "focusWidget", "openPageSettings", "close"] }, { kind: "component", type: PraxisAiAssistantShellComponent, selector: "praxis-ai-assistant-shell", inputs: ["labels", "mode", "state", "contextItems", "attachments", "messages", "quickReplies", "recommendedIntents", "prompt", "statusText", "errorText", "testIdPrefix", "panelTestId", "submitTestId", "applyTestId", "primaryAction", "secondaryActions", "governanceActions", "busy", "canSubmit", "canApply", "submitOnEnter", "showAttachAction", "enablePastedAttachments", "enableFileAttachments", "attachmentAccept", "attachmentMultiple", "voiceInputMode", "voiceLanguage", "draggable", "resizable", "minWidth", "minHeight", "margin", "layout"], outputs: ["promptChange", "submitPrompt", "apply", "retryTurn", "cancelTurn", "shellAction", "close", "attach", "attachmentsPasted", "attachmentsSelected", "removeAttachment", "messageAction", "editMessage", "resendMessage", "quickReply", "recommendedIntent", "layoutChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicPageBuilderComponent, decorators: [{
             type: Component,
@@ -35233,6 +35347,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             <div class="builder-governance-persistence" data-testid="dashboard-layout-status" role="status"
               aria-live="polite" aria-atomic="true"
+              [class.busy]="isGovernanceBusy()"
               [class.customized]="isLayoutCustomized()" [class.governed]="!isLayoutCustomized()">
               <span>{{ governancePersistenceLabel() }}</span>
               @if (governancePersistence().status === 'saved' && governanceLastSavedAt(); as saved) {
@@ -35806,7 +35921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }
       </praxis-floating-toolbar>
     </div>
-    `, styles: [":host{display:block;position:relative;min-height:var(--pdx-page-builder-min-height, 420px)}.builder-shell{display:block;position:relative;min-height:inherit;height:100%;box-sizing:border-box}.builder-shell--bottom-toolbar{padding-block-end:calc(80px + env(safe-area-inset-bottom,0px))}.builder-shell:has(.pdx-shell.fullscreen) praxis-floating-toolbar{display:none}.builder-governance-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;margin-bottom:16px;border-radius:14px;background:var(--surface-gradient, color-mix(in srgb, var(--md-sys-color-surface-container, #1e293b) 95%, transparent));border:1px solid var(--border, color-mix(in srgb, var(--md-sys-color-outline-variant, #334155) 60%, transparent));gap:16px;flex-wrap:wrap}.builder-governance-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.builder-governance-status-indicator{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border-radius:9999px;background:color-mix(in srgb,var(--ready, #22c55e) 12%,transparent);border:1px solid color-mix(in srgb,var(--ready, #22c55e) 28%,transparent)}.builder-governance-dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--ready, #22c55e);box-shadow:0 0 8px var(--ready, #22c55e);animation:builderGovernancePulse 2s infinite cubic-bezier(.4,0,.6,1)}.builder-governance-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ready, #22c55e)}.builder-governance-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--primary, #3b82f6) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary, #3b82f6) 24%,transparent);font-size:11px;font-weight:600;color:var(--primary, #3b82f6)}.builder-governance-badge .material-symbols-outlined{font-size:14px}.builder-governance-persistence{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent;transition:all .2s ease}.builder-governance-persistence.governed{background:color-mix(in srgb,var(--muted, #64748b) 15%,transparent);border-color:color-mix(in srgb,var(--border, #334155) 80%,transparent);color:var(--muted-foreground, #94a3b8)}.builder-governance-persistence.customized{background:color-mix(in srgb,var(--primary, #3b82f6) 14%,transparent);border-color:color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent);color:var(--primary, #3b82f6)}.builder-governance-persistence .builder-governance-saved-time{opacity:.75;font-weight:400}.builder-governance-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.builder-governance-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .15s ease}.builder-governance-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);background:color-mix(in srgb,var(--primary, #3b82f6) 10%,var(--surface, #1e293b))}.builder-governance-btn:disabled{opacity:.5;cursor:not-allowed}.builder-governance-btn--reset{border-color:color-mix(in srgb,var(--warning, #eab308) 40%,transparent);color:var(--warning, #eab308)}.builder-governance-btn--reset:hover:not(:disabled){border-color:var(--warning, #eab308);background:color-mix(in srgb,var(--warning, #eab308) 12%,transparent)}.builder-governance-btn .material-symbols-outlined,.builder-governance-toggle-btn .material-symbols-outlined{font-size:16px}.builder-governance-toggle-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .2s cubic-bezier(.16,1,.3,1)}.builder-governance-toggle-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--primary, #3b82f6) 20%,transparent)}.builder-governance-toggle-btn.active{background:linear-gradient(135deg,var(--primary, #3b82f6),color-mix(in srgb,var(--primary, #3b82f6) 80%,black));border-color:var(--primary, #3b82f6);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent)}.builder-governance-toggle-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes builderGovernancePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.builder-authoring-lineage-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--md-sys-color-error, #b3261e);border-radius:10px;background:var(--md-sys-color-error-container, #f9dedc);color:var(--md-sys-color-on-error-container, #410e0b)}.builder-authoring-lineage-alert strong{display:block}.builder-authoring-lineage-alert p{margin:4px 0 0}.builder-authoring-lineage-alert ul{margin:8px 0 0;padding-inline-start:20px}@media(forced-colors:active){.builder-authoring-lineage-alert{border:2px solid CanvasText;background:Canvas;color:CanvasText}}.agentic-diagnostics-panel{position:absolute;z-index:21;right:16px;width:min(520px,calc(100% - 32px));max-height:min(440px,calc(100% - 32px));overflow:auto;padding:12px;border:1px solid rgba(107,114,128,.28);border-radius:8px;background:#fffffff5;color:#111827;box-shadow:0 14px 36px #0000003d}.agentic-diagnostics-panel--collapsed{width:min(280px,calc(100% - 32px));max-height:58px;overflow:hidden;padding:10px 12px;pointer-events:auto}.agentic-diagnostics-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}.agentic-diagnostics-panel__header-actions{display:flex;align-items:center;gap:8px}.agentic-diagnostics-panel__badge{padding:2px 6px;border:1px solid rgba(107,114,128,.28);border-radius:8px;font-size:11px;font-weight:600;color:#4b5563}.agentic-diagnostics-panel__toggle,.shared-rule-cockpit__toggle{appearance:none;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 84%,transparent);color:var(--md-sys-color-primary);cursor:pointer;font-size:11px;font-weight:700;line-height:1;padding:6px 9px;white-space:nowrap}.agentic-diagnostics-panel__description{margin:8px 0 10px;color:#4b5563;font-size:12px;line-height:1.4}.agentic-diagnostics-panel pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.45;color:#1f2937}.agentic-diagnostics-panel__health{display:grid;gap:8px;margin-bottom:12px}.agentic-diagnostics-panel__health h3,.agentic-diagnostics-panel__health p{margin:0}.agentic-diagnostics-panel__health h3{font-size:13px}.agentic-diagnostics-panel__health p{color:#4b5563;font-size:11px}.agentic-diagnostics-panel__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.agentic-diagnostics-panel__metrics div{padding:8px;border-radius:8px;background:#f3f4f6}.agentic-diagnostics-panel__metrics dt{color:#4b5563;font-size:10px}.agentic-diagnostics-panel__metrics dd{margin:3px 0 0;font-size:14px;font-weight:700}.agentic-diagnostics-panel__health-table{width:100%;border-collapse:collapse;font-size:10px}.agentic-diagnostics-panel__health-table caption{margin-bottom:4px;text-align:left;font-weight:700}.agentic-diagnostics-panel__health-table th,.agentic-diagnostics-panel__health-table td{padding:5px 4px;border-bottom:1px solid #e5e7eb;text-align:left}.agentic-diagnostics-panel__raw summary{margin-bottom:8px;cursor:pointer;font-size:11px;font-weight:700}@media(max-width:520px){.agentic-diagnostics-panel__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}praxis-ai-assistant-shell{position:fixed;inset:0;z-index:140;pointer-events:none}@media(min-width:1100px){.builder-shell--agentic-review-rail{box-sizing:border-box;padding-right:464px}}.builder-shell__agentic-toggle{position:relative}.builder-shell__agentic-toggle--open,.builder-shell__agentic-toggle--minimized{outline:2px solid rgba(96,165,250,.52);outline-offset:2px}.builder-shell__agentic-toggle--minimized:after{content:\"\";position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#34d399}.builder-shell__connections-toggle--open{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary, #6750a4) 52%,transparent);outline-offset:2px}.builder-shell__connections-toggle{position:relative}.builder-shell__connections-toggle--recommended:not(.builder-shell__connections-toggle--open){outline:2px solid rgba(34,211,238,.48);outline-offset:2px}.builder-shell__connections-toggle-badge{position:absolute;top:5px;right:5px;width:9px;height:9px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#22d3ee;box-shadow:0 0 0 3px #22d3ee2e}.shared-rule-cockpit{position:absolute;z-index:120;left:16px;bottom:88px;width:min(720px,calc(100% - 32px));max-height:min(560px,calc(100vh - 140px));padding:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 24%,transparent);border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface-container-high) 76%),color-mix(in srgb,var(--md-sys-color-tertiary-container) 18%,var(--md-sys-color-surface-container) 82%));color:var(--md-sys-color-on-surface);box-shadow:0 18px 46px color-mix(in srgb,var(--md-sys-color-shadow, #000) 24%,transparent);overflow:auto;overscroll-behavior:contain}.shared-rule-cockpit--collapsed{width:min(360px,calc(100% - 32px));max-height:72px;overflow:hidden;padding:10px 12px}.shared-rule-cockpit__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shared-rule-cockpit__header-actions{display:flex;align-items:center;gap:8px}.shared-rule-cockpit__header div{display:grid;gap:2px}.shared-rule-cockpit__header strong{font-size:14px;line-height:1.2}.shared-rule-cockpit__header span{color:var(--md-sys-color-on-surface-variant);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__badge{flex:0 0 auto;max-width:220px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 74%,transparent);color:var(--md-sys-color-primary);font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shared-rule-cockpit__description,.shared-rule-cockpit__status,.shared-rule-cockpit__error{margin:10px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.shared-rule-cockpit__error{color:var(--md-sys-color-error);font-weight:600}.shared-rule-cockpit__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.shared-rule-cockpit__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}.shared-rule-cockpit__facts div{min-width:0;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 72%,transparent)}.shared-rule-cockpit__facts dt{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.shared-rule-cockpit__facts dd{margin:4px 0 0;color:var(--md-sys-color-on-surface);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__enforcement-matrix{display:grid;gap:10px;margin-top:12px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 58%,transparent)}.shared-rule-cockpit__matrix-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.shared-rule-cockpit__matrix-header div{display:grid;gap:2px}.shared-rule-cockpit__matrix-header strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__matrix-header span,.shared-rule-cockpit__matrix-source{color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-badge{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#16a34a1f;color:#166534;font-weight:800;white-space:nowrap}.shared-rule-cockpit__projection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shared-rule-cockpit__projection{display:grid;gap:3px;min-width:0;padding:9px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 52%,transparent);border-radius:11px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent)}.shared-rule-cockpit__projection[data-status=ready]{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 24%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 32%,var(--md-sys-color-surface-container-low) 68%)}.shared-rule-cockpit__projection span{color:var(--md-sys-color-primary);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}.shared-rule-cockpit__projection strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__projection small,.shared-rule-cockpit__projection em{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-style:normal;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-source{margin:0}.shared-rule-cockpit__timeline{display:grid;gap:8px;max-height:190px;margin:12px 0 0;padding:0;overflow:auto;list-style:none}.shared-rule-cockpit__timeline-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 76%,transparent)}.shared-rule-cockpit__timeline-icon{display:grid;width:24px;height:24px;place-items:center;border-radius:999px;background:#1e40af1a;color:var(--md-sys-color-primary);font-family:Material Icons;font-size:16px;line-height:1}.shared-rule-cockpit__timeline-item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.35}.shared-rule-cockpit__timeline-item p,.shared-rule-cockpit__timeline-item small,.shared-rule-cockpit__timeline-item time,.shared-rule-cockpit__timeline-empty{display:block;margin:3px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__timeline-badge{display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-secondary-container) 42%,transparent);color:var(--md-sys-color-on-secondary-container);font-size:10px;font-weight:700}.shared-rule-cockpit__timeline-empty{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 64%,transparent)}@media(max-width:720px){.shared-rule-cockpit{bottom:72px;max-height:calc(100vh - 112px)}.shared-rule-cockpit__facts,.shared-rule-cockpit__projection-grid{grid-template-columns:1fr}}\n"] }]
+    `, styles: [":host{display:block;position:relative;min-height:var(--pdx-page-builder-min-height, 420px)}.builder-shell{display:block;position:relative;min-height:inherit;height:100%;box-sizing:border-box}.builder-shell--bottom-toolbar{padding-block-end:calc(80px + env(safe-area-inset-bottom,0px))}.builder-shell:has(.pdx-shell.fullscreen) praxis-floating-toolbar{display:none}.builder-governance-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;margin-bottom:16px;border-radius:14px;background:var(--surface-gradient, color-mix(in srgb, var(--md-sys-color-surface-container, #1e293b) 95%, transparent));border:1px solid var(--border, color-mix(in srgb, var(--md-sys-color-outline-variant, #334155) 60%, transparent));gap:16px;flex-wrap:wrap}.builder-governance-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.builder-governance-status-indicator{display:inline-flex;align-items:center;gap:8px;padding:3px 10px;border-radius:9999px;background:color-mix(in srgb,var(--ready, #22c55e) 12%,transparent);border:1px solid color-mix(in srgb,var(--ready, #22c55e) 28%,transparent)}.builder-governance-dot-pulse{width:7px;height:7px;border-radius:50%;background:var(--ready, #22c55e);box-shadow:0 0 8px var(--ready, #22c55e);animation:builderGovernancePulse 2s infinite cubic-bezier(.4,0,.6,1)}.builder-governance-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ready, #22c55e)}.builder-governance-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--primary, #3b82f6) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary, #3b82f6) 24%,transparent);font-size:11px;font-weight:600;color:var(--primary, #3b82f6)}.builder-governance-badge .material-symbols-outlined{font-size:14px}.builder-governance-persistence{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid transparent;transition:all .2s ease}.builder-governance-persistence.governed{background:color-mix(in srgb,var(--muted, #64748b) 15%,transparent);border-color:color-mix(in srgb,var(--border, #334155) 80%,transparent);color:var(--muted-foreground, #94a3b8)}.builder-governance-persistence.customized{background:color-mix(in srgb,var(--primary, #3b82f6) 14%,transparent);border-color:color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent);color:var(--primary, #3b82f6)}.builder-governance-persistence .builder-governance-saved-time{opacity:.75;font-weight:400}.builder-governance-actions{display:flex;align-items:center;gap:10px;margin-left:auto}.builder-governance-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .15s ease}.builder-governance-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);background:color-mix(in srgb,var(--primary, #3b82f6) 10%,var(--surface, #1e293b))}.builder-governance-btn:disabled{opacity:.5;cursor:not-allowed}.builder-governance-btn--reset{border-color:color-mix(in srgb,var(--warning, #eab308) 40%,transparent);color:var(--warning, #eab308)}.builder-governance-btn--reset:hover:not(:disabled){border-color:var(--warning, #eab308);background:color-mix(in srgb,var(--warning, #eab308) 12%,transparent)}.builder-governance-btn .material-symbols-outlined,.builder-governance-toggle-btn .material-symbols-outlined{font-size:16px}.builder-governance-toggle-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border, #334155);background:var(--surface, #1e293b);color:var(--foreground, #f8fafc);transition:all .2s cubic-bezier(.16,1,.3,1)}.builder-governance-toggle-btn:hover:not(:disabled){border-color:var(--primary, #3b82f6);transform:translateY(-1px);box-shadow:0 4px 12px color-mix(in srgb,var(--primary, #3b82f6) 20%,transparent)}.builder-governance-toggle-btn.active{background:linear-gradient(135deg,var(--primary, #3b82f6),color-mix(in srgb,var(--primary, #3b82f6) 80%,black));border-color:var(--primary, #3b82f6);color:#fff;box-shadow:0 0 16px color-mix(in srgb,var(--primary, #3b82f6) 35%,transparent)}.builder-governance-toggle-btn:disabled{opacity:.5;cursor:not-allowed}@keyframes builderGovernancePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}.builder-authoring-lineage-alert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--md-sys-color-error, #b3261e);border-radius:10px;background:var(--md-sys-color-error-container, #f9dedc);color:var(--md-sys-color-on-error-container, #410e0b)}.builder-authoring-lineage-alert strong{display:block}.builder-authoring-lineage-alert p{margin:4px 0 0}.builder-authoring-lineage-alert ul{margin:8px 0 0;padding-inline-start:20px}@media(forced-colors:active){.builder-authoring-lineage-alert{border:2px solid CanvasText;background:Canvas;color:CanvasText}}.agentic-diagnostics-panel{position:absolute;z-index:21;right:16px;width:min(520px,calc(100% - 32px));max-height:min(440px,calc(100% - 32px));overflow:auto;padding:12px;border:1px solid rgba(107,114,128,.28);border-radius:8px;background:#fffffff5;color:#111827;box-shadow:0 14px 36px #0000003d}.agentic-diagnostics-panel--collapsed{width:min(280px,calc(100% - 32px));max-height:58px;overflow:hidden;padding:10px 12px;pointer-events:auto}.agentic-diagnostics-panel__header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;font-weight:700}.agentic-diagnostics-panel__header-actions{display:flex;align-items:center;gap:8px}.agentic-diagnostics-panel__badge{padding:2px 6px;border:1px solid rgba(107,114,128,.28);border-radius:8px;font-size:11px;font-weight:600;color:#4b5563}.agentic-diagnostics-panel__toggle,.shared-rule-cockpit__toggle{appearance:none;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 18%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 84%,transparent);color:var(--md-sys-color-primary);cursor:pointer;font-size:11px;font-weight:700;line-height:1;padding:6px 9px;white-space:nowrap}.agentic-diagnostics-panel__description{margin:8px 0 10px;color:#4b5563;font-size:12px;line-height:1.4}.agentic-diagnostics-panel pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px;line-height:1.45;color:#1f2937}.agentic-diagnostics-panel__health{display:grid;gap:8px;margin-bottom:12px}.agentic-diagnostics-panel__health h3,.agentic-diagnostics-panel__health p{margin:0}.agentic-diagnostics-panel__health h3{font-size:13px}.agentic-diagnostics-panel__health p{color:#4b5563;font-size:11px}.agentic-diagnostics-panel__metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0}.agentic-diagnostics-panel__metrics div{padding:8px;border-radius:8px;background:#f3f4f6}.agentic-diagnostics-panel__metrics dt{color:#4b5563;font-size:10px}.agentic-diagnostics-panel__metrics dd{margin:3px 0 0;font-size:14px;font-weight:700}.agentic-diagnostics-panel__health-table{width:100%;border-collapse:collapse;font-size:10px}.agentic-diagnostics-panel__health-table caption{margin-bottom:4px;text-align:left;font-weight:700}.agentic-diagnostics-panel__health-table th,.agentic-diagnostics-panel__health-table td{padding:5px 4px;border-bottom:1px solid #e5e7eb;text-align:left}.agentic-diagnostics-panel__raw summary{margin-bottom:8px;cursor:pointer;font-size:11px;font-weight:700}@media(max-width:520px){.agentic-diagnostics-panel__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}praxis-ai-assistant-shell{position:fixed;inset:0;z-index:140;pointer-events:none}@media(min-width:1100px){.builder-shell--agentic-review-rail{box-sizing:border-box;padding-right:464px}}.builder-shell__agentic-toggle{position:relative}.builder-shell__agentic-toggle--open,.builder-shell__agentic-toggle--minimized{outline:2px solid rgba(96,165,250,.52);outline-offset:2px}.builder-shell__agentic-toggle--minimized:after{content:\"\";position:absolute;top:6px;right:6px;width:8px;height:8px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#34d399}.builder-shell__connections-toggle--open{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary, #6750a4) 52%,transparent);outline-offset:2px}.builder-shell__connections-toggle{position:relative}.builder-shell__connections-toggle--recommended:not(.builder-shell__connections-toggle--open){outline:2px solid rgba(34,211,238,.48);outline-offset:2px}.builder-shell__connections-toggle-badge{position:absolute;top:5px;right:5px;width:9px;height:9px;border:2px solid var(--md-sys-color-surface, #111827);border-radius:999px;background:#22d3ee;box-shadow:0 0 0 3px #22d3ee2e}.shared-rule-cockpit{position:absolute;z-index:120;left:16px;bottom:88px;width:min(720px,calc(100% - 32px));max-height:min(560px,calc(100vh - 140px));padding:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 24%,transparent);border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary-container) 24%,var(--md-sys-color-surface-container-high) 76%),color-mix(in srgb,var(--md-sys-color-tertiary-container) 18%,var(--md-sys-color-surface-container) 82%));color:var(--md-sys-color-on-surface);box-shadow:0 18px 46px color-mix(in srgb,var(--md-sys-color-shadow, #000) 24%,transparent);overflow:auto;overscroll-behavior:contain}.shared-rule-cockpit--collapsed{width:min(360px,calc(100% - 32px));max-height:72px;overflow:hidden;padding:10px 12px}.shared-rule-cockpit__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shared-rule-cockpit__header-actions{display:flex;align-items:center;gap:8px}.shared-rule-cockpit__header div{display:grid;gap:2px}.shared-rule-cockpit__header strong{font-size:14px;line-height:1.2}.shared-rule-cockpit__header span{color:var(--md-sys-color-on-surface-variant);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__badge{flex:0 0 auto;max-width:220px;padding:3px 8px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent);border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 74%,transparent);color:var(--md-sys-color-primary);font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shared-rule-cockpit__description,.shared-rule-cockpit__status,.shared-rule-cockpit__error{margin:10px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{font-weight:550;color:var(--pdx-text-shimmer-base, var(--md-sys-color-on-surface-variant))}@supports ((-webkit-background-clip: text) or (background-clip: text)){.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{background-image:var( --pdx-text-shimmer-gradient, linear-gradient( 105deg, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 0%, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 26%, color-mix(in oklab, var(--md-sys-color-tertiary, #6366f1) 74%, #a855f7 26%) 40%, var(--pdx-text-shimmer-peak, var(--md-sys-color-on-surface, #ffffff)) 50%, color-mix(in oklab, var(--md-sys-color-primary, #006a6a) 74%, #ec4899 26%) 60%, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 74%, color-mix(in oklab, var(--md-sys-color-on-surface-variant, #64748b) 82%, var(--md-sys-color-on-surface, #0f172a) 18%) 100% ) );background-size:300% 100%;background-position:100% 50%;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sharedRuleCockpitTextShimmer var(--pdx-text-shimmer-duration, 2.6s) linear infinite;will-change:background-position}}@media(prefers-reduced-motion:reduce),(forced-colors:active),print{.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{animation:none!important;background-image:none!important;-webkit-text-fill-color:currentColor!important;color:var(--md-sys-color-primary)!important;will-change:auto}}@media(forced-colors:active){.shared-rule-cockpit__status,.builder-governance-persistence.busy>span:first-child{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}@keyframes sharedRuleCockpitTextShimmer{0%{background-position:100% 50%}to{background-position:0% 50%}}.shared-rule-cockpit__error{color:var(--md-sys-color-error);font-weight:600}.shared-rule-cockpit__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.shared-rule-cockpit__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}.shared-rule-cockpit__facts div{min-width:0;padding:8px;border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 72%,transparent)}.shared-rule-cockpit__facts dt{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.shared-rule-cockpit__facts dd{margin:4px 0 0;color:var(--md-sys-color-on-surface);font-size:12px;overflow-wrap:anywhere}.shared-rule-cockpit__enforcement-matrix{display:grid;gap:10px;margin-top:12px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 58%,transparent)}.shared-rule-cockpit__matrix-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.shared-rule-cockpit__matrix-header div{display:grid;gap:2px}.shared-rule-cockpit__matrix-header strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__matrix-header span,.shared-rule-cockpit__matrix-source{color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-badge{flex:0 0 auto;padding:3px 8px;border-radius:999px;background:#16a34a1f;color:#166534;font-weight:800;white-space:nowrap}.shared-rule-cockpit__projection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shared-rule-cockpit__projection{display:grid;gap:3px;min-width:0;padding:9px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 52%,transparent);border-radius:11px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 82%,transparent)}.shared-rule-cockpit__projection[data-status=ready]{border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 24%,transparent);background:color-mix(in srgb,var(--md-sys-color-tertiary-container) 32%,var(--md-sys-color-surface-container-low) 68%)}.shared-rule-cockpit__projection span{color:var(--md-sys-color-primary);font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}.shared-rule-cockpit__projection strong{color:var(--md-sys-color-on-surface);font-size:12px}.shared-rule-cockpit__projection small,.shared-rule-cockpit__projection em{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-style:normal;overflow-wrap:anywhere}.shared-rule-cockpit__matrix-source{margin:0}.shared-rule-cockpit__timeline{display:grid;gap:8px;max-height:190px;margin:12px 0 0;padding:0;overflow:auto;list-style:none}.shared-rule-cockpit__timeline-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent);border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 76%,transparent)}.shared-rule-cockpit__timeline-icon{display:grid;width:24px;height:24px;place-items:center;border-radius:999px;background:#1e40af1a;color:var(--md-sys-color-primary);font-family:Material Icons;font-size:16px;line-height:1}.shared-rule-cockpit__timeline-item strong{color:var(--md-sys-color-on-surface);font-size:12px;line-height:1.35}.shared-rule-cockpit__timeline-item p,.shared-rule-cockpit__timeline-item small,.shared-rule-cockpit__timeline-item time,.shared-rule-cockpit__timeline-empty{display:block;margin:3px 0 0;color:var(--md-sys-color-on-surface-variant);font-size:11px;line-height:1.35;overflow-wrap:anywhere}.shared-rule-cockpit__timeline-badge{display:inline-flex;margin-left:6px;padding:2px 6px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-secondary-container) 42%,transparent);color:var(--md-sys-color-on-secondary-container);font-size:10px;font-weight:700}.shared-rule-cockpit__timeline-empty{padding:10px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 64%,transparent)}@media(max-width:720px){.shared-rule-cockpit{bottom:72px;max-height:calc(100vh - 112px)}.shared-rule-cockpit__facts,.shared-rule-cockpit__projection-grid{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialog }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -36004,6 +36119,2009 @@ function providePraxisPageBuilderWidgets(widgets) {
     return providers;
 }
+/** Reusable save-as journey. Feed save() only from the builder's pageSaveRequested event. */
+class PraxisPageSaveAsComponent {
+    adapter = input.required(...(ngDevMode ? [{ debugName: "adapter" }] : /* istanbul ignore next */ []));
+    /** Monotonic host view/session identity; UI invalidation only, never an authorization grant. */
+    contextKey = input.required(...(ngDevMode ? [{ debugName: "contextKey" }] : /* istanbul ignore next */ []));
+    canSave = input(false, ...(ngDevMode ? [{ debugName: "canSave" }] : /* istanbul ignore next */ []));
+    initialTitle = input('', ...(ngDevMode ? [{ debugName: "initialTitle" }] : /* istanbul ignore next */ []));
+    initialMenuLabel = input('', ...(ngDevMode ? [{ debugName: "initialMenuLabel" }] : /* istanbul ignore next */ []));
+    initialIcon = input('web', ...(ngDevMode ? [{ debugName: "initialIcon" }] : /* istanbul ignore next */ []));
+    titleMaxLength = input(160, ...(ngDevMode ? [{ debugName: "titleMaxLength" }] : /* istanbul ignore next */ []));
+    menuMaxLength = input(160, ...(ngDevMode ? [{ debugName: "menuMaxLength" }] : /* istanbul ignore next */ []));
+    saveRequested = output();
+    saved = output();
+    saveFailed = output();
+    busy = signal(false, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+    choosingIcon = signal(false, ...(ngDevMode ? [{ debugName: "choosingIcon" }] : /* istanbul ignore next */ []));
+    result = signal(null, ...(ngDevMode ? [{ debugName: "result" }] : /* istanbul ignore next */ []));
+    error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    iconError = signal(false, ...(ngDevMode ? [{ debugName: "iconError" }] : /* istanbul ignore next */ []));
+    title = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.pattern(/\S/), Validators.maxLength(160)] });
+    menu = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.pattern(/\S/), Validators.maxLength(160)] });
+    icon = signal('web', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    i18n = inject(PraxisI18nService);
+    picker = inject(IconPickerService);
+    generation = 0;
+    attempt;
+    destroyed = false;
+    constructor() {
+        effect(() => {
+            this.contextKey();
+            this.adapter();
+            const title = this.initialTitle(), menu = this.initialMenuLabel(), icon = this.initialIcon();
+            ++this.generation;
+            this.attempt = undefined;
+            this.busy.set(false);
+            this.choosingIcon.set(false);
+            this.result.set(null);
+            this.error.set(false);
+            this.iconError.set(false);
+            this.title.setValidators([Validators.required, Validators.pattern(/\S/), Validators.maxLength(this.limit(this.titleMaxLength()))]);
+            this.menu.setValidators([Validators.required, Validators.pattern(/\S/), Validators.maxLength(this.limit(this.menuMaxLength()))]);
+            this.title.setValue(title);
+            this.menu.setValue(menu);
+            this.icon.set(icon);
+        });
+        inject(DestroyRef).onDestroy(() => { this.destroyed = true; ++this.generation; });
+    }
+    text(key) { return resolvePraxisPageBuilderText(this.i18n, `saveAs.${key}`, key); }
+    destination() { return { label: this.menu.value.trim(), icon: this.icon() }; }
+    clearResult() { this.result.set(null); }
+    requestSave() {
+        this.title.markAsTouched();
+        this.menu.markAsTouched();
+        if (this.available())
+            this.saveRequested.emit();
+    }
+    async chooseIcon() {
+        if (this.busy() || this.choosingIcon())
+            return;
+        const generation = this.generation;
+        const context = this.contextKey(), adapter = this.adapter();
+        this.choosingIcon.set(true);
+        try {
+            const selected = await this.picker.openDialog({ value: this.icon() });
+            if (!this.current(generation, context, adapter) || selected === undefined)
+                return;
+            // The menu profile accepts Material names, not URLs or family-prefixed tokens.
+            if (!this.validIcon(selected)) {
+                this.iconError.set(true);
+                return;
+            }
+            this.iconError.set(false);
+            this.icon.set(selected);
+        }
+        catch {
+            if (this.current(generation, context, adapter))
+                this.iconError.set(true);
+        }
+        finally {
+            if (this.current(generation, context, adapter))
+                this.choosingIcon.set(false);
+        }
+    }
+    async save(definition) {
+        if (!this.available())
+            return;
+        const adapter = this.adapter(), context = this.contextKey(), generation = this.generation;
+        this.busy.set(true);
+        this.error.set(false);
+        try {
+            const details = { definition: structuredClone(definition), presentation: { title: this.title.value.trim(), icon: this.icon() }, menuLabel: this.menu.value.trim() };
+            const signature = JSON.stringify(details);
+            if (this.attempt?.signature !== signature) {
+                this.attempt = { signature, request: { creationKey: crypto.randomUUID(), ...details } };
+            }
+            // An adapter cannot mutate the retained retry snapshot or the source document.
+            const receipt = await adapter.save(structuredClone(this.attempt.request));
+            if (!this.current(generation, context, adapter))
+                return;
+            if (!receipt || typeof receipt.pageId !== 'string' || !receipt.pageId.trim() || !this.localRoute(receipt.routePath))
+                throw new Error('Invalid save-as receipt');
+            const result = { pageId: receipt.pageId, routePath: receipt.routePath };
+            this.result.set(result);
+            this.saved.emit(result);
+        }
+        catch (error) {
+            if (this.current(generation, context, adapter)) {
+                this.error.set(true);
+                this.saveFailed.emit(error);
+            }
+        }
+        finally {
+            if (this.current(generation, context, adapter))
+                this.busy.set(false);
+        }
+    }
+    available() {
+        return !this.destroyed && !this.busy() && !this.choosingIcon() && !!this.contextKey().trim() && this.canSave()
+            && this.title.valid && this.menu.valid && !!this.title.value.trim() && !!this.menu.value.trim() && this.validIcon(this.icon());
+    }
+    current(generation, context, adapter) {
+        return !this.destroyed && generation === this.generation && context === this.contextKey() && adapter === this.adapter();
+    }
+    limit(value) { return Number.isInteger(value) && value > 0 && value <= 160 ? value : 0; }
+    validIcon(value) { return /^[a-z][a-z0-9_]{0,63}$/.test(value); }
+    localRoute(value) {
+        if (typeof value !== 'string' || !value.startsWith('/') || value.startsWith('//') || /[\\\s\u0000-\u001f\u007f]/.test(value))
+            return false;
+        try {
+            return new URL(value, 'https://praxis.invalid').origin === 'https://praxis.invalid' && !/%(?:2f|5c|0[0-9a-f]|1[0-9a-f]|7f)/i.test(value);
+        }
+        catch {
+            return false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisPageSaveAsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisPageSaveAsComponent, isStandalone: true, selector: "praxis-page-save-as", inputs: { adapter: { classPropertyName: "adapter", publicName: "adapter", isSignal: true, isRequired: true, transformFunction: null }, contextKey: { classPropertyName: "contextKey", publicName: "contextKey", isSignal: true, isRequired: true, transformFunction: null }, canSave: { classPropertyName: "canSave", publicName: "canSave", isSignal: true, isRequired: false, transformFunction: null }, initialTitle: { classPropertyName: "initialTitle", publicName: "initialTitle", isSignal: true, isRequired: false, transformFunction: null }, initialMenuLabel: { classPropertyName: "initialMenuLabel", publicName: "initialMenuLabel", isSignal: true, isRequired: false, transformFunction: null }, initialIcon: { classPropertyName: "initialIcon", publicName: "initialIcon", isSignal: true, isRequired: false, transformFunction: null }, titleMaxLength: { classPropertyName: "titleMaxLength", publicName: "titleMaxLength", isSignal: true, isRequired: false, transformFunction: null }, menuMaxLength: { classPropertyName: "menuMaxLength", publicName: "menuMaxLength", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saveRequested: "saveRequested", saved: "saved", saveFailed: "saveFailed" }, providers: [providePraxisPageBuilderI18n()], ngImport: i0, template: "<div class=\"save-as\" [attr.aria-busy]=\"busy() || choosingIcon()\">\n  <mat-form-field appearance=\"outline\"><mat-label>{{ text('title') }}</mat-label>\n    <input matInput data-testid=\"page-save-as-title\" [formControl]=\"title\" [maxlength]=\"titleMaxLength()\" />\n    <mat-error>{{ text('invalidName') }}</mat-error>\n  </mat-form-field>\n  <mat-form-field appearance=\"outline\"><mat-label>{{ text('menu') }}</mat-label>\n    <input matInput data-testid=\"page-save-as-menu\" [formControl]=\"menu\" [maxlength]=\"menuMaxLength()\" />\n    <mat-hint>{{ text('menuHint') }}</mat-hint>\n    <mat-error>{{ text('invalidName') }}</mat-error>\n  </mat-form-field>\n  <button mat-stroked-button type=\"button\" data-testid=\"page-save-as-icon\" [attr.data-icon]=\"icon()\" [disabled]=\"busy() || choosingIcon()\" (click)=\"chooseIcon()\"><mat-icon aria-hidden=\"true\">{{ icon() }}</mat-icon>{{ text('icon') }}</button>\n  <button mat-flat-button type=\"button\" data-testid=\"page-save-as-submit\" [disabled]=\"busy() || choosingIcon() || !canSave() || title.invalid || menu.invalid\" (click)=\"requestSave()\">{{ text(busy() ? 'saving' : 'save') }}</button>\n</div>\n@if (iconError()) { <p role=\"alert\">{{ text('invalidIcon') }}</p> }\n@if (error()) { <p role=\"alert\">{{ text('failed') }}</p> }\n@if (result(); as confirmed) {\n  <div class=\"save-result\" role=\"status\"><span>{{ text('saved') }}</span><a mat-button data-testid=\"page-save-as-link\" [routerLink]=\"confirmed.routePath\">{{ text('open') }}</a><code>{{ confirmed.routePath }}</code></div>\n}\n", styles: [":host{display:block;min-width:0}.save-as{display:flex;flex-wrap:wrap;align-items:start;gap:16px}mat-form-field{flex:1 1 180px;min-width:0}button{margin-top:7px;min-height:44px}p[role=alert]{color:var(--mat-sys-error)}.save-result{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--mat-sys-primary)}code{overflow-wrap:anywhere;font-size:12px}@media(max-width:700px){.save-as{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}button{margin-block:4px 12px}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4$1.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: MatDialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisPageSaveAsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-page-save-as', imports: [ReactiveFormsModule, RouterLink, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, MatDialogModule], providers: [providePraxisPageBuilderI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"save-as\" [attr.aria-busy]=\"busy() || choosingIcon()\">\n  <mat-form-field appearance=\"outline\"><mat-label>{{ text('title') }}</mat-label>\n    <input matInput data-testid=\"page-save-as-title\" [formControl]=\"title\" [maxlength]=\"titleMaxLength()\" />\n    <mat-error>{{ text('invalidName') }}</mat-error>\n  </mat-form-field>\n  <mat-form-field appearance=\"outline\"><mat-label>{{ text('menu') }}</mat-label>\n    <input matInput data-testid=\"page-save-as-menu\" [formControl]=\"menu\" [maxlength]=\"menuMaxLength()\" />\n    <mat-hint>{{ text('menuHint') }}</mat-hint>\n    <mat-error>{{ text('invalidName') }}</mat-error>\n  </mat-form-field>\n  <button mat-stroked-button type=\"button\" data-testid=\"page-save-as-icon\" [attr.data-icon]=\"icon()\" [disabled]=\"busy() || choosingIcon()\" (click)=\"chooseIcon()\"><mat-icon aria-hidden=\"true\">{{ icon() }}</mat-icon>{{ text('icon') }}</button>\n  <button mat-flat-button type=\"button\" data-testid=\"page-save-as-submit\" [disabled]=\"busy() || choosingIcon() || !canSave() || title.invalid || menu.invalid\" (click)=\"requestSave()\">{{ text(busy() ? 'saving' : 'save') }}</button>\n</div>\n@if (iconError()) { <p role=\"alert\">{{ text('invalidIcon') }}</p> }\n@if (error()) { <p role=\"alert\">{{ text('failed') }}</p> }\n@if (result(); as confirmed) {\n  <div class=\"save-result\" role=\"status\"><span>{{ text('saved') }}</span><a mat-button data-testid=\"page-save-as-link\" [routerLink]=\"confirmed.routePath\">{{ text('open') }}</a><code>{{ confirmed.routePath }}</code></div>\n}\n", styles: [":host{display:block;min-width:0}.save-as{display:flex;flex-wrap:wrap;align-items:start;gap:16px}mat-form-field{flex:1 1 180px;min-width:0}button{margin-top:7px;min-height:44px}p[role=alert]{color:var(--mat-sys-error)}.save-result{display:flex;flex-wrap:wrap;align-items:center;gap:12px;color:var(--mat-sys-primary)}code{overflow-wrap:anywhere;font-size:12px}@media(max-width:700px){.save-as{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}button{margin-block:4px 12px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { adapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "adapter", required: true }] }], contextKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextKey", required: true }] }], canSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSave", required: false }] }], initialTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialTitle", required: false }] }], initialMenuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMenuLabel", required: false }] }], initialIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialIcon", required: false }] }], titleMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleMaxLength", required: false }] }], menuMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuMaxLength", required: false }] }], saveRequested: [{ type: i0.Output, args: ["saveRequested"] }], saved: [{ type: i0.Output, args: ["saved"] }], saveFailed: [{ type: i0.Output, args: ["saveFailed"] }] } });
+/** Copies the current local authoring snapshot. Allocation/provenance belongs to the destination adapter. */
+class PraxisPageCopyActionComponent {
+    page = input(...(ngDevMode ? [undefined, { debugName: "page" }] : /* istanbul ignore next */ []));
+    canCopy = input(false, ...(ngDevMode ? [{ debugName: "canCopy" }] : /* istanbul ignore next */ []));
+    copyRequested = output();
+    error = signal(false, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    i18n = inject(PraxisI18nService);
+    text(key) { return resolvePraxisPageBuilderText(this.i18n, `saveAs.${key}`, key); }
+    copy() {
+        const page = this.page();
+        if (!this.canCopy() || !page)
+            return;
+        this.error.set(false);
+        let snapshot;
+        try {
+            snapshot = structuredClone(page);
+        }
+        catch {
+            this.error.set(true);
+            return;
+        }
+        this.copyRequested.emit(snapshot);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisPageCopyActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisPageCopyActionComponent, isStandalone: true, selector: "praxis-page-copy-action", inputs: { page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, canCopy: { classPropertyName: "canCopy", publicName: "canCopy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { copyRequested: "copyRequested" }, providers: [providePraxisPageBuilderI18n()], ngImport: i0, template: `
+    <button mat-flat-button type="button" data-testid="page-copy-action" [disabled]="!canCopy() || !page()" (click)="copy()">
+      <mat-icon aria-hidden="true">content_copy</mat-icon>{{ text('copy') }}
+    </button>
+    @if (error()) { <p role="alert">{{ text('copyFailed') }}</p> }
+  `, isInline: true, dependencies: [{ 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: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisPageCopyActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'praxis-page-copy-action',
+                    imports: [MatButtonModule, MatIconModule],
+                    providers: [providePraxisPageBuilderI18n()],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <button mat-flat-button type="button" data-testid="page-copy-action" [disabled]="!canCopy() || !page()" (click)="copy()">
+      <mat-icon aria-hidden="true">content_copy</mat-icon>{{ text('copy') }}
+    </button>
+    @if (error()) { <p role="alert">{{ text('copyFailed') }}</p> }
+  `,
+                }]
+        }], propDecorators: { page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], canCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCopy", required: false }] }], copyRequested: [{ type: i0.Output, args: ["copyRequested"] }] } });
+const GOVERNED_PAGE_CAPABILITY_KEYS = Object.freeze({
+    authorPages: 'praxis.config.pages.author',
+    submitForReview: 'praxis.config.pages.submit',
+    approveReleases: 'praxis.config.pages.approve',
+    publishReleases: 'praxis.config.pages.publish',
+    manageNavigationGroups: 'praxis.config.navigation.manage',
+});
+/**
+ * Derives governed page capabilities from canonical server-issued capability keys.
+ * Never fabricates approval or publication authority when a capability is absent.
+ */
+function deriveGovernedPageCapabilities(grantedCapabilities) {
+    const granted = new Set(grantedCapabilities
+        ? Array.from(grantedCapabilities, item => String(item ?? '').trim())
+        : []);
+    const hasWildcard = granted.has('*') || granted.has('praxis.config.*');
+    return {
+        canAuthorPages: hasWildcard ||
+            granted.has(GOVERNED_PAGE_CAPABILITY_KEYS.authorPages) ||
+            granted.has('ui.authoring.configure') ||
+            granted.has('ui-layout:write') ||
+            granted.has('pages:write'),
+        canSubmitForReview: hasWildcard ||
+            granted.has(GOVERNED_PAGE_CAPABILITY_KEYS.submitForReview) ||
+            granted.has('ui.authoring.configure') ||
+            granted.has('ui-layout:submit') ||
+            granted.has('pages:submit'),
+        canApproveReleases: hasWildcard ||
+            granted.has(GOVERNED_PAGE_CAPABILITY_KEYS.approveReleases) ||
+            granted.has('ui.layout.publish') ||
+            granted.has('ui-layout:approve') ||
+            granted.has('pages:approve'),
+        canPublishReleases: hasWildcard ||
+            granted.has(GOVERNED_PAGE_CAPABILITY_KEYS.publishReleases) ||
+            granted.has('ui.layout.publish') ||
+            granted.has('ui-layout:publish') ||
+            granted.has('pages:publish'),
+        canManageNavigationGroups: hasWildcard ||
+            granted.has(GOVERNED_PAGE_CAPABILITY_KEYS.manageNavigationGroups) ||
+            granted.has(GOVERNED_PAGE_CAPABILITY_KEYS.authorPages) ||
+            granted.has('ui.authoring.configure'),
+    };
+}
+function createCorporateGovernedPagePersistenceAdapter(lifecycle) {
+    return {
+        mode: 'corporate',
+        createPage: command => lifecycle.createPage(command),
+        readPageByCreationKey: creationKey => lifecycle.readPageByCreationKey(creationKey),
+        readPageCatalog: options => lifecycle.readPageCatalog(options),
+        readPublishedPage: (pageId, ifNoneMatch) => lifecycle.readPublishedPage(pageId, ifNoneMatch),
+        readDraftByCreationKey: (target, creationKey) => lifecycle.readDraftByCreationKey(target, creationKey),
+        readDraft: (target, draftId, ifNoneMatch) => lifecycle.readDraft(target, draftId, ifNoneMatch),
+        readReview: (target, releaseId, ifNoneMatch) => lifecycle.readReview(target, releaseId, ifNoneMatch),
+        readHead: (target, ifNoneMatch) => lifecycle.readHead(target, ifNoneMatch),
+        createDraft: (target, idempotencyKey) => lifecycle.createDraft(target, idempotencyKey),
+        createRevision: (target, draftId, draftEtag, command) => lifecycle.createRevision(target, draftId, draftEtag, command),
+        createAssignment: (target, draftId, draftEtag, command) => lifecycle.createAssignment(target, draftId, draftEtag, command),
+        freezeRelease: (target, draftId, draftEtag, command) => lifecycle.freezeRelease(target, draftId, draftEtag, command),
+        submit: (target, releaseId, reviewEtag) => lifecycle.submit(target, releaseId, reviewEtag),
+        approve: (target, releaseId, reviewEtag, command) => lifecycle.approve(target, releaseId, reviewEtag, command),
+        publish: (target, condition, command) => lifecycle.publish(target, condition, command),
+    };
+}
+function createLocalPageSaveAsAdapter(handler) {
+    return {
+        mode: 'local',
+        save: request => handler(request),
+    };
+}
+const LEGACY_PUBLISHED_PAGE_STORAGE_PREFIX = 'published-page:';
+const DEFAULT_CORPORATE_NAVIGATION_GROUPS_TARGET = Object.freeze({
+    componentType: 'praxis-app-shell',
+    componentId: 'b9debe04-41ba-498b-86aa-cb30a464fb82',
+});
+class GovernedPageNavigationController {
+    persistence;
+    observeTargetDoc;
+    navigationGroupsTarget;
+    registeredNamespace;
+    allowedIcons;
+    pageSize;
+    maxItemsPerLevel;
+    idGenerator;
+    epoch = 0;
+    contextKey;
+    groupsSub = null;
+    pageSubs = new Map();
+    pageDocuments = new Map();
+    expandedGroups = new Set();
+    fencedAttempts = new Map();
+    latestGroupsDoc = createEmptyNavigationGroupsAuthoringDocument();
+    latestCatalogEntries = [];
+    stateSubject;
+    snapshot$;
+    constructor(config) {
+        this.persistence = config.persistence;
+        this.navigationGroupsTarget =
+            config.navigationGroupsTarget ?? DEFAULT_CORPORATE_NAVIGATION_GROUPS_TARGET;
+        this.registeredNamespace = config.registeredNamespace ?? '/pages';
+        this.allowedIcons = new Set(Array.from(config.allowedIcons ?? GOVERNED_PAGE_DEFAULT_ALLOWED_ICONS, icon => String(icon ?? '').trim()));
+        this.pageSize = Math.max(1, Math.min(200, Math.trunc(config.pageSize ?? 50)));
+        this.maxItemsPerLevel = Math.max(1, Math.min(200, Math.trunc(config.maxItemsPerLevel ?? 200)));
+        this.contextKey = config.initialContextKey ?? 'default';
+        this.idGenerator =
+            config.idGenerator ??
+                (() => typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+                    ? crypto.randomUUID()
+                    : `00000000-0000-4000-8000-${Date.now().toString(16).padStart(12, '0').slice(-12)}`);
+        if (config.observeTargetDocument) {
+            this.observeTargetDoc = config.observeTargetDocument;
+        }
+        else if (config.effectiveLayoutService) {
+            const effectiveLayout = config.effectiveLayoutService;
+            this.observeTargetDoc = (target) => new Observable(subscriber => {
+                let cancelled = false;
+                void effectiveLayout
+                    .resolve(target)
+                    .then(response => {
+                    if (!cancelled) {
+                        subscriber.next(response.document ?? null);
+                        subscriber.complete();
+                    }
+                })
+                    .catch((err) => {
+                    if (!cancelled) {
+                        subscriber.error(err);
+                    }
+                });
+                return () => {
+                    cancelled = true;
+                };
+            });
+        }
+        this.stateSubject = new BehaviorSubject({
+            epoch: this.epoch,
+            contextKey: this.contextKey,
+            catalogEntries: [],
+            groupsDocument: this.latestGroupsDoc,
+            menuNodes: [],
+            expandedGroupIds: [],
+            loading: false,
+            diagnostics: [],
+            fencedAttempts: {},
+            lastError: null,
+        });
+        this.snapshot$ = this.stateSubject.asObservable();
+    }
+    get snapshot() {
+        return this.stateSubject.value;
+    }
+    setContextKey(nextContextKey) {
+        const normalized = String(nextContextKey ?? '').trim() || 'default';
+        this.contextKey = normalized;
+        this.invalidate();
+    }
+    invalidate() {
+        this.epoch += 1;
+        this.teardownSubscriptions();
+        this.pageDocuments.clear();
+        this.latestCatalogEntries = [];
+        this.latestGroupsDoc = createEmptyNavigationGroupsAuthoringDocument();
+        this.fencedAttempts.clear();
+        this.publishSnapshot({
+            epoch: this.epoch,
+            contextKey: this.contextKey,
+            catalogEntries: [],
+            groupsDocument: this.latestGroupsDoc,
+            menuNodes: [],
+            expandedGroupIds: Array.from(this.expandedGroups),
+            loading: false,
+            diagnostics: [],
+            fencedAttempts: {},
+            lastError: null,
+        });
+    }
+    destroy() {
+        this.epoch += 1;
+        this.teardownSubscriptions();
+        this.stateSubject.complete();
+    }
+    async refresh() {
+        const activeEpoch = ++this.epoch;
+        const activeContextKey = this.contextKey;
+        this.teardownSubscriptions();
+        this.pageDocuments.clear();
+        this.publishSnapshot({
+            ...this.snapshot,
+            epoch: activeEpoch,
+            contextKey: activeContextKey,
+            loading: true,
+            lastError: null,
+        });
+        this.bindGroupsObservation(activeEpoch, activeContextKey);
+        try {
+            const entries = await this.readAllCatalogEntries(activeEpoch, activeContextKey);
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                return this.snapshot;
+            }
+            this.latestCatalogEntries = entries;
+            await this.hydrateCatalogPages(entries, activeEpoch, activeContextKey);
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                return this.snapshot;
+            }
+            this.recomputeProjection(activeEpoch, activeContextKey, false);
+            return this.snapshot;
+        }
+        catch (error) {
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                return this.snapshot;
+            }
+            this.publishSnapshot({
+                ...this.snapshot,
+                loading: false,
+                lastError: error instanceof Error ? error.message : String(error),
+            });
+            return this.snapshot;
+        }
+    }
+    toggleGroupExpanded(groupId) {
+        const normalized = String(groupId ?? '').trim().toLowerCase();
+        if (!normalized) {
+            return;
+        }
+        if (this.expandedGroups.has(normalized)) {
+            this.expandedGroups.delete(normalized);
+        }
+        else {
+            this.expandedGroups.add(normalized);
+            this.reobserveGroupChildren(normalized, this.epoch, this.contextKey);
+        }
+        this.publishSnapshot({
+            ...this.snapshot,
+            expandedGroupIds: Array.from(this.expandedGroups),
+        });
+    }
+    clearFencedAttempt(attemptKey) {
+        this.fencedAttempts.delete(attemptKey);
+        this.publishSnapshot({
+            ...this.snapshot,
+            fencedAttempts: Object.fromEntries(this.fencedAttempts),
+        });
+    }
+    async upsertAndPublishNavigationGroup(input) {
+        const activeEpoch = this.epoch;
+        const activeContextKey = this.contextKey;
+        const attemptKey = `navigation-group:${input.entry.id}`;
+        if (this.fencedAttempts.has(attemptKey)) {
+            throw new Error(`Navigation group operation is fenced pending reconciliation: ${attemptKey}`);
+        }
+        const updated = upsertNavigationGroupEntry(this.latestGroupsDoc, input.entry, {
+            allowedIcons: this.allowedIcons,
+        });
+        if (!updated.ok) {
+            throw new Error(updated.diagnostics[0]?.code ?? 'NAVIGATION_GROUPS_PROFILE_INVALID');
+        }
+        const draftCreationKey = input.draftCreationKey ?? this.idGenerator();
+        const revisionCommandRef = input.revisionCommandRef ?? this.idGenerator();
+        const assignmentCommandRef = input.assignmentCommandRef ?? this.idGenerator();
+        const freezeCommandRef = input.freezeCommandRef ?? this.idGenerator();
+        const reason = input.reason?.trim() || 'Publish navigation group update';
+        try {
+            const createdDraft = await this.persistence.createDraft(this.navigationGroupsTarget, draftCreationKey);
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+            }
+            let draftEtag = createdDraft.etag;
+            const draftId = createdDraft.body.draft.draftRef;
+            const revisionReceipt = await this.persistence.createRevision(this.navigationGroupsTarget, draftId, draftEtag, {
+                commandRef: revisionCommandRef,
+                target: this.navigationGroupsTarget,
+                authoringDocument: updated.value,
+                reason,
+            });
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+            }
+            if (revisionReceipt.etag === draftEtag) {
+                throw new Error('Navigation groups draft ETag did not progress after revision.');
+            }
+            draftEtag = revisionReceipt.etag;
+            const assignmentReceipt = await this.persistence.createAssignment(this.navigationGroupsTarget, draftId, draftEtag, {
+                commandRef: assignmentCommandRef,
+                target: this.navigationGroupsTarget,
+                layerClass: input.layerClass ?? 'TENANT',
+                selector: input.selector,
+                priority: input.priority ?? 100,
+                contributionKey: input.contributionKey ?? 'corporate:navigation-groups',
+            });
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+            }
+            if (assignmentReceipt.etag === draftEtag) {
+                throw new Error('Navigation groups draft ETag did not progress after assignment.');
+            }
+            draftEtag = assignmentReceipt.etag;
+            const freezeReceipt = await this.persistence.freezeRelease(this.navigationGroupsTarget, draftId, draftEtag, { commandRef: freezeCommandRef });
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+            }
+            if (freezeReceipt.etag === draftEtag) {
+                throw new Error('Navigation groups draft ETag did not progress after freeze.');
+            }
+            const releaseId = freezeReceipt.body.release.releaseRef;
+            let reviewEtag = freezeReceipt.body.review.reviewEtag;
+            const submitReceipt = await this.persistence.submit(this.navigationGroupsTarget, releaseId, reviewEtag);
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+            }
+            if (submitReceipt.etag === reviewEtag) {
+                throw new Error('Navigation groups review ETag did not progress after submit.');
+            }
+            reviewEtag = submitReceipt.etag;
+            if (submitReceipt.body.state !== 'APPROVED') {
+                const approveReceipt = await this.persistence.approve(this.navigationGroupsTarget, releaseId, reviewEtag, {
+                    reason,
+                });
+                if (this.isStale(activeEpoch, activeContextKey)) {
+                    throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+                }
+                if (approveReceipt.etag === reviewEtag) {
+                    throw new Error('Navigation groups review ETag did not progress after approve.');
+                }
+            }
+            let existingHeadReleaseRef = null;
+            let existingHeadEtag = null;
+            try {
+                const headResult = await this.persistence.readHead(this.navigationGroupsTarget);
+                if (this.isStale(activeEpoch, activeContextKey)) {
+                    throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+                }
+                if ('body' in headResult) {
+                    existingHeadReleaseRef = headResult.body.activeReleaseRef;
+                    existingHeadEtag = headResult.etag;
+                }
+            }
+            catch (headError) {
+                if (this.isStale(activeEpoch, activeContextKey)) {
+                    throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+                }
+                if (!(headError instanceof UiLayoutLifecycleHttpError && headError.status === 404)) {
+                    throw headError;
+                }
+            }
+            if (existingHeadReleaseRef !== releaseId) {
+                const condition = existingHeadEtag
+                    ? { kind: 'match', etag: existingHeadEtag }
+                    : { kind: 'first-publish' };
+                await this.persistence.publish(this.navigationGroupsTarget, condition, {
+                    releaseId,
+                    reason,
+                });
+            }
+            this.latestGroupsDoc = updated.value;
+            this.recomputeProjection(activeEpoch, activeContextKey, false);
+            return updated.value;
+        }
+        catch (error) {
+            if (error instanceof UiLayoutLifecycleContractError &&
+                error.code === 'COMMAND_OUTCOME_UNCERTAIN') {
+                this.fencedAttempts.set(attemptKey, draftCreationKey);
+                this.publishSnapshot({
+                    ...this.snapshot,
+                    fencedAttempts: Object.fromEntries(this.fencedAttempts),
+                    lastError: error.message,
+                });
+            }
+            throw error;
+        }
+    }
+    async readAllCatalogEntries(activeEpoch, activeContextKey) {
+        const collected = [];
+        const seenPageIds = new Set();
+        const seenCursors = new Set();
+        let cursor = null;
+        while (collected.length < this.maxItemsPerLevel) {
+            const response = await this.persistence.readPageCatalog({
+                cursor,
+                limit: Math.min(this.pageSize, this.maxItemsPerLevel - collected.length),
+            });
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                return [];
+            }
+            for (const item of response.items ?? []) {
+                const normalizedId = String(item?.pageId ?? '').trim().toLowerCase();
+                if (!normalizedId || seenPageIds.has(normalizedId)) {
+                    continue;
+                }
+                seenPageIds.add(normalizedId);
+                collected.push(item);
+                if (collected.length >= this.maxItemsPerLevel) {
+                    break;
+                }
+            }
+            const nextCursor = response.nextCursor?.trim() || null;
+            if (!nextCursor) {
+                break;
+            }
+            if (seenCursors.has(nextCursor)) {
+                throw new Error(`Detected pagination cursor cycle in page catalog: ${nextCursor}`);
+            }
+            seenCursors.add(nextCursor);
+            cursor = nextCursor;
+        }
+        return collected;
+    }
+    async hydrateCatalogPages(entries, activeEpoch, activeContextKey) {
+        for (const entry of entries) {
+            if (this.isStale(activeEpoch, activeContextKey)) {
+                return;
+            }
+            const pageId = String(entry.pageId ?? '').trim().toLowerCase();
+            if (!pageId) {
+                continue;
+            }
+            try {
+                const published = await this.persistence.readPublishedPage(pageId);
+                if (this.isStale(activeEpoch, activeContextKey)) {
+                    return;
+                }
+                if ('body' in published) {
+                    const decoded = decodePageAuthoringDocument(published.body.document);
+                    if (decoded.ok) {
+                        this.pageDocuments.set(pageId, decoded.value);
+                    }
+                }
+            }
+            catch {
+                // Individual page read failure does not abort the rest of the catalog projection.
+            }
+            this.bindPageObservation(pageId, activeEpoch, activeContextKey);
+        }
+    }
+    bindGroupsObservation(activeEpoch, activeContextKey) {
+        if (!this.observeTargetDoc) {
+            return;
+        }
+        this.groupsSub?.unsubscribe();
+        this.groupsSub = this.observeTargetDoc(this.navigationGroupsTarget).subscribe({
+            next: rawDoc => {
+                if (this.isStale(activeEpoch, activeContextKey) || !rawDoc) {
+                    return;
+                }
+                const decoded = decodeNavigationGroupsAuthoringDocument(rawDoc, {
+                    allowedIcons: this.allowedIcons,
+                });
+                if (decoded.ok) {
+                    this.latestGroupsDoc = decoded.value;
+                    this.recomputeProjection(activeEpoch, activeContextKey, false);
+                }
+            },
+        });
+    }
+    bindPageObservation(pageId, activeEpoch, activeContextKey) {
+        if (!this.observeTargetDoc) {
+            return;
+        }
+        this.pageSubs.get(pageId)?.unsubscribe();
+        let target;
+        try {
+            target = buildGovernedPageTarget(pageId);
+        }
+        catch {
+            return;
+        }
+        const sub = this.observeTargetDoc(target).subscribe({
+            next: rawDoc => {
+                if (this.isStale(activeEpoch, activeContextKey) || !rawDoc) {
+                    return;
+                }
+                const decoded = decodePageAuthoringDocument(rawDoc);
+                if (decoded.ok) {
+                    this.pageDocuments.set(pageId, decoded.value);
+                    this.recomputeProjection(activeEpoch, activeContextKey, false);
+                }
+            },
+        });
+        this.pageSubs.set(pageId, sub);
+    }
+    reobserveGroupChildren(groupId, activeEpoch, activeContextKey) {
+        for (const [pageId, doc] of this.pageDocuments.entries()) {
+            if (doc.config.navigation.some(binding => binding.groupId.toLowerCase() === groupId)) {
+                this.bindPageObservation(pageId, activeEpoch, activeContextKey);
+            }
+        }
+    }
+    recomputeProjection(activeEpoch, activeContextKey, loading) {
+        if (this.isStale(activeEpoch, activeContextKey)) {
+            return;
+        }
+        const diagnostics = [];
+        const groups = this.latestGroupsDoc.config.groups.slice(0, this.maxItemsPerLevel);
+        const groupNodesById = new Map();
+        for (const group of groups) {
+            groupNodesById.set(group.id.toLowerCase(), {
+                id: group.id.toLowerCase(),
+                kind: 'group',
+                label: group.label,
+                icon: group.icon,
+                order: group.order,
+                children: [],
+            });
+        }
+        for (const [pageId, doc] of this.pageDocuments.entries()) {
+            const routePath = buildPublishedPageIdentity(pageId, this.registeredNamespace).routePath;
+            for (const binding of doc.config.navigation) {
+                if (!this.allowedIcons.has(binding.icon)) {
+                    diagnostics.push({
+                        code: 'NAVIGATION_ICON_NOT_ALLOWED',
+                        path: `/pages/${pageId}/navigation/${binding.id}/icon`,
+                    });
+                    continue;
+                }
+                const parentGroup = groupNodesById.get(binding.groupId.toLowerCase());
+                if (!parentGroup) {
+                    continue;
+                }
+                parentGroup.children ??= [];
+                if (parentGroup.children.length < this.maxItemsPerLevel) {
+                    parentGroup.children.push({
+                        id: binding.id.toLowerCase(),
+                        kind: 'page',
+                        label: binding.label,
+                        icon: binding.icon,
+                        order: binding.order,
+                        pageId,
+                        routePath,
+                    });
+                }
+            }
+        }
+        const rootNodes = [];
+        for (const group of groups) {
+            const node = groupNodesById.get(group.id.toLowerCase());
+            if (!node) {
+                continue;
+            }
+            rootNodes.push(node);
+        }
+        const sortNodes = (nodes) => {
+            nodes.sort((left, right) => left.order !== right.order
+                ? left.order - right.order
+                : left.label.localeCompare(right.label));
+            for (const item of nodes) {
+                if (item.children?.length) {
+                    sortNodes(item.children);
+                }
+            }
+        };
+        sortNodes(rootNodes);
+        const validation = validateRuntimeNavigationMenuNodes(rootNodes, {
+            allowedIcons: this.allowedIcons,
+        });
+        if (!validation.ok) {
+            diagnostics.push(...validation.diagnostics);
+        }
+        this.publishSnapshot({
+            epoch: activeEpoch,
+            contextKey: activeContextKey,
+            catalogEntries: [...this.latestCatalogEntries],
+            groupsDocument: this.latestGroupsDoc,
+            menuNodes: validation.ok ? validation.value : rootNodes,
+            expandedGroupIds: Array.from(this.expandedGroups),
+            loading,
+            diagnostics,
+            fencedAttempts: Object.fromEntries(this.fencedAttempts),
+            lastError: null,
+        });
+    }
+    isStale(epoch, contextKey) {
+        return epoch !== this.epoch || contextKey !== this.contextKey;
+    }
+    teardownSubscriptions() {
+        this.groupsSub?.unsubscribe();
+        this.groupsSub = null;
+        for (const sub of this.pageSubs.values()) {
+            sub.unsubscribe();
+        }
+        this.pageSubs.clear();
+    }
+    publishSnapshot(next) {
+        this.stateSubject.next(next);
+    }
+}
+const DEFAULT_GOVERNED_PAGE_CHILD_VALIDATORS = Object.freeze({
+    'praxis-dynamic-form': validateDynamicFormPageWidget,
+    'praxis-table': validateTablePageWidget,
+});
+const DEFAULT_GOVERNED_PAGE_PREVIEW_ADAPTERS = Object.freeze({
+    'praxis-dynamic-form': DYNAMIC_FORM_GOVERNED_PAGE_PREVIEW_ADAPTER,
+    'praxis-table': TABLE_GOVERNED_PAGE_PREVIEW_ADAPTER,
+});
+const CANONICAL_UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+function isPlainRecord(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function parseLegacySourceReference(value) {
+    if (!isPlainRecord(value) || typeof value['kind'] !== 'string') {
+        return null;
+    }
+    if (value['kind'] === 'registered-native') {
+        const sourceId = typeof value['sourceId'] === 'string' ? value['sourceId'].trim() : '';
+        const revision = typeof value['revision'] === 'string' ? value['revision'].trim() : '';
+        if (!sourceId || !revision) {
+            return null;
+        }
+        return {
+            kind: 'registered-native',
+            sourceId,
+            revision,
+        };
+    }
+    if (value['kind'] === 'published-page' || value['kind'] === 'published-page-copy') {
+        const pageId = typeof value['pageId'] === 'string' ? value['pageId'].trim().toLowerCase() : '';
+        const releaseId = typeof value['releaseId'] === 'string' ? value['releaseId'].trim().toLowerCase() : '';
+        const revisionId = typeof value['revisionId'] === 'string' ? value['revisionId'].trim().toLowerCase() : '';
+        if (!CANONICAL_UUID_PATTERN.test(pageId) ||
+            !CANONICAL_UUID_PATTERN.test(releaseId) ||
+            !CANONICAL_UUID_PATTERN.test(revisionId)) {
+            return null;
+        }
+        return {
+            kind: 'published-page',
+            pageId,
+            releaseId,
+            revisionId,
+        };
+    }
+    return null;
+}
+function normalizeLegacyCandidateDocument(rawPayload) {
+    if (!isPlainRecord(rawPayload)) {
+        return rawPayload;
+    }
+    if (isPlainRecord(rawPayload['document'])) {
+        return normalizeLegacyCandidateDocument(rawPayload['document']);
+    }
+    if (rawPayload['schemaVersion'] !== undefined || rawPayload['kind'] !== undefined) {
+        return rawPayload;
+    }
+    if (isPlainRecord(rawPayload['config'])) {
+        return {
+            kind: 'praxis.dynamic-page.editor',
+            version: 1,
+            config: rawPayload['config'],
+        };
+    }
+    const presentation = isPlainRecord(rawPayload['presentation'])
+        ? rawPayload['presentation']
+        : {
+            title: typeof rawPayload['title'] === 'string' ? rawPayload['title'] : '',
+            icon: typeof rawPayload['icon'] === 'string' ? rawPayload['icon'] : 'article',
+            ...(typeof rawPayload['description'] === 'string'
+                ? { description: rawPayload['description'] }
+                : {}),
+        };
+    const navigation = Array.isArray(rawPayload['navigation'])
+        ? rawPayload['navigation']
+        : [];
+    const definition = isPlainRecord(rawPayload['definition'])
+        ? rawPayload['definition']
+        : Object.fromEntries(Object.entries(rawPayload).filter(([key]) => key !== 'presentation' &&
+            key !== 'navigation' &&
+            key !== 'title' &&
+            key !== 'icon' &&
+            key !== 'description' &&
+            key !== 'source' &&
+            key !== 'childSources'));
+    return {
+        kind: 'praxis.dynamic-page.editor',
+        version: 1,
+        config: {
+            presentation,
+            navigation,
+            definition,
+        },
+    };
+}
+/**
+ * Inspects a legacy `published-page:<uuid>` payload against the closed P0 governed page profile.
+ * Validates page source, authoring document structure, and child widget sources while preserving
+ * an exportable artifact for incompatible legacy records.
+ */
+function inspectLegacyPublishedPagePayload(request, childValidators = DEFAULT_GOVERNED_PAGE_CHILD_VALIDATORS) {
+    const rawId = String(request.pageId ?? '').trim();
+    const normalizedPageId = rawId
+        .replace(new RegExp(`^${LEGACY_PUBLISHED_PAGE_STORAGE_PREFIX}`, 'i'), '')
+        .trim()
+        .toLowerCase();
+    const storageKey = `${LEGACY_PUBLISHED_PAGE_STORAGE_PREFIX}${normalizedPageId}`;
+    const routePath = `/pages/${normalizedPageId}`;
+    const diagnostics = [];
+    let target = {
+        componentType: 'praxis-dynamic-page',
+        componentId: normalizedPageId,
+    };
+    try {
+        target = buildGovernedPageTarget(normalizedPageId);
+    }
+    catch {
+        diagnostics.push({
+            code: 'PAGE_ID_INVALID',
+            path: '/pageId',
+        });
+    }
+    const rawRecord = isPlainRecord(request.rawPayload) ? request.rawPayload : null;
+    const resolvedSource = parseLegacySourceReference(request.source) ??
+        parseLegacySourceReference(rawRecord?.['source']);
+    if (!resolvedSource) {
+        diagnostics.push({
+            code: 'LEGACY_PAGE_SOURCE_INVALID',
+            path: '/source',
+        });
+    }
+    const candidateDoc = normalizeLegacyCandidateDocument(request.rawPayload);
+    const validation = validatePageAuthoringDocument(candidateDoc, childValidators);
+    if (!validation.ok) {
+        diagnostics.push(...validation.diagnostics);
+    }
+    const rawChildSources = Array.isArray(request.childSources)
+        ? request.childSources
+        : Array.isArray(rawRecord?.['childSources'])
+            ? rawRecord['childSources']
+            : [];
+    const childSourceMap = new Map();
+    rawChildSources.forEach((entry, index) => {
+        if (!isPlainRecord(entry)) {
+            diagnostics.push({
+                code: 'LEGACY_WIDGET_SOURCE_INVALID',
+                path: `/childSources/${index}`,
+            });
+            return;
+        }
+        const widgetKey = typeof entry['widgetKey'] === 'string' ? entry['widgetKey'].trim().toLowerCase() : '';
+        const parsedSource = parseLegacySourceReference(entry['source']);
+        if (!widgetKey || !parsedSource || parsedSource.kind !== 'registered-native') {
+            diagnostics.push({
+                code: 'LEGACY_WIDGET_SOURCE_INVALID',
+                path: `/childSources/${index}`,
+            });
+            return;
+        }
+        childSourceMap.set(widgetKey, {
+            widgetKey,
+            source: parsedSource,
+        });
+    });
+    if (validation.ok) {
+        validation.value.config.definition.widgets.forEach((widget, index) => {
+            const normalizedKey = widget.key.toLowerCase();
+            if (!childSourceMap.has(normalizedKey)) {
+                diagnostics.push({
+                    code: 'LEGACY_WIDGET_SOURCE_MISSING',
+                    path: `/config/definition/widgets/${index}/key`,
+                });
+            }
+        });
+    }
+    const compatible = diagnostics.length === 0 && validation.ok && resolvedSource !== null;
+    const authoringDocument = compatible && validation.ok ? validation.value : null;
+    const childSources = Array.from(childSourceMap.values());
+    return {
+        storageKey,
+        pageId: normalizedPageId,
+        routePath,
+        target,
+        compatible,
+        source: resolvedSource,
+        childSources,
+        authoringDocument,
+        diagnostics,
+        exportableArtifact: {
+            schemaVersion: '1.0.0',
+            kind: 'legacy-published-page-export',
+            storageKey,
+            pageId: normalizedPageId,
+            routePath,
+            compatible,
+            diagnostics,
+            rawPayload: request.rawPayload,
+        },
+    };
+}
+const DEFAULT_CAPABILITIES = Object.freeze({
+    canAuthorPages: true,
+    canSubmitForReview: true,
+    canApproveReleases: false,
+    canPublishReleases: false,
+    canManageNavigationGroups: true,
+});
+class GovernedPageWorkflowController {
+    persistence;
+    childValidators;
+    previewAdapters;
+    idGenerator;
+    contextGeneration = 0;
+    contextKey;
+    fencedOperations = new Map();
+    childSourcesByWidgetId = new Map();
+    stateSubject;
+    snapshot$;
+    constructor(config) {
+        this.persistence = config.persistence;
+        this.childValidators = config.childValidators ?? DEFAULT_GOVERNED_PAGE_CHILD_VALIDATORS;
+        this.previewAdapters = config.previewAdapters ?? DEFAULT_GOVERNED_PAGE_PREVIEW_ADAPTERS;
+        this.contextKey = config.initialContextKey ?? 'default';
+        this.idGenerator =
+            config.idGenerator ??
+                (() => typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+                    ? crypto.randomUUID()
+                    : `00000000-0000-4000-8000-${Date.now().toString(16).padStart(12, '0').slice(-12)}`);
+        this.stateSubject = new BehaviorSubject({
+            contextGeneration: this.contextGeneration,
+            contextKey: this.contextKey,
+            pageId: null,
+            rootTarget: null,
+            source: null,
+            draftWorkspace: null,
+            draftEtag: null,
+            workingDocument: null,
+            baselineDocument: null,
+            publishedSnapshot: null,
+            publishedEtag: null,
+            childSources: [],
+            reviewReceipt: null,
+            reviewEtag: null,
+            headReceipt: null,
+            headEtag: null,
+            preview: null,
+            dirty: false,
+            busy: false,
+            capabilities: config.initialCapabilities ?? DEFAULT_CAPABILITIES,
+            fencedOperations: {},
+            lastError: null,
+        });
+        this.snapshot$ = this.stateSubject.asObservable();
+    }
+    get snapshot() {
+        return this.stateSubject.value;
+    }
+    setCapabilities(capabilities) {
+        this.publishSnapshot({
+            ...this.snapshot,
+            capabilities: { ...capabilities },
+        });
+    }
+    /**
+     * Advances monotonic context generation on context switch (including A -> B -> A),
+     * invalidating any in-flight callbacks from previous generations.
+     */
+    setContextKey(nextContextKey) {
+        const normalized = String(nextContextKey ?? '').trim() || 'default';
+        this.contextGeneration += 1;
+        this.contextKey = normalized;
+        this.fencedOperations.clear();
+        this.childSourcesByWidgetId.clear();
+        this.publishSnapshot({
+            contextGeneration: this.contextGeneration,
+            contextKey: this.contextKey,
+            pageId: null,
+            rootTarget: null,
+            source: null,
+            draftWorkspace: null,
+            draftEtag: null,
+            workingDocument: null,
+            baselineDocument: null,
+            publishedSnapshot: null,
+            publishedEtag: null,
+            childSources: [],
+            reviewReceipt: null,
+            reviewEtag: null,
+            headReceipt: null,
+            headEtag: null,
+            preview: null,
+            dirty: false,
+            busy: false,
+            capabilities: this.snapshot.capabilities,
+            fencedOperations: {},
+            lastError: null,
+        });
+    }
+    destroy() {
+        this.contextGeneration += 1;
+        this.stateSubject.complete();
+    }
+    async createNativePage(request) {
+        this.requireCapability('canAuthorPages', 'Creating a governed page requires authoring capability.');
+        const creationKey = request.creationKey?.trim() || this.idGenerator();
+        return this.executePageCreation({
+            creationKey,
+            title: request.title,
+            source: {
+                kind: 'registered-native',
+                sourceId: request.sourceId,
+                revision: request.revision,
+            },
+        });
+    }
+    async copyPublishedPage(request) {
+        this.requireCapability('canAuthorPages', 'Copying a published page requires authoring capability.');
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const creationKey = request.creationKey?.trim() || this.idGenerator();
+        this.setBusy(true);
+        try {
+            const publishedRead = await this.persistence.readPublishedPage(request.sourcePageId);
+            this.assertActiveContext(activeGen, activeCtx);
+            if ('status' in publishedRead) {
+                throw this.fail('TRANSPORT_ERROR', 'Unexpected 304 when reading published source page.');
+            }
+            const sourceRef = publishedRead.body.copySource;
+            return await this.executePageCreation({
+                creationKey,
+                title: request.title,
+                source: sourceRef,
+            }, activeGen, activeCtx);
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx);
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    /**
+     * Explicitly imports a compatible legacy `published-page:<uuid>` record into a governed draft
+     * preserving the `/pages/<uuid>` address (`{ componentType: 'praxis-dynamic-page', componentId: pageId }`).
+     * Never fabricates approval or publication state and never deletes legacy storage keys.
+     */
+    async importLegacyPublishedPage(request) {
+        this.requireCapability('canAuthorPages', 'Importing a legacy published page into a governed draft requires authoring capability.');
+        const inspection = inspectLegacyPublishedPagePayload(request, this.childValidators);
+        if (!inspection.compatible || !inspection.authoringDocument || !inspection.source) {
+            throw this.fail('VALIDATION_FAILED', 'Legacy published page cannot be imported into the closed P0 governed profile.', inspection.diagnostics);
+        }
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const idempotencyKey = request.idempotencyKey?.trim() || this.idGenerator();
+        const attemptKey = `import-legacy-page:${inspection.pageId}`;
+        this.assertNotFenced(attemptKey);
+        this.setBusy(true);
+        try {
+            const draftReceipt = await this.persistence.createDraft(inspection.target, idempotencyKey);
+            this.assertActiveContext(activeGen, activeCtx);
+            const commandRef = this.idGenerator();
+            const revisionReceipt = await this.persistence.createRevision(inspection.target, draftReceipt.body.draft.draftRef, draftReceipt.etag, {
+                commandRef,
+                target: inspection.target,
+                authoringDocument: inspection.authoringDocument,
+                reason: request.reason?.trim() ||
+                    `Import legacy ${inspection.storageKey} into governed draft workspace`,
+                ...(inspection.childSources.length > 0
+                    ? { childSources: [...inspection.childSources] }
+                    : {}),
+            });
+            this.assertActiveContext(activeGen, activeCtx);
+            if (revisionReceipt.etag === draftReceipt.etag) {
+                throw this.fail('ETAG_NOT_PROGRESSED', 'Draft ETag did not progress after importing legacy page revision.');
+            }
+            this.childSourcesByWidgetId.clear();
+            for (const childSource of inspection.childSources) {
+                this.childSourcesByWidgetId.set(childSource.widgetKey.toLowerCase(), childSource);
+            }
+            this.applyDraftWorkspaceReceipt(inspection.pageId, inspection.target, revisionReceipt.body.nextDraft, revisionReceipt.etag, inspection.source);
+            await this.refreshPublishedAndLifecycleMetadata(inspection.pageId, inspection.target, revisionReceipt.body.nextDraft.frozenReleaseRef, activeGen, activeCtx);
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx, {
+                operation: 'import-legacy-page',
+                attemptKey,
+                creationKey: idempotencyKey,
+                source: inspection.source,
+                childSources: [...inspection.childSources],
+            });
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    async openDraftWorkspace(pageId, draftId, options) {
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const rootTarget = buildGovernedPageTarget(pageId);
+        this.setBusy(true);
+        try {
+            const draftResult = await this.persistence.readDraft(rootTarget, draftId);
+            this.assertActiveContext(activeGen, activeCtx);
+            if ('status' in draftResult) {
+                return this.snapshot;
+            }
+            this.applyDraftWorkspaceReceipt(pageId.trim().toLowerCase(), rootTarget, draftResult.body, draftResult.etag, options?.source ?? this.snapshot.source);
+            await this.refreshPublishedAndLifecycleMetadata(pageId.trim().toLowerCase(), rootTarget, draftResult.body.frozenReleaseRef, activeGen, activeCtx);
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx);
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    updateWorkingDocument(nextDocument) {
+        this.requireCapability('canAuthorPages', 'Editing a governed page draft requires authoring capability.');
+        const decoded = decodePageAuthoringDocument(nextDocument);
+        if (!decoded.ok) {
+            throw this.fail('VALIDATION_FAILED', 'Invalid governed page authoring document.', decoded.diagnostics);
+        }
+        const baseline = this.snapshot.baselineDocument;
+        const dirty = !baseline || uiLayoutJsonIdentity(baseline) !== uiLayoutJsonIdentity(decoded.value);
+        this.publishSnapshot({
+            ...this.snapshot,
+            workingDocument: decoded.value,
+            dirty,
+            lastError: null,
+        });
+        return decoded.value;
+    }
+    updatePresentation(presentation) {
+        const current = this.requireWorkingDocument();
+        return this.updateWorkingDocument({
+            ...current,
+            config: {
+                ...current.config,
+                presentation: {
+                    title: presentation.title,
+                    icon: presentation.icon,
+                    ...(presentation.description !== undefined
+                        ? { description: presentation.description }
+                        : {}),
+                },
+            },
+        });
+    }
+    upsertNavigationBinding(binding, options) {
+        this.requireCapability('canAuthorPages', 'Binding page navigation requires authoring capability.');
+        const current = this.requireWorkingDocument();
+        const updated = upsertPageNavigationBinding(current, binding, options);
+        if (!updated.ok) {
+            throw this.fail('VALIDATION_FAILED', 'Invalid governed page navigation binding.', updated.diagnostics);
+        }
+        return this.updateWorkingDocument(updated.value);
+    }
+    /**
+     * Updates a child widget's inputs inside the page's authoring document and
+     * records its governed child source so child widgets remain under page authorship.
+     */
+    updateChildWidgetInputs(widgetKey, inputs, childSource) {
+        this.requireCapability('canAuthorPages', 'Editing child widgets requires page authoring capability.');
+        const current = this.requireWorkingDocument();
+        const normalizedKey = String(widgetKey ?? '').trim().toLowerCase();
+        const widgetIndex = current.config.definition.widgets.findIndex(widget => widget.key.toLowerCase() === normalizedKey);
+        if (widgetIndex < 0) {
+            throw this.fail('VALIDATION_FAILED', `Widget "${widgetKey}" does not exist on the governed page.`);
+        }
+        const nextWidgets = current.config.definition.widgets.map((widget, idx) => idx === widgetIndex
+            ? {
+                ...widget,
+                definition: {
+                    ...widget.definition,
+                    inputs: JSON.parse(JSON.stringify(inputs)),
+                },
+            }
+            : widget);
+        if (childSource) {
+            this.childSourcesByWidgetId.set(normalizedKey, {
+                widgetKey: normalizedKey,
+                source: childSource.source,
+            });
+        }
+        const updated = this.updateWorkingDocument({
+            ...current,
+            config: {
+                ...current.config,
+                definition: {
+                    ...current.config.definition,
+                    widgets: nextWidgets,
+                },
+            },
+        });
+        this.publishSnapshot({
+            ...this.snapshot,
+            childSources: Array.from(this.childSourcesByWidgetId.values()),
+        });
+        return updated;
+    }
+    buildInteractivePreview(baseContext = {}) {
+        const working = this.requireWorkingDocument();
+        const pageId = this.snapshot.pageId;
+        if (!pageId) {
+            throw this.fail('DRAFT_NOT_LOADED', 'Cannot materialize preview before loading a governed page.');
+        }
+        const previewResult = materializeGovernedPagePreview(working, pageId, this.previewAdapters, baseContext);
+        if (!previewResult.ok) {
+            const hasUncertified = previewResult.diagnostics.some(diagnostic => diagnostic.code === 'PAGE_PREVIEW_WIDGET_UNCERTIFIED');
+            throw this.fail(hasUncertified ? 'PREVIEW_UNCERTIFIED' : 'VALIDATION_FAILED', hasUncertified
+                ? 'Interactive preview blocked: one or more widgets do not have a certified preview adapter.'
+                : 'Interactive preview failed validation.', previewResult.diagnostics);
+        }
+        this.publishSnapshot({
+            ...this.snapshot,
+            preview: previewResult.value,
+            lastError: null,
+        });
+        return previewResult.value;
+    }
+    async saveDraftRevision(reason = 'Save governed page draft revision') {
+        this.requireCapability('canAuthorPages', 'Saving a draft revision requires authoring capability.');
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const { rootTarget, draftWorkspace, draftEtag, pageId } = this.requireLoadedDraft();
+        const working = this.requireWorkingDocument();
+        const attemptKey = `save-revision:${draftWorkspace.draft.draftRef}`;
+        this.assertNotFenced(attemptKey);
+        const validated = validatePageAuthoringDocument(working, this.childValidators);
+        if (!validated.ok) {
+            throw this.fail('VALIDATION_FAILED', 'Governed page authoring document failed validation.', validated.diagnostics);
+        }
+        const commandRef = this.idGenerator();
+        const childSources = Array.from(this.childSourcesByWidgetId.values());
+        let activeDraftRef = draftWorkspace.draft.draftRef;
+        let activeDraftEtag = draftEtag;
+        this.setBusy(true);
+        try {
+            // A frozen release is immutable: editing after freeze opens a fresh draft workspace
+            // and never carries over a previous release's approval or submission state.
+            if (draftWorkspace.frozenReleaseRef !== null ||
+                draftWorkspace.draft.state === 'RELEASED') {
+                const reopened = await this.persistence.createDraft(rootTarget, this.idGenerator());
+                this.assertActiveContext(activeGen, activeCtx);
+                activeDraftRef = reopened.body.draft.draftRef;
+                activeDraftEtag = reopened.etag;
+            }
+            const receipt = await this.persistence.createRevision(rootTarget, activeDraftRef, activeDraftEtag, {
+                commandRef,
+                target: rootTarget,
+                authoringDocument: validated.value,
+                reason,
+                ...(childSources.length > 0 ? { childSources } : {}),
+            });
+            this.assertActiveContext(activeGen, activeCtx);
+            if (receipt.etag === activeDraftEtag) {
+                throw this.fail('ETAG_NOT_PROGRESSED', 'Draft ETag did not progress after saving revision.');
+            }
+            this.applyDraftWorkspaceReceipt(pageId, rootTarget, receipt.body.nextDraft, receipt.etag, this.snapshot.source);
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx, {
+                operation: 'save-revision',
+                attemptKey,
+                commandRef,
+                draftId: activeDraftRef,
+            });
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    async assignScope(input) {
+        this.requireCapability('canAuthorPages', 'Assigning governed page scope requires authoring capability.');
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const { rootTarget, draftWorkspace, draftEtag, pageId } = this.requireLoadedDraft();
+        const attemptKey = `assign-scope:${draftWorkspace.draft.draftRef}`;
+        this.assertNotFenced(attemptKey);
+        const commandRef = this.idGenerator();
+        let activeDraftRef = draftWorkspace.draft.draftRef;
+        let activeDraftEtag = draftEtag;
+        this.setBusy(true);
+        try {
+            if (draftWorkspace.frozenReleaseRef !== null ||
+                draftWorkspace.draft.state === 'RELEASED') {
+                const reopened = await this.persistence.createDraft(rootTarget, this.idGenerator());
+                this.assertActiveContext(activeGen, activeCtx);
+                activeDraftRef = reopened.body.draft.draftRef;
+                activeDraftEtag = reopened.etag;
+                const working = this.snapshot.workingDocument;
+                if (working) {
+                    const childSources = Array.from(this.childSourcesByWidgetId.values());
+                    const revReceipt = await this.persistence.createRevision(rootTarget, activeDraftRef, activeDraftEtag, {
+                        commandRef: this.idGenerator(),
+                        target: rootTarget,
+                        authoringDocument: working,
+                        reason: 'Reopen draft revision before updating scope assignment',
+                        ...(childSources.length > 0 ? { childSources } : {}),
+                    });
+                    this.assertActiveContext(activeGen, activeCtx);
+                    if (revReceipt.etag === activeDraftEtag) {
+                        throw this.fail('ETAG_NOT_PROGRESSED', 'Draft ETag did not progress after saving revision.');
+                    }
+                    activeDraftEtag = revReceipt.etag;
+                }
+            }
+            const receipt = await this.persistence.createAssignment(rootTarget, activeDraftRef, activeDraftEtag, {
+                commandRef,
+                target: rootTarget,
+                layerClass: input.layerClass,
+                selector: input.selector,
+                priority: input.priority ?? 100,
+                contributionKey: input.contributionKey ?? rootTarget.componentId,
+            });
+            this.assertActiveContext(activeGen, activeCtx);
+            if (receipt.etag === activeDraftEtag) {
+                throw this.fail('ETAG_NOT_PROGRESSED', 'Draft ETag did not progress after scope assignment.');
+            }
+            this.applyDraftWorkspaceReceipt(pageId, rootTarget, receipt.body.nextDraft, receipt.etag, this.snapshot.source);
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx, {
+                operation: 'assign-scope',
+                attemptKey,
+                commandRef,
+                draftId: activeDraftRef,
+            });
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    async saveAndSubmitForReview(options = {}) {
+        this.requireCapability('canAuthorPages', 'Submitting a governed page requires authoring capability.');
+        this.requireCapability('canSubmitForReview', 'Submitting a governed page for review requires submit capability.');
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const reason = options.reason?.trim() || 'Submit governed page for review';
+        const rootTargetEntry = this.snapshot.draftWorkspace?.targets[0];
+        if (this.snapshot.dirty || !rootTargetEntry?.selectedRevision) {
+            await this.saveDraftRevision(reason);
+            this.assertActiveContext(activeGen, activeCtx);
+        }
+        const updatedTargetEntry = this.snapshot.draftWorkspace?.targets[0];
+        const existingAssignment = updatedTargetEntry?.selectedAssignment;
+        const isSameAssignment = Boolean(existingAssignment) &&
+            Boolean(options.assignment) &&
+            existingAssignment?.layerClass === options.assignment?.layerClass &&
+            existingAssignment?.priority === (options.assignment?.priority ?? 100) &&
+            uiLayoutJsonIdentity(existingAssignment?.selector ?? null) ===
+                uiLayoutJsonIdentity(options.assignment?.selector ?? null);
+        if (!existingAssignment || (options.assignment && !isSameAssignment)) {
+            if (!options.assignment) {
+                throw this.fail('VALIDATION_FAILED', 'Scope assignment selector is required before freezing and submitting a release.');
+            }
+            await this.assignScope(options.assignment);
+            this.assertActiveContext(activeGen, activeCtx);
+        }
+        const { rootTarget, draftWorkspace, draftEtag, pageId } = this.requireLoadedDraft();
+        const freezeAttemptKey = `freeze-release:${draftWorkspace.draft.draftRef}`;
+        this.assertNotFenced(freezeAttemptKey);
+        let releaseId = draftWorkspace.frozenReleaseRef;
+        let reviewEtag = this.snapshot.reviewEtag;
+        this.setBusy(true);
+        try {
+            if (!releaseId || !reviewEtag) {
+                const freezeCommandRef = this.idGenerator();
+                try {
+                    const freezeReceipt = await this.persistence.freezeRelease(rootTarget, draftWorkspace.draft.draftRef, draftEtag, { commandRef: freezeCommandRef });
+                    this.assertActiveContext(activeGen, activeCtx);
+                    if (freezeReceipt.etag === draftEtag) {
+                        throw this.fail('ETAG_NOT_PROGRESSED', 'Draft ETag did not progress after freezing release.');
+                    }
+                    this.applyDraftWorkspaceReceipt(pageId, rootTarget, freezeReceipt.body.nextDraft, freezeReceipt.etag, this.snapshot.source);
+                    releaseId = freezeReceipt.body.release.releaseRef;
+                    reviewEtag = freezeReceipt.body.review.reviewEtag;
+                    this.publishSnapshot({
+                        ...this.snapshot,
+                        reviewReceipt: freezeReceipt.body.review,
+                        reviewEtag,
+                    });
+                }
+                catch (error) {
+                    throw this.handleOperationError(error, activeGen, activeCtx, {
+                        operation: 'freeze-release',
+                        attemptKey: freezeAttemptKey,
+                        commandRef: freezeCommandRef,
+                        draftId: draftWorkspace.draft.draftRef,
+                    });
+                }
+            }
+            const submitAttemptKey = `submit-review:${releaseId}`;
+            this.assertNotFenced(submitAttemptKey);
+            try {
+                const submitReceipt = await this.persistence.submit(rootTarget, releaseId, reviewEtag);
+                this.assertActiveContext(activeGen, activeCtx);
+                if (submitReceipt.etag === reviewEtag) {
+                    throw this.fail('ETAG_NOT_PROGRESSED', 'Review ETag did not progress after submitting release for review.');
+                }
+                this.publishSnapshot({
+                    ...this.snapshot,
+                    reviewReceipt: submitReceipt.body,
+                    reviewEtag: submitReceipt.etag,
+                    lastError: null,
+                });
+                return this.snapshot;
+            }
+            catch (error) {
+                throw this.handleOperationError(error, activeGen, activeCtx, {
+                    operation: 'submit-review',
+                    attemptKey: submitAttemptKey,
+                    releaseId,
+                });
+            }
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    async approveRelease(reason = 'Approve governed page release') {
+        this.requireCapability('canApproveReleases', 'Approving a governed page release requires approve capability.');
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const { rootTarget } = this.requireLoadedDraft();
+        const releaseId = this.snapshot.reviewReceipt?.releaseRef ?? this.snapshot.draftWorkspace?.frozenReleaseRef;
+        const reviewEtag = this.snapshot.reviewEtag;
+        if (!releaseId || !reviewEtag) {
+            throw this.fail('RELEASE_NOT_FROZEN', 'Cannot approve before a release is frozen and submitted.');
+        }
+        if (this.snapshot.reviewReceipt?.state === 'APPROVED') {
+            return this.snapshot;
+        }
+        const attemptKey = `approve-release:${releaseId}`;
+        this.assertNotFenced(attemptKey);
+        this.setBusy(true);
+        try {
+            const receipt = await this.persistence.approve(rootTarget, releaseId, reviewEtag, {
+                reason: reason.trim() || 'Approve governed page release',
+            });
+            this.assertActiveContext(activeGen, activeCtx);
+            if (receipt.etag === reviewEtag) {
+                throw this.fail('ETAG_NOT_PROGRESSED', 'Review ETag did not progress after approving release.');
+            }
+            this.publishSnapshot({
+                ...this.snapshot,
+                reviewReceipt: receipt.body,
+                reviewEtag: receipt.etag,
+                lastError: null,
+            });
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx, {
+                operation: 'approve-release',
+                attemptKey,
+                releaseId,
+            });
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    async publishRelease(reason = 'Publish governed page release') {
+        this.requireCapability('canPublishReleases', 'Publishing a governed page release requires publish capability.');
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        const { rootTarget, pageId } = this.requireLoadedDraft();
+        const releaseId = this.snapshot.reviewReceipt?.releaseRef ?? this.snapshot.draftWorkspace?.frozenReleaseRef;
+        if (!releaseId) {
+            throw this.fail('RELEASE_NOT_FROZEN', 'Cannot publish before a release is frozen and approved.');
+        }
+        const attemptKey = `publish-release:${releaseId}`;
+        this.assertNotFenced(attemptKey);
+        this.setBusy(true);
+        try {
+            let currentHead = this.snapshot.headReceipt;
+            let currentHeadEtag = this.snapshot.headEtag;
+            try {
+                const headRead = await this.persistence.readHead(rootTarget);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('body' in headRead) {
+                    currentHead = headRead.body;
+                    currentHeadEtag = headRead.etag;
+                }
+            }
+            catch (headError) {
+                this.assertActiveContext(activeGen, activeCtx);
+                if (headError instanceof UiLayoutLifecycleHttpError && headError.status === 404) {
+                    currentHead = null;
+                    currentHeadEtag = null;
+                }
+                else {
+                    throw headError;
+                }
+            }
+            if (currentHead?.activeReleaseRef === releaseId) {
+                this.publishSnapshot({
+                    ...this.snapshot,
+                    headReceipt: currentHead,
+                    headEtag: currentHeadEtag,
+                    lastError: null,
+                });
+                return this.snapshot;
+            }
+            const condition = currentHeadEtag
+                ? { kind: 'match', etag: currentHeadEtag }
+                : { kind: 'first-publish' };
+            const publishReceipt = await this.persistence.publish(rootTarget, condition, {
+                releaseId,
+                reason: reason.trim() || 'Publish governed page release',
+            });
+            this.assertActiveContext(activeGen, activeCtx);
+            let publishedSnapshot = this.snapshot.publishedSnapshot;
+            let publishedEtag = this.snapshot.publishedEtag;
+            try {
+                const publishedRead = await this.persistence.readPublishedPage(pageId);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('body' in publishedRead) {
+                    publishedSnapshot = publishedRead.body;
+                    publishedEtag = publishedRead.etag;
+                }
+            }
+            catch {
+                // Published snapshot refresh is best-effort after head advancement.
+            }
+            this.publishSnapshot({
+                ...this.snapshot,
+                headReceipt: publishReceipt.body,
+                headEtag: publishReceipt.etag,
+                publishedSnapshot,
+                publishedEtag,
+                lastError: null,
+            });
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx, {
+                operation: 'publish-release',
+                attemptKey,
+                releaseId,
+            });
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    async approveAndPublish(reason = 'Approve and publish governed page release') {
+        this.requireCapability('canApproveReleases', 'Approve capability is required.');
+        this.requireCapability('canPublishReleases', 'Publish capability is required.');
+        await this.approveRelease(reason);
+        return this.publishRelease(reason);
+    }
+    /**
+     * Reconciles a fenced operation after an ambiguous network failure (`COMMAND_OUTCOME_UNCERTAIN`)
+     * using the canonical read endpoints before unlocking retries.
+     */
+    async reconcileUncertainOperation(attemptKey) {
+        const fenced = this.fencedOperations.get(attemptKey);
+        if (!fenced) {
+            return this.snapshot;
+        }
+        const activeGen = this.contextGeneration;
+        const activeCtx = this.contextKey;
+        this.setBusy(true);
+        try {
+            if (fenced.operation === 'create-page' && fenced.creationKey) {
+                const receipt = await this.persistence.readPageByCreationKey(fenced.creationKey);
+                this.assertActiveContext(activeGen, activeCtx);
+                const draftRead = await this.persistence.readDraft(receipt.body.target, receipt.body.draftId);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('status' in draftRead) {
+                    throw this.fail('TRANSPORT_ERROR', 'Unexpected 304 when reading created page draft workspace.');
+                }
+                this.fencedOperations.delete(attemptKey);
+                this.applyDraftWorkspaceReceipt(receipt.body.pageId, receipt.body.target, draftRead.body, draftRead.etag, receipt.body.source);
+                await this.refreshPublishedAndLifecycleMetadata(receipt.body.pageId, receipt.body.target, draftRead.body.frozenReleaseRef, activeGen, activeCtx);
+                return this.snapshot;
+            }
+            if (fenced.operation === 'import-legacy-page' && fenced.creationKey) {
+                const legacyPageId = fenced.attemptKey.replace(/^import-legacy-page:/, '');
+                const legacyTarget = buildGovernedPageTarget(legacyPageId);
+                const draftLookup = await this.persistence.readDraftByCreationKey(legacyTarget, fenced.creationKey);
+                this.assertActiveContext(activeGen, activeCtx);
+                const draftRead = await this.persistence.readDraft(legacyTarget, draftLookup.body.draftRef);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('status' in draftRead) {
+                    throw this.fail('TRANSPORT_ERROR', 'Unexpected 304 when reading imported legacy draft workspace.');
+                }
+                if (fenced.childSources) {
+                    this.childSourcesByWidgetId.clear();
+                    for (const childSource of fenced.childSources) {
+                        this.childSourcesByWidgetId.set(childSource.widgetKey.toLowerCase(), childSource);
+                    }
+                }
+                this.fencedOperations.delete(attemptKey);
+                this.applyDraftWorkspaceReceipt(legacyPageId, legacyTarget, draftRead.body, draftRead.etag, fenced.source ?? this.snapshot.source);
+                await this.refreshPublishedAndLifecycleMetadata(legacyPageId, legacyTarget, draftRead.body.frozenReleaseRef, activeGen, activeCtx);
+                return this.snapshot;
+            }
+            const { rootTarget, pageId } = this.requireLoadedDraft();
+            if ((fenced.operation === 'save-revision' ||
+                fenced.operation === 'assign-scope' ||
+                fenced.operation === 'freeze-release') &&
+                fenced.draftId) {
+                const draftRead = await this.persistence.readDraft(rootTarget, fenced.draftId);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('body' in draftRead) {
+                    this.fencedOperations.delete(attemptKey);
+                    this.applyDraftWorkspaceReceipt(pageId, rootTarget, draftRead.body, draftRead.etag, this.snapshot.source);
+                    if (draftRead.body.frozenReleaseRef) {
+                        await this.refreshPublishedAndLifecycleMetadata(pageId, rootTarget, draftRead.body.frozenReleaseRef, activeGen, activeCtx);
+                    }
+                }
+                return this.snapshot;
+            }
+            if ((fenced.operation === 'submit-review' || fenced.operation === 'approve-release') &&
+                fenced.releaseId) {
+                const reviewRead = await this.persistence.readReview(rootTarget, fenced.releaseId);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('body' in reviewRead) {
+                    this.fencedOperations.delete(attemptKey);
+                    this.publishSnapshot({
+                        ...this.snapshot,
+                        reviewReceipt: reviewRead.body,
+                        reviewEtag: reviewRead.etag,
+                        fencedOperations: Object.fromEntries(this.fencedOperations),
+                        lastError: null,
+                    });
+                }
+                return this.snapshot;
+            }
+            if (fenced.operation === 'publish-release') {
+                const headRead = await this.persistence.readHead(rootTarget);
+                this.assertActiveContext(activeGen, activeCtx);
+                if ('body' in headRead) {
+                    this.fencedOperations.delete(attemptKey);
+                    this.publishSnapshot({
+                        ...this.snapshot,
+                        headReceipt: headRead.body,
+                        headEtag: headRead.etag,
+                        fencedOperations: Object.fromEntries(this.fencedOperations),
+                        lastError: null,
+                    });
+                }
+                return this.snapshot;
+            }
+            return this.snapshot;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx);
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    /**
+     * Reloads server state after a 409 Conflict or 412 Precondition Failed response.
+     */
+    async reloadAfterConflict() {
+        const { pageId, draftWorkspace } = this.requireLoadedDraft();
+        return this.openDraftWorkspace(pageId, draftWorkspace.draft.draftRef, {
+            source: this.snapshot.source,
+        });
+    }
+    async executePageCreation(command, activeGen = this.contextGeneration, activeCtx = this.contextKey) {
+        const attemptKey = `create-page:${command.creationKey}`;
+        this.assertNotFenced(attemptKey);
+        this.setBusy(true);
+        try {
+            const receipt = await this.persistence.createPage(command);
+            this.assertActiveContext(activeGen, activeCtx);
+            const draftRead = await this.persistence.readDraft(receipt.body.target, receipt.body.draftId);
+            this.assertActiveContext(activeGen, activeCtx);
+            if ('status' in draftRead) {
+                throw this.fail('TRANSPORT_ERROR', 'Unexpected 304 when reading created page draft workspace.');
+            }
+            this.childSourcesByWidgetId.clear();
+            this.applyDraftWorkspaceReceipt(receipt.body.pageId, receipt.body.target, draftRead.body, draftRead.etag, receipt.body.source);
+            await this.refreshPublishedAndLifecycleMetadata(receipt.body.pageId, receipt.body.target, draftRead.body.frozenReleaseRef, activeGen, activeCtx);
+            return receipt.body;
+        }
+        catch (error) {
+            throw this.handleOperationError(error, activeGen, activeCtx, {
+                operation: 'create-page',
+                attemptKey,
+                creationKey: command.creationKey,
+            });
+        }
+        finally {
+            if (!this.isStale(activeGen, activeCtx)) {
+                this.setBusy(false);
+            }
+        }
+    }
+    applyDraftWorkspaceReceipt(pageId, rootTarget, draftWorkspace, draftEtag, source) {
+        const primaryTarget = draftWorkspace.targets.find(target => target.target.componentType === rootTarget.componentType &&
+            target.target.componentId === rootTarget.componentId) ?? draftWorkspace.targets[0];
+        const workingDecoded = primaryTarget
+            ? decodePageAuthoringDocument(primaryTarget.working.document)
+            : null;
+        const baselineDecoded = primaryTarget
+            ? decodePageAuthoringDocument(primaryTarget.baseline.document)
+            : null;
+        const workingDocument = workingDecoded?.ok ? workingDecoded.value : this.snapshot.workingDocument;
+        const baselineDocument = baselineDecoded?.ok
+            ? baselineDecoded.value
+            : this.snapshot.baselineDocument;
+        const hasFrozenRelease = Boolean(draftWorkspace.frozenReleaseRef);
+        const keepReviewReceipt = hasFrozenRelease &&
+            this.snapshot.reviewReceipt?.releaseRef === draftWorkspace.frozenReleaseRef;
+        this.publishSnapshot({
+            ...this.snapshot,
+            pageId,
+            rootTarget,
+            source,
+            draftWorkspace,
+            draftEtag,
+            workingDocument,
+            baselineDocument,
+            reviewReceipt: keepReviewReceipt ? this.snapshot.reviewReceipt : null,
+            reviewEtag: keepReviewReceipt ? this.snapshot.reviewEtag : null,
+            childSources: Array.from(this.childSourcesByWidgetId.values()),
+            dirty: false,
+            fencedOperations: Object.fromEntries(this.fencedOperations),
+            lastError: null,
+        });
+    }
+    async refreshPublishedAndLifecycleMetadata(pageId, rootTarget, frozenReleaseRef, activeGen, activeCtx) {
+        let publishedSnapshot = this.snapshot.publishedSnapshot;
+        let publishedEtag = this.snapshot.publishedEtag;
+        try {
+            const publishedRead = await this.persistence.readPublishedPage(pageId);
+            if (this.isStale(activeGen, activeCtx)) {
+                return;
+            }
+            if ('body' in publishedRead) {
+                publishedSnapshot = publishedRead.body;
+                publishedEtag = publishedRead.etag;
+            }
+        }
+        catch {
+            // Newly created pages may not have a published release yet (404).
+        }
+        let headReceipt = this.snapshot.headReceipt;
+        let headEtag = this.snapshot.headEtag;
+        try {
+            const headRead = await this.persistence.readHead(rootTarget);
+            if (this.isStale(activeGen, activeCtx)) {
+                return;
+            }
+            if ('body' in headRead) {
+                headReceipt = headRead.body;
+                headEtag = headRead.etag;
+            }
+        }
+        catch {
+            // Unreleased pages may not have a head receipt yet.
+        }
+        let reviewReceipt = this.snapshot.reviewReceipt;
+        let reviewEtag = this.snapshot.reviewEtag;
+        if (frozenReleaseRef) {
+            try {
+                const reviewRead = await this.persistence.readReview(rootTarget, frozenReleaseRef);
+                if (this.isStale(activeGen, activeCtx)) {
+                    return;
+                }
+                if ('body' in reviewRead) {
+                    reviewReceipt = reviewRead.body;
+                    reviewEtag = reviewRead.etag;
+                }
+            }
+            catch {
+                // Review receipt may be unavailable if not yet created.
+            }
+        }
+        this.publishSnapshot({
+            ...this.snapshot,
+            publishedSnapshot,
+            publishedEtag,
+            headReceipt,
+            headEtag,
+            reviewReceipt,
+            reviewEtag,
+        });
+    }
+    requireCapability(key, message) {
+        if (!this.snapshot.capabilities[key]) {
+            throw this.fail('CAPABILITY_DENIED', message);
+        }
+    }
+    requireWorkingDocument() {
+        const doc = this.snapshot.workingDocument;
+        if (!doc) {
+            throw this.fail('DRAFT_NOT_LOADED', 'No governed page authoring document is currently loaded.');
+        }
+        return doc;
+    }
+    requireLoadedDraft() {
+        const { pageId, rootTarget, draftWorkspace, draftEtag } = this.snapshot;
+        if (!pageId || !rootTarget || !draftWorkspace || !draftEtag) {
+            throw this.fail('DRAFT_NOT_LOADED', 'No governed page draft workspace is currently loaded.');
+        }
+        return { pageId, rootTarget, draftWorkspace, draftEtag };
+    }
+    assertNotFenced(attemptKey) {
+        if (this.fencedOperations.has(attemptKey)) {
+            throw this.fail('OPERATION_FENCED', `Operation "${attemptKey}" is fenced due to an uncertain command outcome. Reconcile before retrying.`);
+        }
+    }
+    isStale(generation, contextKey) {
+        return generation !== this.contextGeneration || contextKey !== this.contextKey;
+    }
+    assertActiveContext(generation, contextKey) {
+        if (this.isStale(generation, contextKey)) {
+            throw new UiLayoutLifecycleContractError('CONTEXT_OBSOLETE');
+        }
+    }
+    handleOperationError(error, generation, contextKey, fenceContext) {
+        if (this.isStale(generation, contextKey)) {
+            return {
+                code: 'CONTEXT_OBSOLETE',
+                message: 'Operation response discarded because the runtime context changed.',
+            };
+        }
+        if (error instanceof UiLayoutLifecycleContractError ||
+            this.isLifecycleContractErrorLike(error)) {
+            if (error.code === 'COMMAND_OUTCOME_UNCERTAIN' && fenceContext) {
+                this.fencedOperations.set(fenceContext.attemptKey, {
+                    ...fenceContext,
+                    occurredAt: new Date().toISOString(),
+                });
+            }
+            const mapped = {
+                code: error.code === 'COMMAND_OUTCOME_UNCERTAIN'
+                    ? 'COMMAND_OUTCOME_UNCERTAIN'
+                    : error.code === 'CONTEXT_OBSOLETE'
+                        ? 'CONTEXT_OBSOLETE'
+                        : 'TRANSPORT_ERROR',
+                message: error.message,
+            };
+            this.publishSnapshot({
+                ...this.snapshot,
+                fencedOperations: Object.fromEntries(this.fencedOperations),
+                lastError: mapped,
+            });
+            return mapped;
+        }
+        if (error instanceof UiLayoutLifecycleHttpError) {
+            const code = error.status === 403
+                ? 'CAPABILITY_DENIED'
+                : error.status === 409
+                    ? 'CONFLICT'
+                    : error.status === 412
+                        ? 'PRECONDITION_FAILED'
+                        : 'TRANSPORT_ERROR';
+            const mapped = {
+                code,
+                message: error.message,
+                status: error.status,
+            };
+            this.publishSnapshot({ ...this.snapshot, lastError: mapped });
+            return mapped;
+        }
+        if (this.isWorkflowError(error)) {
+            this.publishSnapshot({ ...this.snapshot, lastError: error });
+            return error;
+        }
+        const fallback = {
+            code: 'TRANSPORT_ERROR',
+            message: error instanceof Error ? error.message : String(error),
+        };
+        this.publishSnapshot({ ...this.snapshot, lastError: fallback });
+        return fallback;
+    }
+    fail(code, message, diagnostics) {
+        const err = {
+            code,
+            message,
+            ...(diagnostics ? { diagnostics } : {}),
+        };
+        this.publishSnapshot({ ...this.snapshot, lastError: err });
+        return err;
+    }
+    isLifecycleContractErrorLike(value) {
+        return (value instanceof Error &&
+            value.name === 'UiLayoutLifecycleContractError' &&
+            'code' in value &&
+            typeof value.code === 'string');
+    }
+    isWorkflowError(value) {
+        return (value !== null &&
+            typeof value === 'object' &&
+            !(value instanceof Error) &&
+            'code' in value &&
+            'message' in value &&
+            typeof value.code === 'string');
+    }
+    setBusy(busy) {
+        this.publishSnapshot({ ...this.snapshot, busy });
+    }
+    publishSnapshot(next) {
+        this.stateSubject.next(next);
+    }
+}
 /*
  * Public API Surface of @praxisui/page-builder
  */
@@ -36013,4 +38131,4 @@ function providePraxisPageBuilderWidgets(widgets) {
  * Generated bundle index. Do not edit.
  */
-export { ComponentPaletteDialogComponent, ConfirmDialogComponent, ConnectionEditorComponent, DynamicPageBuilderComponent, DynamicPageConfigEditorComponent, FloatingToolbarComponent, PAGE_BUILDER_AGENTIC_AUTHORING_OPTIONS, PAGE_BUILDER_AI_CAPABILITIES, PAGE_BUILDER_COMPONENT_CONTEXT_PACK, PAGE_BUILDER_WIDGET_AI_CATALOGS, PLACEHOLDER, PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST, PRAXIS_PAGE_BUILDER_COMPONENT_METADATA, PageBuilderAgenticAuthoringService, PageConfigEditorComponent, TileToolbarComponent, UiCompositionResourcePreflightService, WidgetShellEditorComponent, clearWidgetAiCatalogs, compileUiCompositionPlan, getPageAiCatalog, getWidgetAiCapabilities, isComponentDocMeta, preflightUiCompositionPlan, preflightUiCompositionPlanResources, providePageBuilderWidgetAiCatalogs, providePraxisPageBuilderMetadata, providePraxisPageBuilderWidgets, registerWidgetAiCatalog, registerWidgetAiCatalogs, resolveUiCompositionPlanTemplate, validateUiCompositionPlan, verifyUiCompositionAuthoringSource };
+export { ComponentPaletteDialogComponent, ConfirmDialogComponent, ConnectionEditorComponent, DEFAULT_CORPORATE_NAVIGATION_GROUPS_TARGET, DEFAULT_GOVERNED_PAGE_CHILD_VALIDATORS, DEFAULT_GOVERNED_PAGE_PREVIEW_ADAPTERS, DynamicPageBuilderComponent, DynamicPageConfigEditorComponent, FloatingToolbarComponent, GOVERNED_PAGE_CAPABILITY_KEYS, GovernedPageNavigationController, GovernedPageWorkflowController, LEGACY_PUBLISHED_PAGE_STORAGE_PREFIX, PAGE_BUILDER_AGENTIC_AUTHORING_OPTIONS, PAGE_BUILDER_AI_CAPABILITIES, PAGE_BUILDER_COMPONENT_CONTEXT_PACK, PAGE_BUILDER_WIDGET_AI_CATALOGS, PLACEHOLDER, PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST, PRAXIS_PAGE_BUILDER_COMPONENT_METADATA, PageBuilderAgenticAuthoringService, PageConfigEditorComponent, PraxisPageCopyActionComponent, PraxisPageSaveAsComponent, TileToolbarComponent, UiCompositionResourcePreflightService, WidgetShellEditorComponent, clearWidgetAiCatalogs, compileUiCompositionPlan, createCorporateGovernedPagePersistenceAdapter, createLocalPageSaveAsAdapter, deriveGovernedPageCapabilities, getPageAiCatalog, getWidgetAiCapabilities, inspectLegacyPublishedPagePayload, isComponentDocMeta, preflightUiCompositionPlan, preflightUiCompositionPlanResources, providePageBuilderWidgetAiCatalogs, providePraxisPageBuilderMetadata, providePraxisPageBuilderWidgets, registerWidgetAiCatalog, registerWidgetAiCatalogs, resolveUiCompositionPlanTemplate, validateUiCompositionPlan, verifyUiCompositionAuthoringSource };