@praxisui/core 9.0.64 → 9.0.66

package/fesm2022/praxisui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, Injectable, inject, Inject, Optional, SkipSelf, makeEnvironmentProviders, APP_INITIALIZER, signal, computed, DestroyRef, ENVIRONMENT_INITIALIZER, ErrorHandler, Input, Directive, input, booleanAttribute, ChangeDetectionStrategy, EventEmitter, Output, SecurityContext, ViewContainerRef, Injector, isSignal, effect, SimpleChange, contentChild, HostBinding, output, ElementRef, ChangeDetectorRef, afterNextRender, HostListener, ViewChildren, ViewChild } from '@angular/core';
+import { Component, InjectionToken, Injectable, inject, Inject, Optional, SkipSelf, makeEnvironmentProviders, APP_INITIALIZER, signal, computed, DestroyRef, ENVIRONMENT_INITIALIZER, ErrorHandler, Input, Directive, input, booleanAttribute, ChangeDetectionStrategy, EventEmitter, Output, SecurityContext, ViewContainerRef, Injector, isSignal, effect, SimpleChange, ChangeDetectorRef, ElementRef, afterEveryRender, contentChild, HostBinding, output, afterNextRender, HostListener, ViewChildren, ViewChild } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpClient, HttpParams, HttpResponse, HttpContextToken, HTTP_INTERCEPTORS, withInterceptors } from '@angular/common/http';
 import { of, defer, throwError, from, EMPTY, BehaviorSubject, firstValueFrom, Subject, finalize as finalize$1, shareReplay as shareReplay$1, map as map$1, switchMap as switchMap$1, catchError as catchError$1, forkJoin } from 'rxjs';
@@ -22,19 +22,21 @@ import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import * as i8 from '@angular/material/tooltip';
+import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i3 from '@angular/material/progress-spinner';
+import * as i4$2 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i3$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i3$1 from '@angular/material/button-toggle';
+import * as i3$2 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$4 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
-import * as i8$1 from '@angular/material/chips';
+import * as i8 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i2$1 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -27539,7 +27541,7 @@ class SurfaceOpenActionEditorComponent {
         </mat-form-field>
       </div>
     </div>
-  `, isInline: true, styles: [".surface-editor{display:grid;gap:14px;min-width:0}.surface-section{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.surface-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}.surface-section-title{font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);margin-bottom:0}.surface-section-header .surface-section-title{margin-bottom:0}.surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px 16px;min-width:0}.surface-preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.surface-span-2{grid-column:span 2}.surface-span-all{width:100%;min-width:0}.surface-component-meta{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-component-title{font-weight:600;color:var(--md-sys-color-on-surface)}.surface-component-description,.surface-empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-bindings{display:grid;gap:10px;min-width:0}.surface-binding-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.15fr) minmax(min(240px,100%),1.25fr) minmax(128px,.55fr) auto;gap:10px;align-items:start;min-width:0;padding:10px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-binding-row mat-form-field:nth-child(4){grid-column:1 / -2}.surface-binding-remove{color:var(--md-sys-color-error)}.surface-guidance{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 18%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-guidance__item{overflow-wrap:anywhere}.surface-guidance__item--primary{color:var(--md-sys-color-on-surface)}mat-form-field{width:100%;min-width:0}@media(max-width:960px){.surface-section{padding:12px}.surface-span-2{grid-column:1 / -1}.surface-binding-row{grid-template-columns:minmax(0,1fr)}.surface-binding-row mat-form-field:nth-child(4){grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.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"] }] });
+  `, isInline: true, styles: [".surface-editor{display:grid;gap:14px;min-width:0}.surface-section{display:grid;gap:10px;min-width:0;padding:14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface-container-low)}.surface-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:0}.surface-section-title{font-size:12px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant);margin-bottom:0}.surface-section-header .surface-section-title{margin-bottom:0}.surface-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px 16px;min-width:0}.surface-preset-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.surface-span-2{grid-column:span 2}.surface-span-all{width:100%;min-width:0}.surface-component-meta{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-component-title{font-weight:600;color:var(--md-sys-color-on-surface)}.surface-component-description,.surface-empty{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-bindings{display:grid;gap:10px;min-width:0}.surface-binding-row{display:grid;grid-template-columns:minmax(min(220px,100%),1.15fr) minmax(min(240px,100%),1.25fr) minmax(128px,.55fr) auto;gap:10px;align-items:start;min-width:0;padding:10px;border-radius:8px;background:var(--md-sys-color-surface-container)}.surface-binding-row mat-form-field:nth-child(4){grid-column:1 / -2}.surface-binding-remove{color:var(--md-sys-color-error)}.surface-guidance{display:grid;gap:4px;padding:10px 12px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 18%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45}.surface-guidance__item{overflow-wrap:anywhere}.surface-guidance__item--primary{color:var(--md-sys-color-on-surface)}mat-form-field{width:100%;min-width:0}@media(max-width:960px){.surface-section{padding:12px}.surface-span-2{grid-column:1 / -1}.surface-binding-row{grid-template-columns:minmax(0,1fr)}.surface-binding-row mat-form-field:nth-child(4){grid-column:auto}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: SurfaceOpenActionEditorComponent, decorators: [{
             type: Component,
@@ -33132,6 +33134,22 @@ function isRecord(value) {
     return !!value && typeof value === 'object' && !Array.isArray(value);
 }
 
+/** Private rendered geometry shared by shell recovery and canvas authoring. */
+function measureWidgetShellHeight(shell) {
+    const body = shell.querySelector(':scope > .pdx-shell-body');
+    if (!body || body.classList.contains('hidden') || !shell.getBoundingClientRect().height)
+        return undefined;
+    const header = shell.querySelector(':scope > .pdx-shell-header');
+    const bodyStyle = getComputedStyle(body);
+    const padding = (parseFloat(bodyStyle.paddingTop) || 0) + (parseFloat(bodyStyle.paddingBottom) || 0);
+    const shellStyle = getComputedStyle(shell);
+    const chrome = (header?.getBoundingClientRect().height || 0)
+        + (parseFloat(shellStyle.borderTopWidth) || 0) + (parseFloat(shellStyle.borderBottomWidth) || 0);
+    // Structural viewport reserve only; not business-component UX certification.
+    const reserve = Math.min(160, Math.max(0, body.scrollHeight - padding));
+    return { minimum: Math.ceil(chrome + padding + reserve), available: shell.getBoundingClientRect().height };
+}
+
 const WIDGET_SHELL_I18N_NAMESPACE = 'widgetShell';
 const WIDGET_SHELL_I18N_CONFIG = {
     namespaces: {
@@ -33334,6 +33352,70 @@ const BUILTIN_SHELL_PRESETS = {
 };
 class WidgetShellComponent {
     i18n = inject(PraxisI18nService);
+    changeDetector = inject(ChangeDetectorRef);
+    destroyRef = inject(DestroyRef);
+    element = inject(ElementRef);
+    scrollRecovery = signal(false, ...(ngDevMode ? [{ debugName: "scrollRecovery" }] : /* istanbul ignore next */ []));
+    scrollResizeObserver;
+    scrollMutationObserver;
+    scrollObservedElements = [];
+    scrollObservedBody;
+    scrollFrame;
+    constructor() {
+        afterEveryRender({ read: () => this.observeScrollGeometry() });
+        this.destroyRef.onDestroy(() => this.disconnectScrollGeometry());
+    }
+    disconnectScrollGeometry() {
+        this.scrollResizeObserver?.disconnect();
+        this.scrollMutationObserver?.disconnect();
+        this.scrollObservedElements = [];
+        this.scrollObservedBody = undefined;
+        if (this.scrollFrame !== undefined)
+            cancelAnimationFrame(this.scrollFrame);
+        this.scrollFrame = undefined;
+    }
+    observeScrollGeometry() {
+        if (this.shell?.bodyLayout !== 'scroll' || this.collapsed || this.expanded || this.fullscreen) {
+            this.disconnectScrollGeometry();
+            this.scrollRecovery.set(false);
+            return;
+        }
+        const shell = this.element.nativeElement.querySelector(':scope > .pdx-shell');
+        const body = shell?.querySelector(':scope > .pdx-shell-body');
+        if (!shell || !body)
+            return;
+        const schedule = () => {
+            if (this.scrollFrame !== undefined || this.destroyRef.destroyed)
+                return;
+            this.scrollFrame = requestAnimationFrame(() => {
+                this.scrollFrame = undefined;
+                if (!this.destroyRef.destroyed)
+                    this.observeScrollGeometry();
+            });
+        };
+        const elements = [shell, ...Array.from(shell.children), ...Array.from(body.children)];
+        if (typeof ResizeObserver === 'function' && (elements.length !== this.scrollObservedElements.length
+            || elements.some((element, index) => element !== this.scrollObservedElements[index]))) {
+            this.scrollResizeObserver ??= new ResizeObserver(schedule);
+            this.scrollResizeObserver.disconnect();
+            elements.forEach(element => this.scrollResizeObserver.observe(element));
+            this.scrollObservedElements = elements;
+        }
+        if (typeof MutationObserver === 'function' && this.scrollObservedBody !== body) {
+            this.scrollMutationObserver ??= new MutationObserver(schedule);
+            this.scrollMutationObserver.disconnect();
+            this.scrollMutationObserver.observe(body, { subtree: true, childList: true, characterData: true, attributes: true });
+            this.scrollObservedBody = body;
+        }
+        const measure = measureWidgetShellHeight(shell);
+        const recovery = !!measure && measure.minimum > Math.ceil(measure.available);
+        if (this.scrollRecovery() !== recovery) {
+            this.scrollRecovery.set(recovery);
+            // A scroll position in the outer shell must not hide its header after recovery.
+            if (!recovery)
+                shell.scrollTop = 0;
+        }
+    }
     get hostCollapsed() {
         return this.collapsed && !this.expanded && !this.fullscreen;
     }
@@ -33362,6 +33444,7 @@ class WidgetShellComponent {
     collapsed = false;
     expanded = false;
     fullscreen = false;
+    overlayReturnFocus = null;
     initializedWindowState = false;
     lastWindowStateInputs;
     ngOnChanges(changes) {
@@ -33427,7 +33510,17 @@ class WidgetShellComponent {
     }
     onAction(action, ev) {
         ev.stopPropagation();
+        if (action.disabled)
+            return;
+        const wasOverlay = this.expanded || this.fullscreen;
+        if (!wasOverlay && (action.id === 'expand' || action.id === 'fullscreen')) {
+            this.overlayReturnFocus =
+                ev.target instanceof Element ? ev.target.closest('button') : null;
+        }
         const handled = this.handleWindowAction(action);
+        if (wasOverlay && !this.expanded && !this.fullscreen) {
+            this.restoreOverlayFocus();
+        }
         const payload = action.payload ?? handled?.payload;
         const event = {
             id: action.id,
@@ -33480,6 +33573,16 @@ class WidgetShellComponent {
         }
         this.dragSurfaceKeydown.emit(event);
     }
+    onAuthoringDragPointerDown(event) {
+        if (!this.dragSurfaceInteractive)
+            return;
+        this.dragSurfacePointerDown.emit(event);
+    }
+    onAuthoringDragKeydown(event) {
+        if (!this.dragSurfaceInteractive)
+            return;
+        this.dragSurfaceKeydown.emit(event);
+    }
     stopIfExpanded(ev) {
         if (this.expanded || this.fullscreen)
             ev.stopPropagation();
@@ -33487,6 +33590,27 @@ class WidgetShellComponent {
     closeOverlay() {
         this.expanded = false;
         this.fullscreen = false;
+        this.restoreOverlayFocus();
+    }
+    onOverlayEscape(event) {
+        if (event.defaultPrevented || (!this.expanded && !this.fullscreen))
+            return;
+        // Connected overlays such as MatSelect consume Escape at the CDK body
+        // dispatcher. A task (not a microtask between native listeners) lets the
+        // complete event propagation finish before treating it as a shell command.
+        setTimeout(() => {
+            if (this.destroyRef.destroyed || event.defaultPrevented || (!this.expanded && !this.fullscreen))
+                return;
+            event.preventDefault();
+            this.closeOverlay();
+            this.changeDetector.markForCheck();
+        }, 0);
+    }
+    restoreOverlayFocus() {
+        if (this.overlayReturnFocus?.isConnected) {
+            this.overlayReturnFocus.focus({ preventScroll: true });
+        }
+        this.overlayReturnFocus = null;
     }
     moreActionsLabel() {
         return this.t('controls.moreActions', 'Mais ações');
@@ -33598,9 +33722,19 @@ class WidgetShellComponent {
         return this.i18n.t(key, undefined, fallback, WIDGET_SHELL_I18N_NAMESPACE);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: WidgetShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: WidgetShellComponent, isStandalone: true, selector: "praxis-widget-shell", inputs: { shell: "shell", context: "context", dragSurfaceEnabled: "dragSurfaceEnabled", dragSurfaceLabel: "dragSurfaceLabel" }, outputs: { action: "action", dragSurfacePointerDown: "dragSurfacePointerDown", dragSurfaceKeydown: "dragSurfaceKeydown" }, host: { properties: { "class.pdx-widget-shell-collapsed": "this.hostCollapsed" } }, providers: [providePraxisI18nConfig(WIDGET_SHELL_I18N_CONFIG)], queries: [{ propertyName: "loader", first: true, predicate: DynamicWidgetLoaderDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: WidgetShellComponent, isStandalone: true, selector: "praxis-widget-shell", inputs: { shell: "shell", context: "context", dragSurfaceEnabled: "dragSurfaceEnabled", dragSurfaceLabel: "dragSurfaceLabel" }, outputs: { action: "action", dragSurfacePointerDown: "dragSurfacePointerDown", dragSurfaceKeydown: "dragSurfaceKeydown" }, host: { listeners: { "keydown.escape": "onOverlayEscape($event)" }, properties: { "class.pdx-widget-shell-collapsed": "this.hostCollapsed" } }, providers: [providePraxisI18nConfig(WIDGET_SHELL_I18N_CONFIG)], queries: [{ propertyName: "loader", first: true, predicate: DynamicWidgetLoaderDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: `
+    @if (expanded || fullscreen) {
+      <div
+        class="pdx-shell-overlay-surface"
+        [class.expanded]="expanded"
+        [class.fullscreen]="fullscreen"
+        [style.border-radius]="fullscreen ? null : appearance?.card?.borderRadius || null"
+        aria-hidden="true"
+      ></div>
+    }
     <section
       class="pdx-shell"
+      [attr.tabindex]="expanded || fullscreen ? -1 : null"
       [class.no-shell]="!shellEnabled"
       [class.dashboard]="shellEnabled"
       [class.collapsed]="collapsed"
@@ -33608,6 +33742,7 @@ class WidgetShellComponent {
       [class.fullscreen]="fullscreen"
       [class.body-fill]="shell?.bodyLayout === 'fill'"
       [class.body-scroll]="shell?.bodyLayout === 'scroll'"
+      [class.pdx-shell--scroll-recovery]="scrollRecovery() && !collapsed && !expanded && !fullscreen"
       [style.--pdx-shell-card-bg]="appearance?.card?.background || null"
       [style.--pdx-shell-card-border]="appearance?.card?.borderColor || null"
       [style.--pdx-shell-card-radius]="appearance?.card?.borderRadius || null"
@@ -33647,11 +33782,11 @@ class WidgetShellComponent {
               <mat-icon [praxisIcon]="shell?.icon"></mat-icon>
             }
             <div class="pdx-shell-text">
-              <div class="pdx-shell-title-text">
+              <div class="pdx-shell-title-text" [matTooltip]="shellText(shell?.title)">
                 {{ shellText(shell?.title) }}
               </div>
               @if (shell?.subtitle) {
-                <div class="pdx-shell-subtitle">
+                <div class="pdx-shell-subtitle" [matTooltip]="shellText(shell?.subtitle)">
                   {{ shellText(shell?.subtitle) }}
                 </div>
               }
@@ -33765,6 +33900,7 @@ class WidgetShellComponent {
             @for (action of overflowHeaderActions; track action.id) {
               <button
                 mat-menu-item
+                [disabled]="action.disabled"
                 [attr.aria-pressed]="
                   action.pressed == null ? null : action.pressed
                 "
@@ -33782,6 +33918,18 @@ class WidgetShellComponent {
             }
           </mat-menu>
         </header>
+      } @else if (dragSurfaceInteractive) {
+        <button
+          class="pdx-shell-authoring-drag"
+          praxisIconButton="ms:drag_indicator"
+          size="compact"
+          type="button"
+          [matTooltip]="dragSurfaceLabel || ''"
+          matTooltipPosition="above"
+          [attr.aria-label]="dragSurfaceLabel"
+          (pointerdown)="onAuthoringDragPointerDown($event)"
+          (keydown)="onAuthoringDragKeydown($event)"
+        ></button>
       }
       <div class="pdx-shell-body" [class.hidden]="collapsed">
         <ng-content></ng-content>
@@ -33790,7 +33938,7 @@ class WidgetShellComponent {
     @if (expanded || fullscreen) {
       <div class="pdx-shell-backdrop" (click)="closeOverlay()"></div>
     }
-  `, isInline: true, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var( --pdx-shell-card-bg, var( --pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low) ) );border:1px solid var( --pdx-shell-card-border, var( --pdx-dashboard-card-border, var(--md-sys-color-outline-variant) ) );border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var( --pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06) );overflow:hidden}.pdx-shell-header{display:flex;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var( --pdx-shell-header-bg, var(--md-sys-color-surface-container) )}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);color:var( --pdx-shell-subtitle-color, var(--md-sys-color-on-surface-variant, currentColor) );white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;align-items:center;gap:4px}.pdx-shell-window-actions{margin-left:auto}@media(max-width:640px){.pdx-shell-header,.pdx-shell-title{align-items:flex-start}.pdx-shell-text{display:grid;gap:2px}.pdx-shell-title-text,.pdx-shell-subtitle{display:-webkit-box;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical}.pdx-shell-title-text,.pdx-shell-subtitle{-webkit-line-clamp:2}.pdx-shell-actions{flex:0 0 auto}}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-shell-action--pressed:not(.praxis-icon-button){color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body{overflow:auto}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{box-sizing:border-box;position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var( --pdx-shell-card-bg, var( --pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low) ) );border:1px solid var( --pdx-shell-card-border, var( --pdx-dashboard-card-border, var(--md-sys-color-outline-variant) ) );border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var( --pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06) );overflow:hidden}.pdx-shell-header{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var( --pdx-shell-header-bg, var(--md-sys-color-surface-container) )}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-authoring-drag{flex:0 0 auto;align-self:flex-start;margin:4px 6px 0;z-index:2;cursor:grab;touch-action:none}.pdx-shell-authoring-drag:active{cursor:grabbing}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 14rem;max-width:100%;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{flex:0 0 auto;color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0;flex:1}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);color:var( --pdx-shell-subtitle-color, var(--md-sys-color-on-surface-variant, currentColor) );white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%}.pdx-shell-actions{margin-left:auto;min-width:0}.pdx-shell-actions>button{max-width:100%}.pdx-shell-window-actions{margin-left:auto}.pdx-shell-text{display:grid;gap:2px}.pdx-shell-title-text,.pdx-shell-subtitle{display:-webkit-box;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-shell-action--pressed:not(.praxis-icon-button){color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.body-scroll.pdx-shell--scroll-recovery{overflow:auto}.pdx-shell.body-scroll.pdx-shell--scroll-recovery>.pdx-shell-body{flex:0 0 auto;overflow:visible}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded,.pdx-shell-overlay-surface.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen,.pdx-shell-overlay-surface.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-overlay-surface{background:var(--md-sys-color-surface);border-radius:var(--pdx-dashboard-card-radius, 16px);pointer-events:none}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: 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: "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: WidgetShellComponent, decorators: [{
             type: Component,
@@ -33802,9 +33950,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatTooltipModule,
                         PraxisIconButtonComponent,
                         PraxisIconDirective,
-                    ], providers: [providePraxisI18nConfig(WIDGET_SHELL_I18N_CONFIG)], template: `
+                    ], providers: [providePraxisI18nConfig(WIDGET_SHELL_I18N_CONFIG)], host: { '(keydown.escape)': 'onOverlayEscape($event)' }, template: `
+    @if (expanded || fullscreen) {
+      <div
+        class="pdx-shell-overlay-surface"
+        [class.expanded]="expanded"
+        [class.fullscreen]="fullscreen"
+        [style.border-radius]="fullscreen ? null : appearance?.card?.borderRadius || null"
+        aria-hidden="true"
+      ></div>
+    }
     <section
       class="pdx-shell"
+      [attr.tabindex]="expanded || fullscreen ? -1 : null"
       [class.no-shell]="!shellEnabled"
       [class.dashboard]="shellEnabled"
       [class.collapsed]="collapsed"
@@ -33812,6 +33970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       [class.fullscreen]="fullscreen"
       [class.body-fill]="shell?.bodyLayout === 'fill'"
       [class.body-scroll]="shell?.bodyLayout === 'scroll'"
+      [class.pdx-shell--scroll-recovery]="scrollRecovery() && !collapsed && !expanded && !fullscreen"
       [style.--pdx-shell-card-bg]="appearance?.card?.background || null"
       [style.--pdx-shell-card-border]="appearance?.card?.borderColor || null"
       [style.--pdx-shell-card-radius]="appearance?.card?.borderRadius || null"
@@ -33851,11 +34010,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <mat-icon [praxisIcon]="shell?.icon"></mat-icon>
             }
             <div class="pdx-shell-text">
-              <div class="pdx-shell-title-text">
+              <div class="pdx-shell-title-text" [matTooltip]="shellText(shell?.title)">
                 {{ shellText(shell?.title) }}
               </div>
               @if (shell?.subtitle) {
-                <div class="pdx-shell-subtitle">
+                <div class="pdx-shell-subtitle" [matTooltip]="shellText(shell?.subtitle)">
                   {{ shellText(shell?.subtitle) }}
                 </div>
               }
@@ -33969,6 +34128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             @for (action of overflowHeaderActions; track action.id) {
               <button
                 mat-menu-item
+                [disabled]="action.disabled"
                 [attr.aria-pressed]="
                   action.pressed == null ? null : action.pressed
                 "
@@ -33986,6 +34146,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }
           </mat-menu>
         </header>
+      } @else if (dragSurfaceInteractive) {
+        <button
+          class="pdx-shell-authoring-drag"
+          praxisIconButton="ms:drag_indicator"
+          size="compact"
+          type="button"
+          [matTooltip]="dragSurfaceLabel || ''"
+          matTooltipPosition="above"
+          [attr.aria-label]="dragSurfaceLabel"
+          (pointerdown)="onAuthoringDragPointerDown($event)"
+          (keydown)="onAuthoringDragKeydown($event)"
+        ></button>
       }
       <div class="pdx-shell-body" [class.hidden]="collapsed">
         <ng-content></ng-content>
@@ -33994,8 +34166,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
     @if (expanded || fullscreen) {
       <div class="pdx-shell-backdrop" (click)="closeOverlay()"></div>
     }
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var( --pdx-shell-card-bg, var( --pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low) ) );border:1px solid var( --pdx-shell-card-border, var( --pdx-dashboard-card-border, var(--md-sys-color-outline-variant) ) );border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var( --pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06) );overflow:hidden}.pdx-shell-header{display:flex;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var( --pdx-shell-header-bg, var(--md-sys-color-surface-container) )}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);color:var( --pdx-shell-subtitle-color, var(--md-sys-color-on-surface-variant, currentColor) );white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;align-items:center;gap:4px}.pdx-shell-window-actions{margin-left:auto}@media(max-width:640px){.pdx-shell-header,.pdx-shell-title{align-items:flex-start}.pdx-shell-text{display:grid;gap:2px}.pdx-shell-title-text,.pdx-shell-subtitle{display:-webkit-box;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical}.pdx-shell-title-text,.pdx-shell-subtitle{-webkit-line-clamp:2}.pdx-shell-actions{flex:0 0 auto}}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-shell-action--pressed:not(.praxis-icon-button){color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body{overflow:auto}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"] }]
-        }], propDecorators: { hostCollapsed: [{
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%}:host(.pdx-widget-shell-collapsed){height:auto}.pdx-shell{box-sizing:border-box;position:relative;height:100%;display:flex;flex-direction:column}.pdx-shell.no-shell{background:transparent;border:none;border-radius:0;box-shadow:none}.pdx-shell.dashboard{background:var( --pdx-shell-card-bg, var( --pdx-dashboard-card-bg, var(--md-sys-color-surface-container-low) ) );border:1px solid var( --pdx-shell-card-border, var( --pdx-dashboard-card-border, var(--md-sys-color-outline-variant) ) );border-radius:var(--pdx-shell-card-radius, 12px);box-shadow:var( --pdx-shell-card-shadow, 0 4px 12px rgba(15, 23, 42, .06) );overflow:hidden}.pdx-shell-header{flex-shrink:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 10px 7px;border-bottom:1px solid var(--pdx-shell-header-border, var(--md-sys-color-outline-variant));background:var( --pdx-shell-header-bg, var(--md-sys-color-surface-container) )}.pdx-shell-header--drag-enabled{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.pdx-shell-header--drag-enabled:active{cursor:grabbing}.pdx-shell-header--drag-enabled:focus-visible{outline:2px solid color-mix(in srgb,var(--md-sys-color-primary) 72%,white 28%);outline-offset:-2px}.pdx-shell-authoring-drag{flex:0 0 auto;align-self:flex-start;margin:4px 6px 0;z-index:2;cursor:grab;touch-action:none}.pdx-shell-authoring-drag:active{cursor:grabbing}.pdx-shell-title{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 14rem;max-width:100%;color:var(--pdx-shell-title-color, inherit)}.pdx-shell-title mat-icon{flex:0 0 auto;color:var(--pdx-shell-icon-color, currentColor)}.pdx-shell-text{min-width:0;flex:1}.pdx-shell-title-text{font-weight:var(--pdx-shell-title-weight, 600);font-size:var(--pdx-shell-title-size, 13px);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-subtitle{font-size:var(--pdx-shell-subtitle-size, 11px);color:var( --pdx-shell-subtitle-color, var(--md-sys-color-on-surface-variant, currentColor) );white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdx-shell-actions,.pdx-shell-window-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;max-width:100%}.pdx-shell-actions{margin-left:auto;min-width:0}.pdx-shell-actions>button{max-width:100%}.pdx-shell-window-actions{margin-left:auto}.pdx-shell-text{display:grid;gap:2px}.pdx-shell-title-text,.pdx-shell-subtitle{display:-webkit-box;white-space:normal;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.pdx-action-outlined{border:1px solid var(--md-sys-color-outline-variant);border-radius:999px;padding:0 10px}.pdx-action-text{padding:0 8px}.pdx-shell-action--pressed:not(.praxis-icon-button){color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}.pdx-action-label{font-size:12px;font-weight:500}.pdx-shell-body{flex:1;min-height:0;padding:var(--pdx-shell-body-padding, 8px 10px 10px 10px);background:var(--pdx-shell-body-bg, transparent);color:var(--pdx-shell-body-color, inherit)}.pdx-shell.no-shell .pdx-shell-body{padding:0}.pdx-shell-body.hidden{display:none}.pdx-shell.collapsed{height:auto}.pdx-shell.collapsed .pdx-shell-header{border-bottom-color:transparent}.pdx-shell.body-fill .pdx-shell-body,.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.expanded .pdx-shell-body,.pdx-shell.fullscreen .pdx-shell-body{overflow:auto;display:flex;flex-direction:column;min-height:0}.pdx-shell.collapsed .pdx-shell-body{display:none}.pdx-shell.body-fill .pdx-shell-body{overflow:hidden}.pdx-shell.body-scroll .pdx-shell-body,.pdx-shell.body-scroll.pdx-shell--scroll-recovery{overflow:auto}.pdx-shell.body-scroll.pdx-shell--scroll-recovery>.pdx-shell-body{flex:0 0 auto;overflow:visible}.pdx-shell.body-fill .pdx-shell-body>*,.pdx-shell.body-scroll .pdx-shell-body>*,.pdx-shell.expanded .pdx-shell-body>*,.pdx-shell.fullscreen .pdx-shell-body>*{flex:1 1 auto;min-height:0;width:100%}.pdx-shell.expanded,.pdx-shell-overlay-surface.expanded{position:fixed;top:10vh;left:50%;width:min(920px,92vw);height:min(640px,82vh);transform:translate(-50%);z-index:var(--praxis-layer-widget-shell-expanded, 1290);box-shadow:var(--mat-elevation-level8)}.pdx-shell.fullscreen,.pdx-shell-overlay-surface.fullscreen{position:fixed;inset:0;width:auto;height:auto;transform:none;border-radius:0;z-index:var(--praxis-layer-widget-shell-fullscreen, 1291);box-shadow:var(--mat-elevation-level8)}.pdx-shell-overlay-surface{background:var(--md-sys-color-surface);border-radius:var(--pdx-dashboard-card-radius, 16px);pointer-events:none}.pdx-shell-backdrop{position:fixed;inset:0;z-index:var(--praxis-layer-widget-shell-backdrop, 1280);background:#0000008c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hostCollapsed: [{
                 type: HostBinding,
                 args: ['class.pdx-widget-shell-collapsed']
             }], shell: [{
@@ -38450,6 +38622,11 @@ function clone(value) {
 }
 
 class DynamicWidgetContextToolbarComponent {
+    showResize = input(false, ...(ngDevMode ? [{ debugName: "showResize" }] : /* istanbul ignore next */ []));
+    resizeLabel = input('', ...(ngDevMode ? [{ debugName: "resizeLabel" }] : /* istanbul ignore next */ []));
+    resizeControls = input(null, ...(ngDevMode ? [{ debugName: "resizeControls" }] : /* istanbul ignore next */ []));
+    resizeExpanded = input(false, ...(ngDevMode ? [{ debugName: "resizeExpanded" }] : /* istanbul ignore next */ []));
+    resize = output();
     toolbarLabel = '';
     contextLabel = '';
     contextTooltip = '';
@@ -38471,7 +38648,7 @@ class DynamicWidgetContextToolbarComponent {
     shellSettings = new EventEmitter();
     remove = new EventEmitter();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicWidgetContextToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicWidgetContextToolbarComponent, isStandalone: true, selector: "praxis-dynamic-widget-context-toolbar", inputs: { toolbarLabel: { classPropertyName: "toolbarLabel", publicName: "toolbarLabel", isSignal: false, isRequired: false, transformFunction: null }, contextLabel: { classPropertyName: "contextLabel", publicName: "contextLabel", isSignal: false, isRequired: false, transformFunction: null }, contextTooltip: { classPropertyName: "contextTooltip", publicName: "contextTooltip", isSignal: false, isRequired: false, transformFunction: null }, showAssistant: { classPropertyName: "showAssistant", publicName: "showAssistant", isSignal: false, isRequired: false, transformFunction: null }, assistantLabel: { classPropertyName: "assistantLabel", publicName: "assistantLabel", isSignal: false, isRequired: false, transformFunction: null }, assistantTooltip: { classPropertyName: "assistantTooltip", publicName: "assistantTooltip", isSignal: false, isRequired: false, transformFunction: null }, showComponentSettings: { classPropertyName: "showComponentSettings", publicName: "showComponentSettings", isSignal: false, isRequired: false, transformFunction: null }, componentSettingsBusy: { classPropertyName: "componentSettingsBusy", publicName: "componentSettingsBusy", isSignal: true, isRequired: false, transformFunction: null }, componentSettingsLabel: { classPropertyName: "componentSettingsLabel", publicName: "componentSettingsLabel", isSignal: false, isRequired: false, transformFunction: null }, componentSettingsTooltip: { classPropertyName: "componentSettingsTooltip", publicName: "componentSettingsTooltip", isSignal: false, isRequired: false, transformFunction: null }, showShellSettings: { classPropertyName: "showShellSettings", publicName: "showShellSettings", isSignal: false, isRequired: false, transformFunction: null }, shellSettingsLabel: { classPropertyName: "shellSettingsLabel", publicName: "shellSettingsLabel", isSignal: false, isRequired: false, transformFunction: null }, shellSettingsTooltip: { classPropertyName: "shellSettingsTooltip", publicName: "shellSettingsTooltip", isSignal: false, isRequired: false, transformFunction: null }, showRemove: { classPropertyName: "showRemove", publicName: "showRemove", isSignal: false, isRequired: false, transformFunction: null }, moreActionsLabel: { classPropertyName: "moreActionsLabel", publicName: "moreActionsLabel", isSignal: false, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { assistant: "assistant", componentSettings: "componentSettings", shellSettings: "shellSettings", remove: "remove" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicWidgetContextToolbarComponent, isStandalone: true, selector: "praxis-dynamic-widget-context-toolbar", inputs: { showResize: { classPropertyName: "showResize", publicName: "showResize", isSignal: true, isRequired: false, transformFunction: null }, resizeLabel: { classPropertyName: "resizeLabel", publicName: "resizeLabel", isSignal: true, isRequired: false, transformFunction: null }, resizeControls: { classPropertyName: "resizeControls", publicName: "resizeControls", isSignal: true, isRequired: false, transformFunction: null }, resizeExpanded: { classPropertyName: "resizeExpanded", publicName: "resizeExpanded", isSignal: true, isRequired: false, transformFunction: null }, toolbarLabel: { classPropertyName: "toolbarLabel", publicName: "toolbarLabel", isSignal: false, isRequired: false, transformFunction: null }, contextLabel: { classPropertyName: "contextLabel", publicName: "contextLabel", isSignal: false, isRequired: false, transformFunction: null }, contextTooltip: { classPropertyName: "contextTooltip", publicName: "contextTooltip", isSignal: false, isRequired: false, transformFunction: null }, showAssistant: { classPropertyName: "showAssistant", publicName: "showAssistant", isSignal: false, isRequired: false, transformFunction: null }, assistantLabel: { classPropertyName: "assistantLabel", publicName: "assistantLabel", isSignal: false, isRequired: false, transformFunction: null }, assistantTooltip: { classPropertyName: "assistantTooltip", publicName: "assistantTooltip", isSignal: false, isRequired: false, transformFunction: null }, showComponentSettings: { classPropertyName: "showComponentSettings", publicName: "showComponentSettings", isSignal: false, isRequired: false, transformFunction: null }, componentSettingsBusy: { classPropertyName: "componentSettingsBusy", publicName: "componentSettingsBusy", isSignal: true, isRequired: false, transformFunction: null }, componentSettingsLabel: { classPropertyName: "componentSettingsLabel", publicName: "componentSettingsLabel", isSignal: false, isRequired: false, transformFunction: null }, componentSettingsTooltip: { classPropertyName: "componentSettingsTooltip", publicName: "componentSettingsTooltip", isSignal: false, isRequired: false, transformFunction: null }, showShellSettings: { classPropertyName: "showShellSettings", publicName: "showShellSettings", isSignal: false, isRequired: false, transformFunction: null }, shellSettingsLabel: { classPropertyName: "shellSettingsLabel", publicName: "shellSettingsLabel", isSignal: false, isRequired: false, transformFunction: null }, shellSettingsTooltip: { classPropertyName: "shellSettingsTooltip", publicName: "shellSettingsTooltip", isSignal: false, isRequired: false, transformFunction: null }, showRemove: { classPropertyName: "showRemove", publicName: "showRemove", isSignal: false, isRequired: false, transformFunction: null }, moreActionsLabel: { classPropertyName: "moreActionsLabel", publicName: "moreActionsLabel", isSignal: false, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { resize: "resize", assistant: "assistant", componentSettings: "componentSettings", shellSettings: "shellSettings", remove: "remove" }, ngImport: i0, template: `
     <div
       class="pdx-widget-context-toolbar"
       [class.pdx-widget-context-toolbar--with-context]="!!contextLabel"
@@ -38490,6 +38667,13 @@ class DynamicWidgetContextToolbarComponent {
           {{ contextLabel }}
         </span>
       }
+      @if (showResize()) {
+        <button praxisIconButton="ms:open_in_full" type="button"
+          data-testid="dynamic-widget-resize"
+          [matTooltip]="resizeLabel()" [attr.aria-label]="resizeLabel()"
+          [attr.aria-controls]="resizeControls()" [attr.aria-expanded]="resizeExpanded()"
+          (click)="resize.emit()"></button>
+      }
       @if (showAssistant) {
         <button
           praxisIconButton="auto_awesome"
@@ -38543,7 +38727,7 @@ class DynamicWidgetContextToolbarComponent {
         </mat-menu>
       }
     </div>
-  `, isInline: true, styles: [".pdx-widget-context-toolbar{position:absolute;top:-19px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:2px 4px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 88%,transparent);box-shadow:0 10px 28px #0f172a38,0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pdx-widget-context-toolbar--with-context{border-radius:18px}.pdx-widget-context-toolbar__context{display:inline-flex;align-items:center;align-self:stretch;max-width:180px;padding:0 8px 0 10px;border-right:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 64%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.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: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".pdx-widget-context-toolbar{position:absolute;top:-19px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:2px 4px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 88%,transparent);box-shadow:0 10px 28px #0f172a38,0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pdx-widget-context-toolbar--with-context{border-radius:18px}.pdx-widget-context-toolbar__context{display:inline-flex;align-items:center;align-self:stretch;max-width:180px;padding:0 8px 0 10px;border-right:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 64%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: 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: 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: DynamicWidgetContextToolbarComponent, decorators: [{
             type: Component,
@@ -38572,6 +38756,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           {{ contextLabel }}
         </span>
       }
+      @if (showResize()) {
+        <button praxisIconButton="ms:open_in_full" type="button"
+          data-testid="dynamic-widget-resize"
+          [matTooltip]="resizeLabel()" [attr.aria-label]="resizeLabel()"
+          [attr.aria-controls]="resizeControls()" [attr.aria-expanded]="resizeExpanded()"
+          (click)="resize.emit()"></button>
+      }
       @if (showAssistant) {
         <button
           praxisIconButton="auto_awesome"
@@ -38626,7 +38817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       }
     </div>
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".pdx-widget-context-toolbar{position:absolute;top:-19px;right:12px;z-index:4;display:inline-flex;align-items:center;gap:4px;min-height:34px;padding:2px 4px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 28%,var(--md-sys-color-outline-variant));border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-high) 88%,transparent);box-shadow:0 10px 28px #0f172a38,0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pdx-widget-context-toolbar--with-context{border-radius:18px}.pdx-widget-context-toolbar__context{display:inline-flex;align-items:center;align-self:stretch;max-width:180px;padding:0 8px 0 10px;border-right:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 64%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
-        }], propDecorators: { toolbarLabel: [{
+        }], propDecorators: { showResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "showResize", required: false }] }], resizeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeLabel", required: false }] }], resizeControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeControls", required: false }] }], resizeExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizeExpanded", required: false }] }], resize: [{ type: i0.Output, args: ["resize"] }], toolbarLabel: [{
                 type: Input
             }], contextLabel: [{
                 type: Input
@@ -38671,6 +38862,14 @@ const DYNAMIC_WIDGET_PAGE_I18N_CONFIG = {
     namespaces: {
         [DYNAMIC_WIDGET_PAGE_I18N_NAMESPACE]: {
             'pt-BR': {
+                'heightValidation.measureFirst': 'Use altura Automática para aplicar a nova geometria; depois reabra o editor para definir a altura ajustável.',
+                'heightValidation.minimum': 'Use pelo menos {{height}}px nesta largura. Ajuste a altura/máximo ou use Automática.',
+                'announcements.contentSize': '{{action}}. Largura {{columns}} colunas, altura {{height}} pixels, recuo superior {{top}} pixels.',
+                'resizeFeedback.valid': 'Ajuste disponível',
+                'resizeFeedback.minimum': 'Tamanho mínimo atingido',
+                'resizeFeedback.blocked': 'Limite excedido — prévia limitada ao espaço disponível',
+                'resizeFeedback.committedLimit': 'Layout ajustado até o limite permitido',
+                'resizeFeedback.unchanged': 'Tamanho mantido — nenhum ajuste aplicado',
                 'controls.pageSettings': 'Configurar página',
                 'controls.componentSettings': 'Configurar conteúdo',
                 'controls.componentSettingsTooltip': 'Abrir configurações do componente',
@@ -38691,6 +38890,11 @@ const DYNAMIC_WIDGET_PAGE_I18N_CONFIG = {
                 'controls.widgetLayoutToolbar': 'Ações de layout do widget',
                 'controls.dragWidget': 'Arrastar widget',
                 'controls.resizeWidget': 'Redimensionar widget',
+                'controls.resizeAlternative': 'Controles alternativos de tamanho',
+                'controls.resizeSelect': 'Selecione um widget',
+                'controls.resizeClose': 'Fechar controles de tamanho',
+                'controls.resizeContextHelp': 'Arraste um controle ou use as setas do teclado. Esc fecha os controles.',
+                'controls.resizeHelp': 'Selecione o widget. Arraste uma borda ou canto pelos botões, ou use as setas do teclado.',
                 'controls.resize.north': 'Redimensionar widget pela borda superior',
                 'controls.resize.south': 'Redimensionar widget pela borda inferior',
                 'controls.resize.east': 'Redimensionar widget pela borda direita',
@@ -38702,11 +38906,20 @@ const DYNAMIC_WIDGET_PAGE_I18N_CONFIG = {
                 'announcements.moved': 'Widget movido: {{widget}}',
                 'announcements.swapped': 'Widget trocado com {{target}}: {{widget}}',
                 'announcements.resized': 'Widget redimensionado: {{widget}}',
+                'announcements.interactionCancelled': 'Alteração de layout cancelada.',
                 'announcements.position': '{{action}} para coluna {{col}}, linha {{row}}, largura {{colSpan}}, altura {{rowSpan}}.',
                 'announcements.dragBlocked': 'Movimento bloqueado: o widget colidiria com outro item.',
                 'announcements.resizeBlocked': 'Redimensionamento bloqueado: o widget colidiria com outro item.',
             },
             'en-US': {
+                'heightValidation.measureFirst': 'Use Automatic height to apply the new geometry, then reopen the editor to set an adjustable height.',
+                'heightValidation.minimum': 'Use at least {{height}}px at this width. Adjust the height/maximum, or use Automatic.',
+                'announcements.contentSize': '{{action}}. Width {{columns}} columns, height {{height}} pixels, top inset {{top}} pixels.',
+                'resizeFeedback.valid': 'Resize available',
+                'resizeFeedback.minimum': 'Minimum size reached',
+                'resizeFeedback.blocked': 'Limit exceeded — preview constrained to available space',
+                'resizeFeedback.committedLimit': 'Layout resized to the allowed limit',
+                'resizeFeedback.unchanged': 'Size unchanged — no adjustment applied',
                 'controls.pageSettings': 'Configure page',
                 'controls.componentSettings': 'Configure content',
                 'controls.componentSettingsTooltip': 'Open component settings',
@@ -38727,6 +38940,11 @@ const DYNAMIC_WIDGET_PAGE_I18N_CONFIG = {
                 'controls.widgetLayoutToolbar': 'Widget layout actions',
                 'controls.dragWidget': 'Drag widget',
                 'controls.resizeWidget': 'Resize widget',
+                'controls.resizeAlternative': 'Alternative resize controls',
+                'controls.resizeSelect': 'Select a widget',
+                'controls.resizeClose': 'Close resize controls',
+                'controls.resizeContextHelp': 'Drag a control or use the arrow keys. Esc closes the controls.',
+                'controls.resizeHelp': 'Select the widget. Drag an edge or corner using the buttons, or use the arrow keys.',
                 'controls.resize.north': 'Resize widget from the top edge',
                 'controls.resize.south': 'Resize widget from the bottom edge',
                 'controls.resize.east': 'Resize widget from the right edge',
@@ -38738,6 +38956,7 @@ const DYNAMIC_WIDGET_PAGE_I18N_CONFIG = {
                 'announcements.moved': 'Widget moved: {{widget}}',
                 'announcements.swapped': 'Widget swapped with {{target}}: {{widget}}',
                 'announcements.resized': 'Widget resized: {{widget}}',
+                'announcements.interactionCancelled': 'Layout change cancelled.',
                 'announcements.position': '{{action}} to column {{col}}, row {{row}}, width {{colSpan}}, height {{rowSpan}}.',
                 'announcements.dragBlocked': 'Move blocked: the widget would overlap another item.',
                 'announcements.resizeBlocked': 'Resize blocked: the widget would overlap another item.',
@@ -38746,15 +38965,212 @@ const DYNAMIC_WIDGET_PAGE_I18N_CONFIG = {
     },
 };
 
+/** Internal materialization of the canonical content-row size, never DOM state. */
+function contentSize(item) {
+    const size = item.contentSize;
+    if (!size || size === 'auto' || !Number.isFinite(size.heightPx) || size.heightPx <= 0)
+        return null;
+    const { min, max } = contentHeightLimits(item);
+    return {
+        heightPx: Math.min(max, Math.max(min, Math.round(size.heightPx))),
+        offsetTopPx: Number.isFinite(size.offsetTopPx) ? Math.max(0, Math.round(size.offsetTopPx)) : 0,
+    };
+}
+function contentHeightLimits(item) {
+    const c = item.constraints;
+    const min = Number.isFinite(c?.minHeightPx) ? Math.max(160, Math.round(c.minHeightPx)) : 160;
+    const max = Number.isFinite(c?.maxHeightPx) ? Math.max(min, Math.round(c.maxHeightPx)) : Number.MAX_SAFE_INTEGER;
+    return { min, max };
+}
+/** Pixel delta applies to the captured outer rectangle, not changing rowSpan.
+ * North growth stops at the track origin; shrinking retains the opposite edge.
+ */
+function resizeContentHeight(item, startHeight, delta, north, renderedMinimum = 0) {
+    if (!delta)
+        return { item, constrained: false, minimum: false };
+    const size = contentSize(item);
+    const top = size?.offsetTopPx ?? 0;
+    const height = size?.heightPx ?? startHeight;
+    const limits = contentHeightLimits(item);
+    const min = Math.max(limits.min, Number.isFinite(renderedMinimum) ? Math.ceil(renderedMinimum) : 0);
+    // North gestures also have a spatial maximum: the fixed bottom minus the
+    // track origin. A late content minimum cannot move that opposite edge.
+    const max = north ? Math.min(limits.max, height + top) : limits.max;
+    // A viewport observation must never override an authored maximum or leak
+    // into persisted constraints. Leave an impossible gesture unchanged.
+    if (min > max)
+        return { item, constrained: true, minimum: true };
+    const requested = height + (north ? -delta : delta);
+    if (requested < height && height <= min)
+        return { item, constrained: true, minimum: true };
+    const next = Math.max(min, Math.min(max, requested));
+    if (next === height)
+        return { item, constrained: next !== requested, minimum: next === min };
+    return {
+        item: { ...item, contentSize: { heightPx: Math.round(next), offsetTopPx: north ? Math.max(0, Math.round(top + height - next)) : top } },
+        constrained: next !== requested,
+        minimum: next === min,
+    };
+}
+
+/** CSSOM resolves grid tracks to pixels. Unresolved/unsupported lists use the fallback. */
+function readCanvasTrackSizes(value) {
+    const tracks = value.trim().split(/\s+/);
+    if (!tracks.length || tracks.some((track) => !/^\d+(?:\.\d+)?px$/.test(track))) {
+        return [];
+    }
+    return tracks.map((track) => Number.parseFloat(track));
+}
+/**
+ * Snap the moved edge to the nearest rendered track, retaining the pointer's
+ * initial offset. Resize uses the moving end edge for south/east handles, not
+ * the widget origin. Snapshotting avoids feedback from transient layout previews.
+ */
+function canvasAxisDelta(axis, startIndex, displacement, edge = 'start') {
+    const fallback = Math.max(1, axis.fallbackSize);
+    const gap = Math.max(0, axis.gap);
+    const positions = [];
+    let offset = 0;
+    for (const size of axis.sizes) {
+        positions.push(offset + (edge === 'end' ? size : 0));
+        offset += size + gap;
+    }
+    const extensionStart = offset + (edge === 'end' ? fallback : 0);
+    const step = fallback + gap;
+    const positionAt = (index) => positions[index] ?? extensionStart + (index - positions.length) * step;
+    const target = positionAt(startIndex) + displacement;
+    let nearest = startIndex;
+    let distance = Math.abs(displacement);
+    const consider = (index, position) => {
+        const nextDistance = Math.abs(position - target);
+        // Prefer the original track on ties, including zero-height empty rows.
+        if (nextDistance < distance) {
+            nearest = index;
+            distance = nextDistance;
+        }
+    };
+    positions.forEach((position, index) => consider(index, position));
+    const extensionIndex = positions.length + Math.max(0, Math.round((target - extensionStart) / step));
+    consider(extensionIndex, positionAt(extensionIndex));
+    return nearest - startIndex;
+}
+
+const right = (item) => item.col + item.colSpan;
+const bottom = (item) => item.row + item.rowSpan;
+const overlaps = (a, b) => a.col < right(b) && right(a) > b.col && a.row < bottom(b) && bottom(a) > b.row;
+/** Resize only by yielding space, never by pushing unrelated items or swapping.
+ * Opposite edges stay anchored. Ambiguous corner collisions fail closed. Inputs
+ * are the normalized effective device layout, never the transient preview.
+ */
+function resolveCanvasResizePlacement(key, candidate, source) {
+    const start = source[key];
+    const desired = { ...candidate };
+    const limitedBy = new Set();
+    const rejected = new Set();
+    const sideOf = (other) => {
+        const sides = [];
+        if (right(start) <= other.col && right(desired) > right(start))
+            sides.push('east');
+        if (start.col >= right(other) && desired.col < start.col)
+            sides.push('west');
+        if (bottom(start) <= other.row && bottom(desired) > bottom(start))
+            sides.push('south');
+        if (start.row >= bottom(other) && desired.row < start.row)
+            sides.push('north');
+        return sides.length === 1 ? sides[0] : null;
+    };
+    let left = desired.col, top = desired.row, end = right(desired), foot = bottom(desired);
+    for (const [otherKey, other] of Object.entries(source)) {
+        if (otherKey === key || !overlaps(desired, other))
+            continue;
+        const side = sideOf(other);
+        const constraints = other.constraints;
+        const horizontal = side === 'east' || side === 'west';
+        const minimum = Math.max(1, (horizontal ? constraints?.minColSpan : constraints?.minRowSpan) || 1);
+        const locked = constraints?.lockSize || (constraints?.lockPosition && (side === 'east' || side === 'south'));
+        if (!side || overlaps(start, other)) {
+            rejected.add(otherKey);
+            continue;
+        }
+        const available = locked ? (horizontal ? other.colSpan : other.rowSpan) : minimum;
+        const before = [left, top, end, foot].join();
+        if (side === 'east')
+            end = Math.min(end, right(other) - available);
+        if (side === 'west')
+            left = Math.max(left, other.col + available);
+        if (side === 'south')
+            foot = Math.min(foot, bottom(other) - available);
+        if (side === 'north')
+            top = Math.max(top, other.row + available);
+        if (before !== [left, top, end, foot].join()) {
+            (locked ? rejected : limitedBy).add(otherKey);
+        }
+    }
+    let primary = { ...desired, col: left, row: top, colSpan: end - left, rowSpan: foot - top };
+    // A pre-existing invalid layout or an ambiguous corner must not be repaired by
+    // this gesture. Also reject any clamp that would violate the selected minimum.
+    const ambiguous = [...rejected].some(otherKey => !sideOf(source[otherKey]) || overlaps(start, source[otherKey]));
+    if (ambiguous || primary.colSpan < Math.max(1, start.constraints?.minColSpan || 1)
+        || primary.rowSpan < Math.max(1, start.constraints?.minRowSpan || 1))
+        primary = { ...start };
+    const items = { [key]: primary };
+    const minimumKeys = new Set();
+    for (const [otherKey, other] of Object.entries(source)) {
+        if (otherKey === key || !overlaps(primary, other))
+            continue;
+        const side = sideOf(other);
+        const next = { ...other };
+        if (side === 'east') {
+            next.col = right(primary);
+            next.colSpan = right(other) - next.col;
+        }
+        if (side === 'west')
+            next.colSpan = primary.col - other.col;
+        if (side === 'south') {
+            next.row = bottom(primary);
+            next.rowSpan = bottom(other) - next.row;
+        }
+        if (side === 'north')
+            next.rowSpan = primary.row - other.row;
+        if (!side || overlaps(primary, next) || next.colSpan < Math.max(1, other.constraints?.minColSpan || 1)
+            || next.rowSpan < Math.max(1, other.constraints?.minRowSpan || 1)) {
+            return { items: { [key]: start }, primaryItem: start, limited: true,
+                minimumKeys: [], blockedKeys: [otherKey] };
+        }
+        items[otherKey] = next;
+        const horizontal = side === 'east' || side === 'west';
+        if (horizontal ? next.colSpan === Math.max(1, other.constraints?.minColSpan || 1)
+            : next.rowSpan === Math.max(1, other.constraints?.minRowSpan || 1))
+            minimumKeys.add(otherKey);
+    }
+    // Several neighbors can constrain the same edge; only the tightest ones are
+    // actually at minimum in the final distribution, not every earlier limiter.
+    for (const otherKey of limitedBy) {
+        const item = items[otherKey] || source[otherKey];
+        const side = sideOf(source[otherKey]);
+        const horizontal = side === 'east' || side === 'west';
+        if (horizontal ? item.colSpan === Math.max(1, item.constraints?.minColSpan || 1)
+            : item.rowSpan === Math.max(1, item.constraints?.minRowSpan || 1))
+            minimumKeys.add(otherKey);
+    }
+    if ((primary.colSpan !== start.colSpan && primary.colSpan === Math.max(1, start.constraints?.minColSpan || 1))
+        || (primary.rowSpan !== start.rowSpan && primary.rowSpan === Math.max(1, start.constraints?.minRowSpan || 1)))
+        minimumKeys.add(key);
+    return { items, primaryItem: primary,
+        limited: primary.col !== desired.col || primary.row !== desired.row
+            || primary.colSpan !== desired.colSpan || primary.rowSpan !== desired.rowSpan,
+        minimumKeys: [...minimumKeys], blockedKeys: [...rejected] };
+}
+
 const CANVAS_RESIZE_HANDLES = [
-    { id: 'north', className: 'pdx-canvas-resize--north' },
-    { id: 'south', className: 'pdx-canvas-resize--south' },
-    { id: 'east', className: 'pdx-canvas-resize--east' },
-    { id: 'west', className: 'pdx-canvas-resize--west' },
-    { id: 'north-east', className: 'pdx-canvas-resize--north-east' },
-    { id: 'north-west', className: 'pdx-canvas-resize--north-west' },
-    { id: 'south-east', className: 'pdx-canvas-resize--south-east' },
-    { id: 'south-west', className: 'pdx-canvas-resize--south-west' },
+    { id: 'north', icon: 'north' },
+    { id: 'north-east', icon: 'north_east' },
+    { id: 'east', icon: 'east' },
+    { id: 'south-east', icon: 'south_east' },
+    { id: 'south', icon: 'south' },
+    { id: 'south-west', icon: 'south_west' },
+    { id: 'west', icon: 'west' },
+    { id: 'north-west', icon: 'north_west' },
 ];
 class DynamicWidgetPageComponent {
     pageCanvasHost;
@@ -38798,6 +39214,10 @@ class DynamicWidgetPageComponent {
     gridAutoRows = 'auto';
     layoutAnnouncement = '';
     canvasResizeHandles = CANVAS_RESIZE_HANDLES;
+    contextualResizeHandles = [...CANVAS_RESIZE_HANDLES].sort((a, b) => {
+        const order = ['north-west', 'north', 'north-east', 'west', 'east', 'south-west', 'south', 'south-east'];
+        return order.indexOf(a.id) - order.indexOf(b.id);
+    });
     pageDefinition;
     /**
      * Last canonical definition accepted from the host or published by the
@@ -38823,9 +39243,23 @@ class DynamicWidgetPageComponent {
     activeTabs = {};
     widgetDiagnostics = {};
     selectedWidgetKeyState = signal(null, ...(ngDevMode ? [{ debugName: "selectedWidgetKeyState" }] : /* istanbul ignore next */ []));
+    selectedCanvasWidget = computed(() => this.widgets().find((widget) => this.isWidgetSelected(widget.key)), ...(ngDevMode ? [{ debugName: "selectedCanvasWidget" }] : /* istanbul ignore next */ []));
     blockedCanvasWidgetKey = null;
     canvasPreviewState = signal(null, ...(ngDevMode ? [{ debugName: "canvasPreviewState" }] : /* istanbul ignore next */ []));
     canvasPreviewInvalidState = signal(false, ...(ngDevMode ? [{ debugName: "canvasPreviewInvalidState" }] : /* istanbul ignore next */ []));
+    resizeFeedbackState = signal({}, ...(ngDevMode ? [{ debugName: "resizeFeedbackState" }] : /* istanbul ignore next */ []));
+    resizeFeedbackOrigin = signal(null, ...(ngDevMode ? [{ debugName: "resizeFeedbackOrigin" }] : /* istanbul ignore next */ []));
+    resizeFeedbackPositions = [
+        { originX: 'end', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetX: 16, offsetY: 16 },
+        { originX: 'start', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetX: -16, offsetY: 16 },
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetX: 16, offsetY: -16 },
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetX: -16, offsetY: -16 },
+    ];
+    prepareResizeFeedbackOverlay(element) {
+        // The entire pane must pass through hits, not only its inner presentation.
+        // No focus, backdrop or interactive control belongs to gesture feedback.
+        element.style.pointerEvents = 'none';
+    }
     transientCanvasItemsState = signal({}, ...(ngDevMode ? [{ debugName: "transientCanvasItemsState" }] : /* istanbul ignore next */ []));
     activeCanvasInteraction = null;
     appliedPersisted = false;
@@ -38870,6 +39304,16 @@ class DynamicWidgetPageComponent {
     runtimeObservationRegistration = null;
     hostElement = inject((ElementRef));
     changeDetector = inject(ChangeDetectorRef);
+    static resizePopoverSequence = 0;
+    resizePopoverId = `pdx-canvas-resize-${++DynamicWidgetPageComponent.resizePopoverSequence}`;
+    resizePopoverOrigin = signal(null, ...(ngDevMode ? [{ debugName: "resizePopoverOrigin" }] : /* istanbul ignore next */ []));
+    resizePopoverReturnFocus = null;
+    projectedResizeActions = new WeakSet();
+    resizePopoverPositions = [
+        { originX: 'end', originY: 'top', overlayX: 'start', overlayY: 'top', offsetX: 8 },
+        { originX: 'start', originY: 'top', overlayX: 'end', overlayY: 'top', offsetX: -8 },
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+    ];
     hostResizeObserver;
     containerWidth;
     widgetLoaders;
@@ -38878,6 +39322,10 @@ class DynamicWidgetPageComponent {
         afterNextRender({ read: () => this.observeHostWidth() });
     }
     ngOnDestroy() {
+        this.closeResizePopover(false);
+        if (this.activeCanvasInteraction) {
+            this.cancelCanvasInteractionForWidget(this.activeCanvasInteraction.widgetKey);
+        }
         this.destroyed = true;
         this.runtimeObservationRegistration?.destroy();
         this.runtimeObservationRegistration = null;
@@ -38886,6 +39334,15 @@ class DynamicWidgetPageComponent {
         this.compositionRuntime.destroy();
     }
     ngOnChanges(changes) {
+        if (changes['pageIdentity'] || changes['enableCustomization'] || changes['authoringCapabilities']) {
+            this.closeResizePopover(false);
+        }
+        if (this.activeCanvasInteraction &&
+            (changes['page'] || changes['context'] || changes['pageIdentity'] ||
+                changes['componentInstanceId'] || changes['enableCustomization'] ||
+                changes['authoringCapabilities'])) {
+            this.cancelCanvasInteractionForWidget(this.activeCanvasInteraction.widgetKey);
+        }
         if (changes['page'] ||
             changes['context'] ||
             changes['enableCustomization'] ||
@@ -40358,6 +40815,10 @@ class DynamicWidgetPageComponent {
             && !this.hasVisibleWidgetShellHeader(widget));
     }
     widgetShellForRender(widget) {
+        const shell = this.widgetShellWithActions(widget);
+        return this.widgetContentSize(widget) ? { ...shell, bodyLayout: 'scroll' } : shell;
+    }
+    widgetShellWithActions(widget) {
         if (!this.shouldProjectWidgetHeaderActions(widget)) {
             return widget.shell;
         }
@@ -40403,7 +40864,8 @@ class DynamicWidgetPageComponent {
             && this.hasVisibleWidgetShellHeader(widget);
     }
     hasWidgetContextAuthoringActions(widget) {
-        return this.canRequestWidgetAssistant()
+        return (this.canCustomizeCanvas() && this.isCanvasMode())
+            || this.canRequestWidgetAssistant()
             || this.canOpenWidgetComponentSettings(widget.key)
             || this.canOpenWidgetShellSettings()
             || this.canRemoveWidgets();
@@ -40431,6 +40893,17 @@ class DynamicWidgetPageComponent {
     }
     buildProjectedWidgetShellActions(widget) {
         const actions = [];
+        if (this.canCustomizeCanvas() && this.isCanvasMode()) {
+            const resizeAction = {
+                id: 'widget-resize-controls',
+                label: this.resizeWidgetLabel(), tooltip: this.resizeWidgetLabel(),
+                icon: 'ms:open_in_full', variant: 'icon', placement: 'header',
+                ariaControls: this.resizePopoverId,
+                ariaExpanded: !!this.resizePopoverOrigin() && this.isWidgetSelected(widget.key),
+            };
+            this.projectedResizeActions.add(resizeAction);
+            actions.push(resizeAction);
+        }
         if (this.canRequestWidgetAssistant()) {
             actions.push({
                 id: 'widget-assistant',
@@ -40482,6 +40955,7 @@ class DynamicWidgetPageComponent {
             action.icon || '',
             action.variant || '',
             action.placement || '',
+            String(action.ariaExpanded ?? ''),
         ].join(':'))
             .join('|');
     }
@@ -40524,7 +40998,13 @@ class DynamicWidgetPageComponent {
         this.widgetDiagnosticsChange.emit({ ...this.widgetDiagnostics });
     }
     onShellAction(fromKey, evt) {
-        if (evt.id === 'expand' || evt.id === 'fullscreen') {
+        if (evt.id === 'widget-resize-controls' && evt.action && this.projectedResizeActions.has(evt.action)) {
+            this.toggleResizePopover(fromKey);
+            return;
+        }
+        if (this.resizePopoverOrigin())
+            this.closeResizePopover(false);
+        if (evt.id === 'expand' || evt.id === 'fullscreen' || evt.id === 'collapse') {
             this.cancelCanvasInteractionForWidget(fromKey);
         }
         if (evt.id === 'widget-assistant') {
@@ -41059,6 +41539,8 @@ class DynamicWidgetPageComponent {
                     presets: uiShell?.presets || null,
                     pagePreset: uiShell?.preset || null,
                     authoringCapabilities: this.authoringCapabilities,
+                    // Transient Settings Panel data; never part of WidgetPageDefinition.
+                    validateRenderedCanvas: (candidate) => this.validateRenderedCanvas(candidate),
                 },
             },
         });
@@ -41069,6 +41551,40 @@ class DynamicWidgetPageComponent {
         return this.isAuthoringCapabilityEnabled('pageSettings')
             && !!(this.pageEditorComponent || this.defaultPageEditor);
     }
+    validateRenderedCanvas(candidate) {
+        const device = this.resolveDeviceKind();
+        const canvas = this.resolveCanvas(candidate.canvas, candidate.deviceLayouts?.[device]?.canvas);
+        if (!canvas || canvas.autoRows !== 'content')
+            return null;
+        const baseline = this.authoredPageDefinition;
+        for (const [key, item] of Object.entries(canvas.items)) {
+            if (candidate.deviceLayouts?.[device]?.widgetOverrides?.[key]?.hidden)
+                continue;
+            const size = contentSize(item);
+            if (!size)
+                continue;
+            const override = candidate.deviceLayouts?.[device]?.canvas?.items?.[key];
+            const scope = override?.contentSize !== undefined ? device : 'base';
+            const current = this.canvas?.items[key];
+            const minimum = this.measureCanvasMinimumHeight(key);
+            // A changed width or shell cannot reuse the old DOM as geometry proof.
+            const sameGeometry = !this.destroyed && this.canvas?.autoRows === 'content'
+                && canvas.columns === this.canvas.columns
+                && (canvas.gap || candidate.deviceLayouts?.[device]?.layout?.gap || candidate.layout?.gap || '16px') === this.pageGap
+                && item.colSpan === current?.colSpan
+                && candidate.layoutPreset === baseline?.layoutPreset
+                && candidate.themePreset === baseline?.themePreset
+                && this.sameJsonStructure(candidate.widgets.find(widget => widget.key === key)?.shell, baseline?.widgets.find(widget => widget.key === key)?.shell)
+                && this.sameJsonStructure(candidate.context?.['ui']?.shell ?? {}, baseline?.context?.['ui']?.shell ?? {});
+            if (!sameGeometry || minimum === undefined) {
+                return { widgetKey: key, scope, message: this.t('heightValidation.measureFirst', 'Use altura Automática para aplicar a nova geometria; depois reabra o editor para definir a altura ajustável.') };
+            }
+            if (size.heightPx < minimum) {
+                return { widgetKey: key, scope, message: this.t('heightValidation.minimum', 'Use pelo menos {{height}}px nesta largura. Ajuste a altura/máximo ou use Automática.', { height: minimum }) };
+            }
+        }
+        return null;
+    }
     applyWidgetShell(key, result, persist) {
         if (!result)
             return;
@@ -41321,7 +41837,15 @@ class DynamicWidgetPageComponent {
         const interaction = this.activeCanvasInteraction;
         if (!interaction || interaction.pointerId !== event.pointerId)
             return;
+        if (!this.canCustomizeCanvas() || !this.isCanvasMode()) {
+            this.cancelCanvasInteractionForWidget(interaction.widgetKey);
+            return;
+        }
         event.preventDefault();
+        interaction.minimumContentHeight = this.measureCanvasMinimumHeight(interaction.widgetKey);
+        if (interaction.kind === 'resize') {
+            this.resizeFeedbackOrigin.set({ x: event.clientX, y: event.clientY });
+        }
         const { colDelta, rowDelta } = this.resolveCanvasInteractionDelta(interaction, event.clientX, event.clientY);
         if (interaction.kind === 'drag') {
             const result = this.updateCanvasItem(interaction.widgetKey, (item) => this.applyCanvasDrag(item, interaction, colDelta, rowDelta), false, undefined, undefined, 'drag');
@@ -41341,9 +41865,15 @@ class DynamicWidgetPageComponent {
         const interaction = this.activeCanvasInteraction;
         if (!interaction || interaction.pointerId !== event.pointerId)
             return;
+        if (!this.canCustomizeCanvas() || !this.isCanvasMode()) {
+            this.cancelCanvasInteractionForWidget(interaction.widgetKey);
+            return;
+        }
         event.preventDefault();
-        this.releaseCanvasPointerCapture(interaction);
+        interaction.minimumContentHeight = this.measureCanvasMinimumHeight(interaction.widgetKey);
         this.activeCanvasInteraction = null;
+        this.resizeFeedbackOrigin.set(null);
+        this.releaseCanvasPointerCapture(interaction);
         this.canvasPreviewState.set(null);
         this.canvasPreviewInvalidState.set(false);
         this.transientCanvasItemsState.set({});
@@ -41372,13 +41902,21 @@ class DynamicWidgetPageComponent {
         const interaction = this.activeCanvasInteraction;
         if (!interaction || interaction.pointerId !== event.pointerId)
             return;
-        this.releaseCanvasPointerCapture(interaction);
-        this.activeCanvasInteraction = null;
-        this.canvasPreviewState.set(null);
-        this.canvasPreviewInvalidState.set(false);
-        this.transientCanvasItemsState.set({});
-        this.layoutAnnouncement = this.blockedCanvasAnnouncement(interaction.kind);
-        this.applyTransientPagePreview(interaction.startPage, this.buildStateRuntime(interaction.startPage.state, interaction.startPage.context));
+        this.cancelCanvasGesture();
+    }
+    onCanvasEscape(event) {
+        if (!(event instanceof KeyboardEvent) || event.key !== 'Escape'
+            || event.defaultPrevented || !this.activeCanvasInteraction)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelCanvasGesture();
+    }
+    cancelCanvasGesture() {
+        if (!this.activeCanvasInteraction)
+            return;
+        this.cancelCanvasInteractionForWidget(this.activeCanvasInteraction.widgetKey);
+        this.layoutAnnouncement = this.t('announcements.interactionCancelled', 'Alteração de layout cancelada.');
     }
     resolveColumns(layout, deviceLayoutColumnsSelected = false) {
         const base = Math.max(1, Number(layout?.columns) || 2);
@@ -41668,7 +42206,10 @@ class DynamicWidgetPageComponent {
     selectWidget(widgetKey) {
         if (!this.canSelectWidgets())
             return;
+        if (this.activeCanvasInteraction && this.activeCanvasInteraction.widgetKey !== widgetKey)
+            return;
         if (this.selectedWidgetKeyState() !== widgetKey) {
+            this.closeResizePopover(false);
             this.selectedWidgetKeyState.set(widgetKey);
             this.widgetSelectionChange.emit(widgetKey);
         }
@@ -41692,6 +42233,103 @@ class DynamicWidgetPageComponent {
     isWidgetSelected(widgetKey) {
         return this.selectedWidgetKeyState() === widgetKey;
     }
+    canvasInteractionActive() {
+        return this.activeCanvasInteraction !== null;
+    }
+    canShowCanvasEdges(widgetKey) {
+        return this.canCustomizeCanvas() && this.isWidgetSelected(widgetKey)
+            && !this.currentCanvasItem(widgetKey)?.constraints?.lockSize;
+    }
+    contextualResizeHandle() {
+        const interaction = this.activeCanvasInteraction;
+        return this.resizePopoverOrigin() && interaction?.kind === 'resize'
+            && interaction.widgetKey === this.selectedCanvasWidget()?.key
+            ? interaction.resizeHandle ?? null : null;
+    }
+    selectCanvasResizeTarget(event) {
+        const key = event.target.value;
+        if (this.widgets().some((widget) => widget.key === key)) {
+            this.selectCanvasWidget(key);
+        }
+    }
+    toggleResizePopover(widgetKey) {
+        if (!this.canCustomizeCanvas() || !this.isCanvasMode() || this.canvasInteractionActive()
+            || this.isCanvasWidgetInOverlay(widgetKey))
+            return;
+        if (this.resizePopoverOrigin() && this.isWidgetSelected(widgetKey)) {
+            this.closeResizePopover(true);
+            return;
+        }
+        const owner = Array.from(this.pageCanvasHost?.nativeElement.children || [])
+            .find((element) => element.getAttribute('data-widget-key') === widgetKey);
+        const header = owner?.querySelector('.pdx-shell-header')
+            ?? owner?.querySelector('[data-testid="dynamic-widget-context-toolbar"]');
+        if (!header)
+            return;
+        this.selectCanvasWidget(widgetKey);
+        const focused = this.hostElement.nativeElement.ownerDocument.activeElement;
+        this.resizePopoverReturnFocus = focused instanceof HTMLElement && header.contains(focused)
+            ? focused : (header.querySelector('button[aria-haspopup="menu"]') ?? header.querySelector('button'));
+        this.resizePopoverOrigin.set(header);
+    }
+    focusResizePopover(overlay) {
+        overlay.querySelector('[data-resize-handle]')?.focus({ preventScroll: true });
+    }
+    closeResizePopover(restoreFocus) {
+        if (!this.resizePopoverOrigin())
+            return;
+        const widget = this.selectedCanvasWidget();
+        if (widget)
+            this.cancelCanvasInteractionForWidget(widget.key);
+        const target = this.resizePopoverReturnFocus;
+        this.resizePopoverOrigin.set(null);
+        this.resizePopoverReturnFocus = null;
+        if (restoreFocus && target?.isConnected)
+            target.focus({ preventScroll: true });
+    }
+    onResizePopoverOutsideClick(event) {
+        if (this.canvasInteractionActive())
+            return;
+        const target = event.target;
+        if (target instanceof Node && this.resizePopoverOrigin()?.contains(target))
+            return;
+        this.closeResizePopover(false);
+    }
+    onResizePopoverKeydown(event) {
+        if (event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.cancelCanvasGesture();
+        this.closeResizePopover(true);
+    }
+    resizeCloseLabel() {
+        return this.t('controls.resizeClose', 'Fechar controles de tamanho');
+    }
+    resizeContextHelpLabel() {
+        return this.t('controls.resizeContextHelp', 'Arraste um controle ou use as setas do teclado. Esc fecha os controles.');
+    }
+    resizePopoverGridArea(handle) {
+        const positions = {
+            north: '1 / 2', 'north-east': '1 / 3', east: '2 / 3', 'south-east': '3 / 3',
+            south: '3 / 2', 'south-west': '3 / 1', west: '2 / 1', 'north-west': '1 / 1',
+        };
+        return positions[handle];
+    }
+    onSelectedCanvasResizePointerDown(handle, event) {
+        const widget = this.selectedCanvasWidget();
+        if (!widget)
+            return;
+        this.startCanvasResize(widget.key, handle, event);
+        if (this.activeCanvasInteraction?.pointerId === event.pointerId && event.currentTarget instanceof HTMLElement) {
+            event.currentTarget.focus({ preventScroll: true });
+        }
+    }
+    onSelectedCanvasResizeKeydown(handle, event) {
+        const widget = this.selectedCanvasWidget();
+        if (widget)
+            this.onCanvasResizeHandleKeydown(widget.key, handle, event);
+    }
     selectCanvasWidget(widgetKey) {
         this.selectWidget(widgetKey);
     }
@@ -41734,36 +42372,35 @@ class DynamicWidgetPageComponent {
         if (!horizontal && !vertical)
             return;
         event.preventDefault();
+        event.stopPropagation();
         const step = event.shiftKey ? 2 : 1;
         const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -step : step;
         this.updateCanvasItem(widgetKey, (item) => {
             if (kind === 'drag') {
                 return this.applyCanvasKeyboardDrag(item, event.key, delta);
             }
-            return this.applyCanvasKeyboardResize(item, event.key, delta);
+            return this.applyCanvasKeyboardResize(item, event.key, delta, widgetKey);
         }, true, this.canvasAnnouncement(kind, widgetKey), this.blockedCanvasAnnouncement(kind), kind);
     }
     onCanvasResizeHandleKeydown(widgetKey, handle, event) {
         if (!this.canCustomizeCanvas() || !this.isCanvasMode())
             return;
+        if (this.isCanvasWidgetInOverlay(widgetKey) || this.activeCanvasInteraction)
+            return;
         this.selectCanvasWidget(widgetKey);
         const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
         const vertical = event.key === 'ArrowUp' || event.key === 'ArrowDown';
         if (!horizontal && !vertical)
             return;
         event.preventDefault();
+        event.stopPropagation();
         const step = event.shiftKey ? 2 : 1;
         const delta = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -step : step;
         const colDelta = horizontal ? delta : 0;
         const rowDelta = vertical ? delta : 0;
         const columns = this.canvas?.columns || 1;
+        const contentHeight = this.measureCanvasContentHeight(widgetKey);
         this.updateCanvasItem(widgetKey, (item) => this.applyCanvasResize(item, {
-            kind: 'resize',
-            widgetKey,
-            pointerId: -1,
-            startPage: this.clonePageDefinition(this.ensurePageDefinition()),
-            startX: 0,
-            startY: 0,
             startItem: {
                 ...item,
                 constraints: item.constraints
@@ -41771,11 +42408,10 @@ class DynamicWidgetPageComponent {
                     : undefined,
             },
             columns,
-            columnWidth: 1,
-            rowHeight: 1,
             resizeHandle: handle,
-            blocked: false,
-        }, colDelta, rowDelta), true, this.canvasAnnouncement('resize', widgetKey), this.blockedCanvasAnnouncement('resize'), 'resize');
+            contentHeight,
+            minimumContentHeight: this.measureCanvasMinimumHeight(widgetKey),
+        }, colDelta, contentHeight !== undefined ? rowDelta * 16 : rowDelta), true, this.canvasAnnouncement('resize', widgetKey), this.blockedCanvasAnnouncement('resize'), 'resize');
     }
     applyWidgetLayoutOverrides(widgets, overrides) {
         const rendered = widgets
@@ -41821,7 +42457,10 @@ class DynamicWidgetPageComponent {
     startCanvasInteraction(widgetKey, event, kind, resizeHandle) {
         if (!this.canCustomizeCanvas() || !this.isCanvasMode())
             return;
-        if (this.isCanvasOverlayInteraction(event))
+        // One gesture owns the preview until commit/cancel, including across pointer types.
+        if (this.activeCanvasInteraction || event.button > 0 || event.isPrimary === false)
+            return;
+        if (this.isCanvasOverlayInteraction(event) || this.isCanvasWidgetInOverlay(widgetKey))
             return;
         event.preventDefault();
         event.stopPropagation();
@@ -41831,7 +42470,6 @@ class DynamicWidgetPageComponent {
         const metrics = this.currentCanvasMetrics();
         if (!item || !metrics)
             return;
-        const pageSnapshot = this.clonePageDefinition(this.ensurePageDefinition());
         const pointerTarget = event.currentTarget instanceof HTMLElement
             ? event.currentTarget
             : undefined;
@@ -41846,7 +42484,6 @@ class DynamicWidgetPageComponent {
             widgetKey,
             pointerId: event.pointerId,
             pointerTarget,
-            startPage: pageSnapshot,
             startX: event.clientX,
             startY: event.clientY,
             startItem: {
@@ -41854,8 +42491,10 @@ class DynamicWidgetPageComponent {
                 constraints: item.constraints ? { ...item.constraints } : undefined,
             },
             columns: metrics.columns,
-            columnWidth: metrics.columnWidth,
-            rowHeight: metrics.rowHeight,
+            columnGeometry: metrics.columnGeometry,
+            rowGeometry: metrics.rowGeometry,
+            contentHeight: this.measureCanvasContentHeight(widgetKey),
+            minimumContentHeight: this.measureCanvasMinimumHeight(widgetKey),
             resizeHandle,
             blocked: false,
             swappedWith: null,
@@ -41867,12 +42506,14 @@ class DynamicWidgetPageComponent {
         const interaction = this.activeCanvasInteraction;
         if (!interaction || interaction.widgetKey !== widgetKey)
             return;
-        this.releaseCanvasPointerCapture(interaction);
         this.activeCanvasInteraction = null;
+        this.resizeFeedbackOrigin.set(null);
+        this.releaseCanvasPointerCapture(interaction);
         this.blockedCanvasWidgetKey = null;
         this.canvasPreviewState.set(null);
         this.canvasPreviewInvalidState.set(false);
         this.transientCanvasItemsState.set({});
+        this.resizeFeedbackState.set({});
     }
     isCanvasOverlayInteraction(event) {
         const target = event.currentTarget instanceof HTMLElement
@@ -41882,13 +42523,20 @@ class DynamicWidgetPageComponent {
                 : null;
         return !!target?.closest('.pdx-shell.expanded, .pdx-shell.fullscreen');
     }
+    isCanvasWidgetInOverlay(widgetKey) {
+        const owner = Array.from(this.pageCanvasHost?.nativeElement.children || [])
+            .find((element) => element.getAttribute('data-widget-key') === widgetKey);
+        return !!owner?.querySelector(':scope > praxis-widget-shell > .pdx-shell.expanded, :scope > praxis-widget-shell > .pdx-shell.fullscreen, :scope > praxis-widget-shell > .pdx-shell.collapsed');
+    }
     currentCanvasMetrics() {
         const canvas = this.canvas;
         const host = this.pageCanvasHost?.nativeElement;
         if (!canvas || !host)
             return null;
         const rect = host.getBoundingClientRect();
-        const gap = this.parseCssPixelValue(this.pageGap, 16);
+        const style = host.ownerDocument.defaultView?.getComputedStyle(host);
+        const gap = this.parseCssPixelValue(style?.columnGap || this.pageGap, 16);
+        const rowGap = this.parseCssPixelValue(style?.rowGap || this.pageGap, 16);
         const columns = Math.max(1, Number(canvas.columns) || 1);
         const availableWidth = Math.max(1, rect.width - gap * Math.max(0, columns - 1));
         const columnWidth = availableWidth / columns;
@@ -41897,19 +42545,48 @@ class DynamicWidgetPageComponent {
             : this.parseCssPixelValue(canvas.rowUnit || this.gridAutoRows || '88px', 88);
         return {
             columns,
-            columnWidth: Math.max(1, columnWidth),
-            rowHeight: Math.max(1, rowHeight),
+            columnGeometry: {
+                sizes: readCanvasTrackSizes(style?.gridTemplateColumns || ''),
+                gap,
+                fallbackSize: Math.max(1, columnWidth),
+            },
+            rowGeometry: {
+                sizes: readCanvasTrackSizes(style?.gridTemplateRows || ''),
+                gap: rowGap,
+                fallbackSize: Math.max(1, rowHeight),
+            },
         };
     }
+    measureCanvasContentHeight(key) {
+        if (this.canvas?.autoRows !== 'content')
+            return undefined;
+        const owner = Array.from(this.pageCanvasHost?.nativeElement.children || [])
+            .find(element => element.getAttribute('data-widget-key') === key);
+        const height = owner?.getBoundingClientRect().height;
+        return height && height > 0 ? height : undefined;
+    }
+    measureCanvasMinimumHeight(key) {
+        if (this.canvas?.autoRows !== 'content')
+            return undefined;
+        const owner = Array.from(this.pageCanvasHost?.nativeElement.children || [])
+            .find(element => element.getAttribute('data-widget-key') === key);
+        const shell = owner?.querySelector(':scope > praxis-widget-shell > .pdx-shell');
+        return shell ? measureWidgetShellHeight(shell)?.minimum : undefined;
+    }
     currentCanvasItem(widgetKey) {
         return this.canvas?.items?.[widgetKey];
     }
     resolveCanvasInteractionDelta(interaction, clientX, clientY) {
         const deltaX = clientX - interaction.startX;
         const deltaY = clientY - interaction.startY;
+        const start = interaction.startItem;
+        const east = interaction.kind === 'resize' &&
+            (interaction.resizeHandle || 'south-east').includes('east');
+        const south = interaction.kind === 'resize' &&
+            (interaction.resizeHandle || 'south-east').includes('south');
         return {
-            colDelta: Math.round(deltaX / Math.max(1, interaction.columnWidth)),
-            rowDelta: Math.round(deltaY / Math.max(1, interaction.rowHeight)),
+            colDelta: canvasAxisDelta(interaction.columnGeometry, start.col - 1 + (east ? start.colSpan - 1 : 0), deltaX, east ? 'end' : 'start'),
+            rowDelta: interaction.kind === 'resize' && interaction.contentHeight !== undefined ? Math.round(deltaY) : canvasAxisDelta(interaction.rowGeometry, start.row - 1 + (south ? start.rowSpan - 1 : 0), deltaY, south ? 'end' : 'start'),
         };
     }
     updateCanvasItem(widgetKey, updater, persist, announcement, blockedAnnouncement, interactionKind = 'drag') {
@@ -41921,14 +42598,21 @@ class DynamicWidgetPageComponent {
         const current = effectiveCanvas?.items[widgetKey];
         if (!current)
             return { changed: false, blocked: false };
-        const candidate = this.normalizeCanvasItem(updater({
+        const update = updater({
             ...current,
             constraints: current.constraints
                 ? { ...current.constraints }
                 : undefined,
-        }), effectiveCanvas?.columns || page.canvas.columns || 1);
+        });
+        const { item: candidateItem, constrained } = 'item' in update
+            ? update : { item: update, constrained: false };
+        const candidate = this.normalizeCanvasItem(candidateItem, effectiveCanvas?.columns || page.canvas.columns || 1);
+        if (interactionKind === 'resize' && effectiveCanvas) {
+            return this.updateCanvasResize(widgetKey, candidate, effectiveCanvas, page, persist, announcement, constrained);
+        }
+        this.resizeFeedbackState.set({});
         const collisionPolicy = effectiveCanvas
-            ? this.resolveCanvasCollisionPolicy(effectiveCanvas, interactionKind)
+            ? this.resolveCanvasCollisionPolicy(effectiveCanvas)
             : 'block';
         const placement = effectiveCanvas
             ? this.resolveCanvasPlacement(widgetKey, current, candidate, effectiveCanvas, collisionPolicy)
@@ -41952,7 +42636,7 @@ class DynamicWidgetPageComponent {
         this.blockedCanvasWidgetKey = null;
         this.canvasPreviewInvalidState.set(false);
         const changed = placement.changed;
-        if (!changed && !persist) {
+        if (!changed) {
             this.transientCanvasItemsState.set({});
             this.canvasPreviewState.set(null);
             this.canvasPreviewInvalidState.set(false);
@@ -42001,28 +42685,65 @@ class DynamicWidgetPageComponent {
         }
         return { changed, blocked: false, swappedWith: placement.swappedWith };
     }
-    applyTransientPagePreview(next, runtime = this.pageRuntime) {
-        const normalized = { ...next, state: runtime.state };
-        const previewProjection = this.compositionRuntime.projectStateWidgetInputs(this.compositionFactory.create(normalized), {
-            widgets: normalized.widgets || [],
-            state: {
-                primaryValues: this.cloneStateValues(runtime.primaryValues),
-                derivedValues: this.cloneStateValues(runtime.derivedValues),
-                transientValues: {},
-                changedPaths: [],
-                diagnostics: [],
-            },
-        });
-        const stateBoundWidgets = previewProjection.widgets;
-        const hydrated = this.resolvePagePresets({
-            ...normalized,
-            widgets: stateBoundWidgets,
-        });
-        this.pageDefinition = hydrated;
-        this.page = hydrated;
-        this.pageState = runtime.state;
-        this.pageRuntime = runtime;
-        this.applyResponsivePresentation(hydrated, stateBoundWidgets, runtime);
+    resizeFeedback(key) {
+        return this.resizeFeedbackState()[key] ?? null;
+    }
+    hasResizeFeedback() {
+        return Object.keys(this.resizeFeedbackState()).length > 0;
+    }
+    resizeFeedbackLabel(state) {
+        const fallback = {
+            valid: 'Ajuste disponível', minimum: 'Tamanho mínimo atingido',
+            blocked: 'Limite excedido — prévia limitada ao espaço disponível',
+        };
+        return this.t(`resizeFeedback.${state}`, fallback[state]);
+    }
+    updateCanvasResize(key, candidate, canvas, page, persist, announcement, constrained = false) {
+        const placement = resolveCanvasResizePlacement(key, candidate, canvas.items);
+        const changed = Object.entries(placement.items).some(([itemKey, item]) => !this.isSameCanvasItem(canvas.items[itemKey], item));
+        const feedback = {};
+        for (const itemKey of Object.keys(placement.items))
+            feedback[itemKey] = 'valid';
+        for (const itemKey of placement.minimumKeys)
+            feedback[itemKey] = 'minimum';
+        const bounded = contentSize(placement.primaryItem);
+        const minimum = Math.max(contentHeightLimits(placement.primaryItem).min, this.measureCanvasMinimumHeight(key) || 0);
+        if (bounded && bounded.heightPx <= minimum)
+            feedback[key] = 'minimum';
+        for (const itemKey of placement.blockedKeys)
+            feedback[itemKey] = 'blocked';
+        const limited = constrained || placement.limited;
+        if (limited)
+            feedback[key] = 'blocked';
+        const message = this.resizeFeedbackLabel(feedback[key]);
+        if (persist) {
+            this.resizeFeedbackState.set({});
+            this.transientCanvasItemsState.set({});
+            this.canvasPreviewState.set(null);
+            this.canvasPreviewInvalidState.set(false);
+            this.blockedCanvasWidgetKey = null;
+            if (changed) {
+                const target = this.resolveCanvasTarget(page);
+                for (const [itemKey, item] of Object.entries(placement.items)) {
+                    target.items[itemKey] = { ...item, constraints: item.constraints ? { ...item.constraints } : undefined };
+                }
+                this.applyAuthoringPageUpdate(page, true);
+            }
+            this.layoutAnnouncement = this.positionedCanvasAnnouncement(!changed ? this.t('resizeFeedback.unchanged', 'Tamanho mantido — nenhum ajuste aplicado')
+                : limited ? this.t('resizeFeedback.committedLimit', 'Layout ajustado até o limite permitido') : announcement || message, placement.primaryItem);
+        }
+        else {
+            if (JSON.stringify(feedback) !== JSON.stringify(this.resizeFeedbackState())) {
+                this.layoutAnnouncement = Object.entries(feedback).map(([itemKey, state]) => `${this.widgetContextToolbarLabel(itemKey)}: ${this.resizeFeedbackLabel(state)}`).join('. ');
+            }
+            this.resizeFeedbackState.set(feedback);
+            this.transientCanvasItemsState.set(placement.items);
+            // Render the real clamped distribution, never an impossible overlapping ghost.
+            this.canvasPreviewState.set(placement.primaryItem);
+            this.canvasPreviewInvalidState.set(false);
+            this.blockedCanvasWidgetKey = null;
+        }
+        return { changed, blocked: limited };
     }
     resolveCanvasTarget(page) {
         const kind = this.resolveDeviceKind();
@@ -42051,7 +42772,15 @@ class DynamicWidgetPageComponent {
     applyCanvasResize(item, interaction, colDelta, rowDelta) {
         const locked = item.constraints?.lockSize || interaction.startItem.constraints?.lockSize;
         if (locked)
-            return item;
+            return { item, constrained: colDelta !== 0 || rowDelta !== 0 };
+        if (interaction.contentHeight !== undefined) {
+            const horizontal = this.applyCanvasResize(item, { ...interaction, contentHeight: undefined }, colDelta, 0);
+            const handle = interaction.resizeHandle || 'south-east';
+            if (!handle.includes('north') && !handle.includes('south'))
+                return horizontal;
+            const vertical = resizeContentHeight({ ...horizontal.item, contentSize: interaction.startItem.contentSize }, interaction.contentHeight, rowDelta, handle.includes('north'), interaction.minimumContentHeight);
+            return { item: vertical.item, constrained: horizontal.constrained || vertical.constrained };
+        }
         const handle = interaction.resizeHandle || 'south-east';
         const start = interaction.startItem;
         const constraints = this.resolveCanvasConstraints(start, interaction.columns);
@@ -42079,12 +42808,16 @@ class DynamicWidgetPageComponent {
             nextRow = this.clampNumber(start.row + rowDelta, minRow, maxRow);
             nextRowSpan = bottomEdge - nextRow + 1;
         }
+        // Keep attempted edges until feedback is decided. Otherwise clamping here
+        // makes a gesture past an own minimum/maximum look like a valid request.
+        const requestedCol = start.col + (handle.includes('west') ? colDelta : 0);
+        const requestedRow = start.row + (handle.includes('north') ? rowDelta : 0);
+        const requestedColSpan = start.colSpan + (handle.includes('east') ? colDelta : handle.includes('west') ? -colDelta : 0);
+        const requestedRowSpan = start.rowSpan + (handle.includes('south') ? rowDelta : handle.includes('north') ? -rowDelta : 0);
         return {
-            ...item,
-            col: nextCol,
-            row: nextRow,
-            colSpan: nextColSpan,
-            rowSpan: nextRowSpan,
+            item: { ...item, col: nextCol, row: nextRow, colSpan: nextColSpan, rowSpan: nextRowSpan },
+            constrained: nextCol !== requestedCol || nextRow !== requestedRow
+                || nextColSpan !== requestedColSpan || nextRowSpan !== requestedRowSpan,
         };
     }
     applyCanvasKeyboardDrag(item, key, delta) {
@@ -42101,21 +42834,11 @@ class DynamicWidgetPageComponent {
             row: Math.max(1, item.row + delta),
         };
     }
-    applyCanvasKeyboardResize(item, key, delta) {
-        if (item.constraints?.lockSize)
-            return item;
-        const columns = this.canvas?.columns || 1;
-        const constraints = this.resolveCanvasConstraints(item, columns);
-        if (key === 'ArrowLeft' || key === 'ArrowRight') {
-            return {
-                ...item,
-                colSpan: this.clampNumber(item.colSpan + delta, constraints.minColSpan, Math.min(constraints.maxColSpan, columns - item.col + 1)),
-            };
-        }
-        return {
-            ...item,
-            rowSpan: this.clampNumber(item.rowSpan + delta, constraints.minRowSpan, constraints.maxRowSpan),
-        };
+    applyCanvasKeyboardResize(item, key, delta, widgetKey) {
+        const horizontal = key === 'ArrowLeft' || key === 'ArrowRight';
+        const contentHeight = this.measureCanvasContentHeight(widgetKey);
+        return this.applyCanvasResize(item, { startItem: item, columns: this.canvas?.columns || 1, resizeHandle: 'south-east', contentHeight,
+            minimumContentHeight: this.measureCanvasMinimumHeight(widgetKey) }, horizontal ? delta : 0, horizontal ? 0 : contentHeight !== undefined ? delta * 16 : delta);
     }
     pageSettingsLabel() {
         return this.t('controls.pageSettings', 'Configurar página');
@@ -42126,6 +42849,15 @@ class DynamicWidgetPageComponent {
     resizeWidgetLabel() {
         return this.t('controls.resizeWidget', 'Redimensionar widget');
     }
+    resizeAlternativeLabel() {
+        return this.t('controls.resizeAlternative', 'Controles alternativos de tamanho');
+    }
+    resizeSelectLabel() {
+        return this.t('controls.resizeSelect', 'Selecione um widget');
+    }
+    resizeHelpLabel() {
+        return this.t('controls.resizeHelp', 'Selecione o widget. Arraste uma borda ou canto pelos botões, ou use as setas do teclado.');
+    }
     resizeHandleLabel(handle) {
         return this.t(`controls.resize.${handle}`, this.resizeWidgetLabel());
     }
@@ -42147,6 +42879,11 @@ class DynamicWidgetPageComponent {
         return this.t('announcements.swapped', 'Widget trocado com {{target}}: {{widget}}', { widget: widgetKey, target: targetWidgetKey });
     }
     positionedCanvasAnnouncement(action, item) {
+        const size = this.canvas?.autoRows === 'content' ? contentSize(item) : null;
+        if (size)
+            return this.t('announcements.contentSize', '{{action}}. Largura {{columns}} colunas, altura {{height}} pixels, recuo superior {{top}} pixels.', {
+                action, columns: item.colSpan, height: size.heightPx, top: size.offsetTopPx,
+            });
         return this.t('announcements.position', '{{action}} para coluna {{col}}, linha {{row}}, largura {{colSpan}}, altura {{rowSpan}}.', {
             action,
             col: item.col,
@@ -42164,6 +42901,8 @@ class DynamicWidgetPageComponent {
         const maxColSpan = Math.max(minColSpan, item.constraints?.maxColSpan || columns);
         const maxRowSpan = Math.max(minRowSpan, item.constraints?.maxRowSpan || Number.MAX_SAFE_INTEGER);
         return {
+            minHeightPx: contentHeightLimits(item).min,
+            maxHeightPx: contentHeightLimits(item).max,
             minColSpan,
             minRowSpan,
             maxColSpan,
@@ -42186,10 +42925,7 @@ class DynamicWidgetPageComponent {
             rowSpan,
         };
     }
-    resolveCanvasCollisionPolicy(canvas, interactionKind) {
-        if (interactionKind === 'resize') {
-            return 'block';
-        }
+    resolveCanvasCollisionPolicy(canvas) {
         return canvas.collisionPolicy === 'swap' ? 'swap' : 'block';
     }
     resolveCanvasPlacement(widgetKey, current, candidate, canvas, collisionPolicy) {
@@ -42278,11 +43014,15 @@ class DynamicWidgetPageComponent {
             leftBottom >= right.row);
     }
     isSameCanvasItem(left, right) {
+        const leftSize = typeof left.contentSize === 'object' ? left.contentSize : undefined;
+        const rightSize = typeof right.contentSize === 'object' ? right.contentSize : undefined;
         return (left.col === right.col &&
             left.row === right.row &&
             left.colSpan === right.colSpan &&
             left.rowSpan === right.rowSpan &&
-            left.zIndex === right.zIndex);
+            left.zIndex === right.zIndex &&
+            leftSize?.heightPx === rightSize?.heightPx &&
+            (leftSize?.offsetTopPx ?? 0) === (rightSize?.offsetTopPx ?? 0));
     }
     clampCanvasCol(col, span, columns) {
         return this.clampNumber(col, 1, Math.max(1, columns - span + 1));
@@ -42479,6 +43219,12 @@ class DynamicWidgetPageComponent {
             return null;
         return `${canvasItem.row} / span ${canvasItem.rowSpan}`;
     }
+    widgetContentSize(widget) {
+        if (this.canvas?.autoRows !== 'content')
+            return null;
+        const item = this.resolveRenderedCanvasItem(widget) || this.canvas.items[widget.key];
+        return item ? contentSize(item) : null;
+    }
     widgetZIndex(widget) {
         return this.resolveRenderedCanvasItem(widget)?.zIndex ?? null;
     }
@@ -42794,7 +43540,7 @@ class DynamicWidgetPageComponent {
         throw new Error('DynamicWidgetPageComponent no longer accepts `page.connections`. Use `composition.links` only.');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicWidgetPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicWidgetPageComponent, isStandalone: true, selector: "praxis-dynamic-page", inputs: { page: "page", context: "context", strictValidation: "strictValidation", enableCustomization: "enableCustomization", authoringCapabilities: "authoringCapabilities", showPageSettingsButton: "showPageSettingsButton", shellEditorComponent: "shellEditorComponent", pageEditorComponent: "pageEditorComponent", autoPersist: "autoPersist", pageIdentity: "pageIdentity", componentInstanceId: "componentInstanceId", showWidgetAssistantButton: "showWidgetAssistantButton" }, outputs: { pageChange: "pageChange", pageAuthoringChange: "pageAuthoringChange", widgetEvent: "widgetEvent", widgetSelectionChange: "widgetSelectionChange", widgetAssistantRequested: "widgetAssistantRequested", widgetDiagnosticsChange: "widgetDiagnosticsChange" }, host: { listeners: { "window:resize": "onWindowResize()", "window:pointermove": "onCanvasPointerMove($event)", "window:pointerup": "onCanvasPointerUp($event)", "window:pointercancel": "onCanvasPointerCancel($event)" } }, providers: [providePraxisI18nConfig(DYNAMIC_WIDGET_PAGE_I18N_CONFIG)], viewQueries: [{ propertyName: "pageCanvasHost", first: true, predicate: ["pageCanvasHost"], descendants: true }, { propertyName: "widgetLoaders", predicate: ["widgetLoader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicWidgetPageComponent, isStandalone: true, selector: "praxis-dynamic-page", inputs: { page: "page", context: "context", strictValidation: "strictValidation", enableCustomization: "enableCustomization", authoringCapabilities: "authoringCapabilities", showPageSettingsButton: "showPageSettingsButton", shellEditorComponent: "shellEditorComponent", pageEditorComponent: "pageEditorComponent", autoPersist: "autoPersist", pageIdentity: "pageIdentity", componentInstanceId: "componentInstanceId", showWidgetAssistantButton: "showWidgetAssistantButton" }, outputs: { pageChange: "pageChange", pageAuthoringChange: "pageAuthoringChange", widgetEvent: "widgetEvent", widgetSelectionChange: "widgetSelectionChange", widgetAssistantRequested: "widgetAssistantRequested", widgetDiagnosticsChange: "widgetDiagnosticsChange" }, host: { listeners: { "lostpointercapture": "onCanvasPointerCancel($event)", "window:keydown.escape": "onCanvasEscape($event)", "window:resize": "onWindowResize()", "window:pointermove": "onCanvasPointerMove($event)", "window:pointerup": "onCanvasPointerUp($event)", "window:pointercancel": "onCanvasPointerCancel($event)" } }, providers: [providePraxisI18nConfig(DYNAMIC_WIDGET_PAGE_I18N_CONFIG)], viewQueries: [{ propertyName: "pageCanvasHost", first: true, predicate: ["pageCanvasHost"], descendants: true }, { propertyName: "widgetLoaders", predicate: ["widgetLoader"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="pdx-page-wrapper"
       [class.editing]="enableCustomization"
@@ -42815,6 +43561,106 @@ class DynamicWidgetPageComponent {
           (click)="openPageSettings()"
         ></button>
       }
+      @if (canCustomizeCanvas() && isCanvasMode()) {
+        <details class="pdx-canvas-resize-alternative" data-testid="canvas-resize-alternative"
+          [attr.inert]="resizePopoverOrigin() && selectedCanvasWidget() ? '' : null">
+          <summary>{{ resizeAlternativeLabel() }}</summary>
+        <div class="pdx-canvas-tools" data-testid="canvas-resize-tools"
+          [attr.inert]="resizePopoverOrigin() && selectedCanvasWidget() ? '' : null"
+          [attr.data-resize-widget-key]="selectedCanvasWidget()?.key || null"
+          role="group" [attr.aria-label]="resizeWidgetLabel()">
+          <label class="pdx-canvas-tools-target">
+            <span>{{ resizeWidgetLabel() }}</span>
+            <select data-testid="canvas-resize-target"
+              [disabled]="canvasInteractionActive()"
+              (change)="selectCanvasResizeTarget($event)">
+              <option value="" disabled [selected]="!selectedCanvasWidget()">{{ resizeSelectLabel() }}</option>
+              @for (widget of widgets(); track widget.key) {
+                <option [value]="widget.key" [selected]="isWidgetSelected(widget.key)">{{ widgetContextLabel(widget) }}</option>
+              }
+            </select>
+          </label>
+          <div class="pdx-canvas-tools-directions">
+            @for (handle of canvasResizeHandles; track handle.id) {
+              <button class="pdx-canvas-resize" type="button"
+                [praxisIconButton]="'ms:' + handle.icon"
+                [attr.data-resize-handle]="handle.id"
+                [attr.aria-label]="resizeHandleLabel(handle.id)"
+                [matTooltip]="resizeHandleLabel(handle.id)"
+                [disabled]="!selectedCanvasWidget()"
+                (pointerdown)="onSelectedCanvasResizePointerDown(handle.id, $event)"
+                (keydown)="onSelectedCanvasResizeKeydown(handle.id, $event)">
+              </button>
+            }
+          </div>
+          <p class="pdx-canvas-tools-hint">{{ resizeHelpLabel() }}</p>
+        </div>
+        </details>
+      }
+      @if (resizePopoverOrigin(); as origin) {
+        @if (canCustomizeCanvas() && isCanvasMode() && selectedCanvasWidget(); as widget) {
+          <ng-template cdkConnectedOverlay #resizeOverlay="cdkConnectedOverlay"
+            [cdkConnectedOverlayOrigin]="origin"
+            [cdkConnectedOverlayOpen]="true"
+            [cdkConnectedOverlayPositions]="resizePopoverPositions"
+            [cdkConnectedOverlayPush]="true"
+            [cdkConnectedOverlayViewportMargin]="12"
+            [cdkConnectedOverlayHasBackdrop]="false"
+            (attach)="focusResizePopover(resizeOverlay.overlayRef.overlayElement)"
+            (detach)="closeResizePopover(false)"
+            (overlayOutsideClick)="onResizePopoverOutsideClick($event)"
+            (overlayKeydown)="onResizePopoverKeydown($event)">
+            <section class="pdx-resize-popover" data-testid="canvas-context-resize"
+              [class.pdx-resize-popover--gesturing]="!!contextualResizeHandle()"
+              role="region" [id]="resizePopoverId" [attr.aria-label]="resizeWidgetLabel()"
+              (pointerdown)="$event.stopPropagation()" (click)="$event.stopPropagation()">
+              <header>
+                <div><strong>{{ resizeWidgetLabel() }}</strong><span>{{ widgetContextLabel(widget) }}</span></div>
+                <button type="button" praxisIconButton="ms:close"
+                  [attr.aria-label]="resizeCloseLabel()" [matTooltip]="resizeCloseLabel()"
+                  (click)="closeResizePopover(true)"></button>
+              </header>
+              <div class="pdx-canvas-tools-directions">
+                @for (handle of contextualResizeHandles; track handle.id) {
+                  <button class="pdx-canvas-resize" type="button"
+                    [praxisIconButton]="'ms:' + handle.icon"
+                    [attr.data-resize-handle]="handle.id"
+                    [style.grid-area]="resizePopoverGridArea(handle.id)"
+                    [class.pdx-resize-active-handle]="contextualResizeHandle() === handle.id"
+                    [attr.aria-label]="resizeHandleLabel(handle.id)"
+                    [matTooltip]="resizeHandleLabel(handle.id)"
+                    [matTooltipDisabled]="!!contextualResizeHandle()"
+                    (pointerdown)="onSelectedCanvasResizePointerDown(handle.id, $event)"
+                    (keydown)="onSelectedCanvasResizeKeydown(handle.id, $event)"></button>
+                }
+              </div>
+              <p class="pdx-canvas-tools-hint">{{ resizeContextHelpLabel() }}</p>
+            </section>
+          </ng-template>
+        }
+      }
+      @if (resizeFeedbackOrigin(); as origin) {
+        @if (selectedCanvasWidget(); as widget) {
+          @if (resizeFeedback(widget.key); as feedback) {
+            <ng-template cdkConnectedOverlay #feedbackOverlay="cdkConnectedOverlay"
+              [cdkConnectedOverlayOrigin]="origin"
+              [cdkConnectedOverlayOpen]="true"
+              [cdkConnectedOverlayPositions]="resizeFeedbackPositions"
+              [cdkConnectedOverlayPush]="true"
+              [cdkConnectedOverlayViewportMargin]="12"
+              [cdkConnectedOverlayHasBackdrop]="false"
+              [cdkConnectedOverlayDisableClose]="true"
+              (attach)="prepareResizeFeedbackOverlay(feedbackOverlay.overlayRef.overlayElement)">
+              <div class="pdx-resize-feedback pdx-resize-feedback--floating"
+                data-testid="canvas-resize-feedback" [attr.data-feedback-widget]="widget.key"
+                [attr.data-resize-feedback]="feedback">
+                <mat-icon aria-hidden="true">{{ feedback === 'valid' ? 'check_circle' : feedback === 'minimum' ? 'warning' : 'block' }}</mat-icon>
+                <span><strong>{{ widgetContextLabel(widget) }}</strong>{{ resizeFeedbackLabel(feedback) }}</span>
+              </div>
+            </ng-template>
+          }
+        }
+      }
       <div
         #pageCanvasHost
         class="pdx-page"
@@ -42828,6 +43674,7 @@ class DynamicWidgetPageComponent {
             <div
               class="pdx-widget pdx-widget--canvas"
               [attr.data-widget-key]="w.key"
+              [attr.data-resize-feedback]="resizeFeedback(w.key)"
               [class.pdx-widget--interactive]="canSelectWidgets()"
               [class.pdx-widget--selected]="
                 canSelectWidgets() && isWidgetSelected(w.key)
@@ -42841,30 +43688,16 @@ class DynamicWidgetPageComponent {
               [class]="widgetClassName(w)"
               [style.gridColumn]="widgetGridColumn(w)"
               [style.gridRow]="widgetGridRow(w)"
+              [style.height.px]="canvasShell.collapsed ? null : widgetContentSize(w)?.heightPx"
+              [style.marginTop.px]="canvasShell.collapsed ? null : widgetContentSize(w)?.offsetTopPx"
+              [style.alignSelf]="widgetContentSize(w) ? 'start' : null"
               [style.zIndex]="widgetZIndex(w)"
               (pointerdown)="selectWidget(w.key)"
               (click)="selectWidgetFromHostEvent(w.key, $event)"
               (focusin)="selectWidgetFromHostEvent(w.key, $event)"
             >
-              @if (canCustomizeCanvas()) {
-                @for (handle of canvasResizeHandles; track handle.id) {
-                  <button
-                    class="pdx-canvas-resize"
-                    [ngClass]="handle.className"
-                    type="button"
-                    [attr.data-resize-handle]="handle.id"
-                    [attr.aria-label]="resizeHandleLabel(handle.id)"
-                    [title]="resizeHandleLabel(handle.id)"
-                    (pointerdown)="startCanvasResize(w.key, handle.id, $event)"
-                    (keydown)="
-                      onCanvasResizeHandleKeydown(w.key, handle.id, $event)
-                    "
-                  >
-                    <span class="pdx-canvas-resize-grip"></span>
-                  </button>
-                }
-              }
               <praxis-widget-shell
+                #canvasShell
                 [shell]="widgetShellForRender(w)"
                 [context]="mergedContext"
                 [dragSurfaceEnabled]="canCustomizeCanvas() && isCanvasMode()"
@@ -42886,8 +43719,37 @@ class DynamicWidgetPageComponent {
                   (widgetDiagnostic)="onWidgetDiagnostic(w.key, $event)"
                 ></ng-container>
               </praxis-widget-shell>
+              @if (resizeFeedback(w.key); as feedback) {
+                @if (!resizeFeedbackOrigin() || selectedCanvasWidget()?.key !== w.key) {
+                <div class="pdx-resize-feedback" data-testid="canvas-resize-feedback">
+                  <mat-icon aria-hidden="true">{{ feedback === 'valid' ? 'check_circle' : feedback === 'minimum' ? 'warning' : 'block' }}</mat-icon>
+                  <span>{{ resizeFeedbackLabel(feedback) }}</span>
+                </div>
+                }
+              }
+              @if (canShowCanvasEdges(w.key)) {
+                <div class="pdx-canvas-edges" data-testid="canvas-edge-controls"
+                  [attr.inert]="resizePopoverOrigin() ? '' : null"
+                  role="group" [attr.aria-label]="resizeWidgetLabel()">
+                  @for (handle of canvasResizeHandles; track handle.id) {
+                    <button type="button" class="pdx-canvas-edge"
+                      [attr.data-canvas-edge]="handle.id"
+                      [attr.aria-label]="resizeHandleLabel(handle.id)"
+                      [matTooltip]="resizeHandleLabel(handle.id)"
+                      [matTooltipDisabled]="canvasInteractionActive()"
+                      (pointerdown)="onSelectedCanvasResizePointerDown(handle.id, $event)"
+                      (keydown)="onSelectedCanvasResizeKeydown(handle.id, $event)"
+                      (click)="$event.stopPropagation()"></button>
+                  }
+                </div>
+              }
               @if (shouldRenderWidgetContextOverlay(w)) {
                 <praxis-dynamic-widget-context-toolbar
+                  [showResize]="canCustomizeCanvas()"
+                  [resizeLabel]="resizeWidgetLabel()"
+                  [resizeControls]="resizePopoverId"
+                  [resizeExpanded]="!!resizePopoverOrigin() && isWidgetSelected(w.key)"
+                  (resize)="toggleResizePopover(w.key)"
                   [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                   [contextLabel]="widgetContextLabel(w)"
                   [contextTooltip]="widgetContextTooltip(w)"
@@ -42916,7 +43778,7 @@ class DynamicWidgetPageComponent {
               }
             </div>
           }
-          @if (canvasPreviewItem()) {
+          @if (canvasPreviewItem() && !hasResizeFeedback()) {
             <div
               class="pdx-canvas-snap-preview"
               [class.pdx-canvas-snap-preview--invalid]="canvasPreviewInvalid()"
@@ -43189,15 +44051,19 @@ class DynamicWidgetPageComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.pdx-page-wrapper{position:relative;display:block;background:var(--pdx-page-bg, transparent);color:var(--pdx-page-color, inherit)}.pdx-page{display:grid;gap:var(--pdx-page-gap, 12px);grid-template-columns:minmax(0,1fr)}.pdx-page--canvas{align-items:start;grid-auto-flow:dense}.pdx-page-wrapper.editing .pdx-page--canvas{padding-block-start:var(--pdx-canvas-context-toolbar-safe-area, 22px);padding-block-end:22px;padding-inline:22px;box-sizing:border-box}.pdx-page-settings{position:sticky;top:8px;z-index:2;color:inherit;margin-bottom:6px}.pdx-widget{position:relative;background:var(--pfx-surface, transparent);border-radius:6px;min-width:0;min-height:0}.pdx-widget--interactive{cursor:pointer}.pdx-widget--selected:before{content:\"\";position:absolute;inset:0;border:1px dashed color-mix(in srgb,var(--md-sys-color-primary) 34%,transparent);border-radius:14px;pointer-events:none;z-index:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent),0 8px 20px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent)}.pdx-widget--canvas{align-self:stretch;--pdx-resize-gradient-horizontal: linear-gradient( 90deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-resize-gradient-vertical: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-resize-gradient-diagonal-se: linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-resize-gradient-diagonal-sw: linear-gradient( 225deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-se)}.pdx-widget--canvas:after{content:\"\";position:absolute;inset:0;padding:2px;border-radius:14px;background:var(--pdx-active-resize-gradient);opacity:0;pointer-events:none;transition:opacity .14s ease,filter .14s ease;filter:saturate(1.02) drop-shadow(0 0 5px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.pdx-widget--canvas-selected:before,.pdx-widget--canvas-blocked:before{content:\"\";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:1;transition:opacity .14s ease,box-shadow .14s ease,border-color .14s ease}.pdx-widget--canvas-blocked:before{border:1px solid color-mix(in srgb,var(--md-sys-color-error) 74%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 20%,transparent),0 10px 24px color-mix(in srgb,var(--md-sys-color-error) 12%,transparent)}.pdx-widget--canvas:has(.pdx-canvas-resize:hover):after,.pdx-widget--canvas:has(.pdx-canvas-resize:focus-visible):after{opacity:.82}.pdx-widget--canvas:has(.pdx-canvas-resize--north:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--north:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--south:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--south:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-horizontal)}.pdx-widget--canvas:has(.pdx-canvas-resize--east:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--east:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--west:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--west:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-vertical)}.pdx-widget--canvas:has(.pdx-canvas-resize--north-east:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--north-east:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--south-west:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--south-west:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-sw)}.pdx-widget--canvas:has(.pdx-canvas-resize--north-west:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--north-west:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--south-east:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--south-east:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-se)}.pdx-canvas-resize{position:absolute;z-index:7;border:0;padding:0;margin:0;background:transparent;touch-action:none;cursor:pointer;opacity:0;pointer-events:none;transform:scale(.94);transition:opacity .14s ease,transform .14s ease,filter .14s ease;filter:saturate(.9)}.pdx-widget--canvas:hover .pdx-canvas-resize,.pdx-widget--canvas:focus-within .pdx-canvas-resize,.pdx-widget--canvas-selected .pdx-canvas-resize{opacity:.88;pointer-events:auto;transform:scale(1);filter:saturate(1)}.pdx-widget--canvas:has(.pdx-shell.expanded) .pdx-canvas-resize,.pdx-widget--canvas:has(.pdx-shell.fullscreen) .pdx-canvas-resize{opacity:0;pointer-events:none;transform:scale(.94)}.pdx-canvas-resize-grip{display:block;width:9px;height:9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 42%,var(--md-sys-color-outline-variant) 58%);background:color-mix(in srgb,var(--md-sys-color-surface) 92%,var(--md-sys-color-primary) 8%);box-shadow:0 1px 4px color-mix(in srgb,var(--md-sys-color-shadow) 10%,transparent);transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.pdx-canvas-resize:hover .pdx-canvas-resize-grip,.pdx-canvas-resize:focus-visible .pdx-canvas-resize-grip{border-color:color-mix(in srgb,var(--md-sys-color-primary) 58%,var(--md-sys-color-outline-variant) 42%);background:color-mix(in srgb,var(--md-sys-color-surface) 84%,var(--md-sys-color-primary) 16%);box-shadow:0 2px 7px color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent);transform:scale(1.04)}.pdx-canvas-resize--north,.pdx-canvas-resize--south{left:50%;width:52px;height:44px;margin-left:-26px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north{top:-22px;cursor:ns-resize}.pdx-canvas-resize--south{bottom:-22px;cursor:ns-resize}.pdx-canvas-resize--east,.pdx-canvas-resize--west{top:50%;width:44px;height:52px;margin-top:-26px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--east{right:-22px;cursor:ew-resize}.pdx-canvas-resize--west{left:-22px;cursor:ew-resize}.pdx-canvas-resize--north-east,.pdx-canvas-resize--north-west,.pdx-canvas-resize--south-east,.pdx-canvas-resize--south-west{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north-east{top:-22px;right:-22px;cursor:nesw-resize}.pdx-canvas-resize--north-west{top:-22px;left:-22px;cursor:nwse-resize}.pdx-canvas-resize--south-east{bottom:-22px;right:-22px;cursor:nwse-resize}.pdx-canvas-resize--south-west{bottom:-22px;left:-22px;cursor:nesw-resize}.pdx-canvas-snap-preview{position:relative;align-self:stretch;border-radius:12px;pointer-events:none;z-index:0;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 42%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 55%,transparent);animation:pdx-snap-preview-pulse .48s ease-out infinite alternate}.pdx-canvas-snap-preview:before,.pdx-canvas-snap-preview:after{content:\"\";position:absolute;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 82%,var(--md-sys-color-tertiary) 18%);opacity:.72}.pdx-canvas-snap-preview:before{inset:0 auto 0 0;width:3px}.pdx-canvas-snap-preview:after{inset:0 0 auto;height:3px}.pdx-canvas-snap-preview--invalid{background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-error) 18%,transparent),color-mix(in srgb,var(--md-sys-color-error-container) 22%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 58%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 40%,transparent)}.pdx-canvas-snap-preview--invalid:before,.pdx-canvas-snap-preview--invalid:after{background:color-mix(in srgb,var(--md-sys-color-error) 86%,var(--md-sys-color-error-container) 14%)}.pdx-canvas-resize:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-canvas-resize:hover .pdx-canvas-resize-grip,.pdx-canvas-resize:focus-visible .pdx-canvas-resize-grip{border-color:transparent;box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent),var(--mat-elevation-level3)}.pdx-canvas-resize--north:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--north:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--south:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--south:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-horizontal)}.pdx-canvas-resize--east:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--east:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--west:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--west:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-vertical)}.pdx-canvas-resize--north-east:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--north-east:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--south-west:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--south-west:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-diagonal-sw)}.pdx-canvas-resize--north-west:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--north-west:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--south-east:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--south-east:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-diagonal-se)}.pdx-canvas-resize:hover .pdx-canvas-resize-grip,.pdx-canvas-resize:focus-visible .pdx-canvas-resize-grip{transform:scale(1.08)}@keyframes pdx-snap-preview-pulse{0%{opacity:.72;transform:scale(.996)}to{opacity:1;transform:scale(1)}}.pdx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pdx-group{display:grid;gap:12px;grid-column:1 / -1;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 76%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent)}.pdx-group--hero{padding:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent),color-mix(in srgb,var(--md-sys-color-surface-container-low) 86%,transparent))}.pdx-group--rail{align-self:start}.pdx-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.pdx-group-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.pdx-group-content{display:grid;gap:12px}.pdx-group-content--stack{grid-template-columns:minmax(0,1fr)}.pdx-group-content--row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pdx-group-content--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.pdx-group-tabs{display:grid;gap:12px}.pdx-tabs-header{display:flex;flex-wrap:wrap;gap:8px}.pdx-tab-chip{appearance:none;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border-radius:999px;padding:8px 12px;font:inherit;cursor:pointer}.pdx-tab-chip.active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 78%,transparent);color:var(--md-sys-color-on-primary-container)}.pdx-page-wrapper.editing .pdx-widget-settings{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.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: DynamicWidgetContextToolbarComponent, selector: "praxis-dynamic-widget-context-toolbar", inputs: ["toolbarLabel", "contextLabel", "contextTooltip", "showAssistant", "assistantLabel", "assistantTooltip", "showComponentSettings", "componentSettingsBusy", "componentSettingsLabel", "componentSettingsTooltip", "showShellSettings", "shellSettingsLabel", "shellSettingsTooltip", "showRemove", "moreActionsLabel", "removeLabel"], outputs: ["assistant", "componentSettings", "shellSettings", "remove"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: WidgetShellComponent, selector: "praxis-widget-shell", inputs: ["shell", "context", "dragSurfaceEnabled", "dragSurfaceLabel"], outputs: ["action", "dragSurfacePointerDown", "dragSurfaceKeydown"] }] });
+  `, isInline: true, styles: [":host{display:block;min-width:0}.pdx-page-wrapper{position:relative;display:block;background:var(--pdx-page-bg, transparent);color:var(--pdx-page-color, inherit)}.pdx-page{display:grid;gap:var(--pdx-page-gap, 12px);grid-template-columns:minmax(0,1fr)}.pdx-page--canvas{align-items:start;grid-auto-flow:dense}.pdx-page-wrapper.editing .pdx-page--canvas{padding-block-start:var(--pdx-canvas-context-toolbar-safe-area, 22px);padding-block-end:22px;padding-inline:22px;box-sizing:border-box}.pdx-page-settings{position:sticky;top:8px;z-index:2;color:inherit;margin-bottom:6px}.pdx-widget{position:relative;background:var(--pfx-surface, transparent);border-radius:6px;min-width:0;min-height:0}.pdx-widget--interactive{cursor:pointer}.pdx-widget--selected:before{content:\"\";position:absolute;inset:0;border:1px dashed color-mix(in srgb,var(--md-sys-color-primary) 34%,transparent);border-radius:14px;pointer-events:none;z-index:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent),0 8px 20px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent)}.pdx-widget--canvas{align-self:stretch;--pdx-resize-gradient-diagonal-se: linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-se)}.pdx-widget--canvas:after{content:\"\";position:absolute;inset:0;padding:2px;border-radius:14px;background:var(--pdx-active-resize-gradient);opacity:0;pointer-events:none;transition:opacity .14s ease,filter .14s ease;filter:saturate(1.02) drop-shadow(0 0 5px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.pdx-widget--canvas-selected:before,.pdx-widget--canvas-blocked:before{content:\"\";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:1;transition:opacity .14s ease,box-shadow .14s ease,border-color .14s ease}.pdx-widget--canvas-blocked:before{border:1px solid color-mix(in srgb,var(--md-sys-color-error) 74%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 20%,transparent),0 10px 24px color-mix(in srgb,var(--md-sys-color-error) 12%,transparent)}.pdx-widget--canvas-selected:has(>.pdx-canvas-edges .pdx-canvas-edge:hover):after,.pdx-widget--canvas-selected:has(>.pdx-canvas-edges .pdx-canvas-edge:focus-visible):after,.pdx-page-wrapper:has(>.pdx-canvas-resize-alternative .pdx-canvas-resize:hover)>.pdx-page>.pdx-widget--canvas-selected:after,.pdx-page-wrapper:has(>.pdx-canvas-resize-alternative .pdx-canvas-resize:focus-visible)>.pdx-page>.pdx-widget--canvas-selected:after{opacity:.82}.pdx-canvas-resize-alternative>summary{display:list-item;width:fit-content;padding:12px;min-height:44px;box-sizing:border-box;cursor:pointer;font-size:12px;color:var(--md-sys-color-on-surface-variant)}[data-resize-feedback=valid]{--pdx-resize-feedback-color: #27864b}[data-resize-feedback=minimum]{--pdx-resize-feedback-color: #bc8a00}[data-resize-feedback=blocked]{--pdx-resize-feedback-color: var(--md-sys-color-error)}.pdx-widget--canvas[data-resize-feedback]:after{background:var(--pdx-resize-feedback-color);opacity:1;z-index:2}.pdx-resize-feedback{position:absolute;inset-inline:8px;bottom:8px;width:fit-content;max-width:calc(100% - 16px);box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:4px 8px;border:2px solid var(--pdx-resize-feedback-color);border-radius:8px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);font-size:12px;line-height:18px;pointer-events:none;z-index:3}.pdx-resize-feedback mat-icon{flex:0 0 18px;width:18px;height:18px;font-size:18px}.pdx-resize-feedback--floating{position:static;max-width:min(320px,calc(100vw - 24px));overflow-wrap:anywhere}.pdx-resize-feedback--floating strong{display:block}.pdx-canvas-edges{position:absolute;inset:0;pointer-events:none;z-index:2}.pdx-canvas-edge{position:absolute;display:grid;place-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--md-sys-color-primary);pointer-events:auto;touch-action:none;transform:translate(-50%,-50%)}.pdx-canvas-edge:after{content:\"\";width:8px;height:8px;border:2px solid currentColor;border-radius:2px;background:var(--md-sys-color-surface)}.pdx-canvas-edge:hover:after,.pdx-canvas-edge:focus-visible:after{background:var(--md-sys-color-primary-container)}.pdx-canvas-edge[data-canvas-edge=north-west]{left:0;top:0;cursor:nwse-resize}.pdx-canvas-edge[data-canvas-edge=north]{left:50%;top:0;cursor:ns-resize}.pdx-canvas-edge[data-canvas-edge=north-east]{left:100%;top:0;cursor:nesw-resize}.pdx-canvas-edge[data-canvas-edge=east]{left:100%;top:50%;cursor:ew-resize}.pdx-canvas-edge[data-canvas-edge=south-east]{left:100%;top:100%;cursor:nwse-resize}.pdx-canvas-edge[data-canvas-edge=south]{left:50%;top:100%;cursor:ns-resize}.pdx-canvas-edge[data-canvas-edge=south-west]{left:0;top:100%;cursor:nesw-resize}.pdx-canvas-edge[data-canvas-edge=west]{left:0;top:50%;cursor:ew-resize}.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.expanded)>.pdx-page>.pdx-widget>.pdx-canvas-edges,.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.fullscreen)>.pdx-page>.pdx-widget>.pdx-canvas-edges{display:none}.pdx-canvas-tools{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:end;gap:8px 16px;padding:12px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface-container-low);border-radius:12px}.pdx-resize-popover{box-sizing:border-box;display:grid;gap:12px;width:248px;max-width:calc(100vw - 24px);padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.pdx-resize-popover header{display:flex;align-items:start;gap:8px}.pdx-resize-popover header div{display:grid;gap:4px;flex:1;min-width:0}.pdx-resize-popover strong{font-size:13px}.pdx-resize-popover header span{font-size:12px;overflow-wrap:anywhere;color:var(--md-sys-color-on-surface-variant)}.pdx-resize-popover header button{flex:0 0 44px;width:44px;height:44px}.pdx-resize-popover .pdx-canvas-tools-directions{grid-template-columns:repeat(3,44px);justify-content:space-between}.pdx-resize-popover--gesturing{background:transparent;border-color:transparent;pointer-events:none}.pdx-resize-popover--gesturing header,.pdx-resize-popover--gesturing .pdx-canvas-tools-hint,.pdx-resize-popover--gesturing .pdx-canvas-resize{visibility:hidden}.pdx-resize-popover--gesturing .pdx-canvas-resize.pdx-resize-active-handle{visibility:visible;pointer-events:auto;background:var(--md-sys-color-surface-container-high)}.pdx-canvas-tools-target{display:grid;gap:4px;flex:1 1 220px;min-width:0;font-size:12px;font-weight:600}.pdx-canvas-tools-target select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit}.pdx-canvas-tools-directions{display:grid;grid-template-columns:repeat(4,44px);gap:4px;max-width:100%}@container (min-width: 650px){.pdx-canvas-tools-directions{grid-template-columns:repeat(8,44px)}}.pdx-canvas-tools-hint{flex-basis:100%;margin:0;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.expanded)>.pdx-canvas-resize-alternative,.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.fullscreen)>.pdx-canvas-resize-alternative{visibility:hidden}.pdx-canvas-resize{flex:0 0 44px;width:44px;height:44px;touch-action:none;cursor:grab}.pdx-canvas-resize:active{cursor:grabbing}.pdx-canvas-resize:focus-visible,.pdx-canvas-edge:focus-visible,.pdx-canvas-resize-alternative>summary:focus-visible,.pdx-canvas-tools-target select:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-canvas-snap-preview{position:relative;align-self:stretch;border-radius:12px;pointer-events:none;z-index:0;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 42%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 55%,transparent);animation:pdx-snap-preview-pulse .48s ease-out infinite alternate}.pdx-canvas-snap-preview:before,.pdx-canvas-snap-preview:after{content:\"\";position:absolute;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 82%,var(--md-sys-color-tertiary) 18%);opacity:.72}.pdx-canvas-snap-preview:before{inset:0 auto 0 0;width:3px}.pdx-canvas-snap-preview:after{inset:0 0 auto;height:3px}.pdx-canvas-snap-preview--invalid{background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-error) 18%,transparent),color-mix(in srgb,var(--md-sys-color-error-container) 22%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 58%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 40%,transparent)}.pdx-canvas-snap-preview--invalid:before,.pdx-canvas-snap-preview--invalid:after{background:color-mix(in srgb,var(--md-sys-color-error) 86%,var(--md-sys-color-error-container) 14%)}@media(prefers-reduced-motion:reduce){.pdx-canvas-snap-preview{animation:none}.pdx-widget--canvas:after,.pdx-widget--canvas-selected:before,.pdx-widget--canvas-blocked:before{transition:none}}@media(forced-colors:active){.pdx-widget--canvas-selected:before{border:2px solid Highlight}.pdx-canvas-resize:focus-visible,.pdx-canvas-edge:focus-visible,.pdx-canvas-resize-alternative>summary:focus-visible,.pdx-canvas-tools-target select:focus-visible{outline-color:Highlight}}@keyframes pdx-snap-preview-pulse{0%{opacity:.72;transform:scale(.996)}to{opacity:1;transform:scale(1)}}.pdx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pdx-group{display:grid;gap:12px;grid-column:1 / -1;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 76%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent)}.pdx-group--hero{padding:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent),color-mix(in srgb,var(--md-sys-color-surface-container-low) 86%,transparent))}.pdx-group--rail{align-self:start}.pdx-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.pdx-group-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.pdx-group-content{display:grid;gap:12px}.pdx-group-content--stack{grid-template-columns:minmax(0,1fr)}.pdx-group-content--row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pdx-group-content--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.pdx-group-tabs{display:grid;gap:12px}.pdx-tabs-header{display:flex;flex-wrap:wrap;gap:8px}.pdx-tab-chip{appearance:none;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border-radius:999px;padding:8px 12px;font:inherit;cursor:pointer}.pdx-tab-chip.active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 78%,transparent);color:var(--md-sys-color-on-primary-container)}.pdx-page-wrapper.editing .pdx-widget-settings{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$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: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i4$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: DynamicWidgetContextToolbarComponent, selector: "praxis-dynamic-widget-context-toolbar", inputs: ["showResize", "resizeLabel", "resizeControls", "resizeExpanded", "toolbarLabel", "contextLabel", "contextTooltip", "showAssistant", "assistantLabel", "assistantTooltip", "showComponentSettings", "componentSettingsBusy", "componentSettingsLabel", "componentSettingsTooltip", "showShellSettings", "shellSettingsLabel", "shellSettingsTooltip", "showRemove", "moreActionsLabel", "removeLabel"], outputs: ["resize", "assistant", "componentSettings", "shellSettings", "remove"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: WidgetShellComponent, selector: "praxis-widget-shell", inputs: ["shell", "context", "dragSurfaceEnabled", "dragSurfaceLabel"], outputs: ["action", "dragSurfacePointerDown", "dragSurfaceKeydown"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicWidgetPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-dynamic-page', standalone: true, imports: [
+            args: [{ selector: 'praxis-dynamic-page', host: {
+                        '(lostpointercapture)': 'onCanvasPointerCancel($event)',
+                        '(window:keydown.escape)': 'onCanvasEscape($event)',
+                    }, standalone: true, imports: [
                         CommonModule,
                         MatIconModule,
                         MatTooltipModule,
                         PraxisIconButtonComponent,
+                        OverlayModule,
                         DynamicWidgetContextToolbarComponent,
                         DynamicWidgetLoaderDirective,
                         WidgetShellComponent,
@@ -43222,6 +44088,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           (click)="openPageSettings()"
         ></button>
       }
+      @if (canCustomizeCanvas() && isCanvasMode()) {
+        <details class="pdx-canvas-resize-alternative" data-testid="canvas-resize-alternative"
+          [attr.inert]="resizePopoverOrigin() && selectedCanvasWidget() ? '' : null">
+          <summary>{{ resizeAlternativeLabel() }}</summary>
+        <div class="pdx-canvas-tools" data-testid="canvas-resize-tools"
+          [attr.inert]="resizePopoverOrigin() && selectedCanvasWidget() ? '' : null"
+          [attr.data-resize-widget-key]="selectedCanvasWidget()?.key || null"
+          role="group" [attr.aria-label]="resizeWidgetLabel()">
+          <label class="pdx-canvas-tools-target">
+            <span>{{ resizeWidgetLabel() }}</span>
+            <select data-testid="canvas-resize-target"
+              [disabled]="canvasInteractionActive()"
+              (change)="selectCanvasResizeTarget($event)">
+              <option value="" disabled [selected]="!selectedCanvasWidget()">{{ resizeSelectLabel() }}</option>
+              @for (widget of widgets(); track widget.key) {
+                <option [value]="widget.key" [selected]="isWidgetSelected(widget.key)">{{ widgetContextLabel(widget) }}</option>
+              }
+            </select>
+          </label>
+          <div class="pdx-canvas-tools-directions">
+            @for (handle of canvasResizeHandles; track handle.id) {
+              <button class="pdx-canvas-resize" type="button"
+                [praxisIconButton]="'ms:' + handle.icon"
+                [attr.data-resize-handle]="handle.id"
+                [attr.aria-label]="resizeHandleLabel(handle.id)"
+                [matTooltip]="resizeHandleLabel(handle.id)"
+                [disabled]="!selectedCanvasWidget()"
+                (pointerdown)="onSelectedCanvasResizePointerDown(handle.id, $event)"
+                (keydown)="onSelectedCanvasResizeKeydown(handle.id, $event)">
+              </button>
+            }
+          </div>
+          <p class="pdx-canvas-tools-hint">{{ resizeHelpLabel() }}</p>
+        </div>
+        </details>
+      }
+      @if (resizePopoverOrigin(); as origin) {
+        @if (canCustomizeCanvas() && isCanvasMode() && selectedCanvasWidget(); as widget) {
+          <ng-template cdkConnectedOverlay #resizeOverlay="cdkConnectedOverlay"
+            [cdkConnectedOverlayOrigin]="origin"
+            [cdkConnectedOverlayOpen]="true"
+            [cdkConnectedOverlayPositions]="resizePopoverPositions"
+            [cdkConnectedOverlayPush]="true"
+            [cdkConnectedOverlayViewportMargin]="12"
+            [cdkConnectedOverlayHasBackdrop]="false"
+            (attach)="focusResizePopover(resizeOverlay.overlayRef.overlayElement)"
+            (detach)="closeResizePopover(false)"
+            (overlayOutsideClick)="onResizePopoverOutsideClick($event)"
+            (overlayKeydown)="onResizePopoverKeydown($event)">
+            <section class="pdx-resize-popover" data-testid="canvas-context-resize"
+              [class.pdx-resize-popover--gesturing]="!!contextualResizeHandle()"
+              role="region" [id]="resizePopoverId" [attr.aria-label]="resizeWidgetLabel()"
+              (pointerdown)="$event.stopPropagation()" (click)="$event.stopPropagation()">
+              <header>
+                <div><strong>{{ resizeWidgetLabel() }}</strong><span>{{ widgetContextLabel(widget) }}</span></div>
+                <button type="button" praxisIconButton="ms:close"
+                  [attr.aria-label]="resizeCloseLabel()" [matTooltip]="resizeCloseLabel()"
+                  (click)="closeResizePopover(true)"></button>
+              </header>
+              <div class="pdx-canvas-tools-directions">
+                @for (handle of contextualResizeHandles; track handle.id) {
+                  <button class="pdx-canvas-resize" type="button"
+                    [praxisIconButton]="'ms:' + handle.icon"
+                    [attr.data-resize-handle]="handle.id"
+                    [style.grid-area]="resizePopoverGridArea(handle.id)"
+                    [class.pdx-resize-active-handle]="contextualResizeHandle() === handle.id"
+                    [attr.aria-label]="resizeHandleLabel(handle.id)"
+                    [matTooltip]="resizeHandleLabel(handle.id)"
+                    [matTooltipDisabled]="!!contextualResizeHandle()"
+                    (pointerdown)="onSelectedCanvasResizePointerDown(handle.id, $event)"
+                    (keydown)="onSelectedCanvasResizeKeydown(handle.id, $event)"></button>
+                }
+              </div>
+              <p class="pdx-canvas-tools-hint">{{ resizeContextHelpLabel() }}</p>
+            </section>
+          </ng-template>
+        }
+      }
+      @if (resizeFeedbackOrigin(); as origin) {
+        @if (selectedCanvasWidget(); as widget) {
+          @if (resizeFeedback(widget.key); as feedback) {
+            <ng-template cdkConnectedOverlay #feedbackOverlay="cdkConnectedOverlay"
+              [cdkConnectedOverlayOrigin]="origin"
+              [cdkConnectedOverlayOpen]="true"
+              [cdkConnectedOverlayPositions]="resizeFeedbackPositions"
+              [cdkConnectedOverlayPush]="true"
+              [cdkConnectedOverlayViewportMargin]="12"
+              [cdkConnectedOverlayHasBackdrop]="false"
+              [cdkConnectedOverlayDisableClose]="true"
+              (attach)="prepareResizeFeedbackOverlay(feedbackOverlay.overlayRef.overlayElement)">
+              <div class="pdx-resize-feedback pdx-resize-feedback--floating"
+                data-testid="canvas-resize-feedback" [attr.data-feedback-widget]="widget.key"
+                [attr.data-resize-feedback]="feedback">
+                <mat-icon aria-hidden="true">{{ feedback === 'valid' ? 'check_circle' : feedback === 'minimum' ? 'warning' : 'block' }}</mat-icon>
+                <span><strong>{{ widgetContextLabel(widget) }}</strong>{{ resizeFeedbackLabel(feedback) }}</span>
+              </div>
+            </ng-template>
+          }
+        }
+      }
       <div
         #pageCanvasHost
         class="pdx-page"
@@ -43235,6 +44201,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             <div
               class="pdx-widget pdx-widget--canvas"
               [attr.data-widget-key]="w.key"
+              [attr.data-resize-feedback]="resizeFeedback(w.key)"
               [class.pdx-widget--interactive]="canSelectWidgets()"
               [class.pdx-widget--selected]="
                 canSelectWidgets() && isWidgetSelected(w.key)
@@ -43248,30 +44215,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               [class]="widgetClassName(w)"
               [style.gridColumn]="widgetGridColumn(w)"
               [style.gridRow]="widgetGridRow(w)"
+              [style.height.px]="canvasShell.collapsed ? null : widgetContentSize(w)?.heightPx"
+              [style.marginTop.px]="canvasShell.collapsed ? null : widgetContentSize(w)?.offsetTopPx"
+              [style.alignSelf]="widgetContentSize(w) ? 'start' : null"
               [style.zIndex]="widgetZIndex(w)"
               (pointerdown)="selectWidget(w.key)"
               (click)="selectWidgetFromHostEvent(w.key, $event)"
               (focusin)="selectWidgetFromHostEvent(w.key, $event)"
             >
-              @if (canCustomizeCanvas()) {
-                @for (handle of canvasResizeHandles; track handle.id) {
-                  <button
-                    class="pdx-canvas-resize"
-                    [ngClass]="handle.className"
-                    type="button"
-                    [attr.data-resize-handle]="handle.id"
-                    [attr.aria-label]="resizeHandleLabel(handle.id)"
-                    [title]="resizeHandleLabel(handle.id)"
-                    (pointerdown)="startCanvasResize(w.key, handle.id, $event)"
-                    (keydown)="
-                      onCanvasResizeHandleKeydown(w.key, handle.id, $event)
-                    "
-                  >
-                    <span class="pdx-canvas-resize-grip"></span>
-                  </button>
-                }
-              }
               <praxis-widget-shell
+                #canvasShell
                 [shell]="widgetShellForRender(w)"
                 [context]="mergedContext"
                 [dragSurfaceEnabled]="canCustomizeCanvas() && isCanvasMode()"
@@ -43293,8 +44246,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   (widgetDiagnostic)="onWidgetDiagnostic(w.key, $event)"
                 ></ng-container>
               </praxis-widget-shell>
+              @if (resizeFeedback(w.key); as feedback) {
+                @if (!resizeFeedbackOrigin() || selectedCanvasWidget()?.key !== w.key) {
+                <div class="pdx-resize-feedback" data-testid="canvas-resize-feedback">
+                  <mat-icon aria-hidden="true">{{ feedback === 'valid' ? 'check_circle' : feedback === 'minimum' ? 'warning' : 'block' }}</mat-icon>
+                  <span>{{ resizeFeedbackLabel(feedback) }}</span>
+                </div>
+                }
+              }
+              @if (canShowCanvasEdges(w.key)) {
+                <div class="pdx-canvas-edges" data-testid="canvas-edge-controls"
+                  [attr.inert]="resizePopoverOrigin() ? '' : null"
+                  role="group" [attr.aria-label]="resizeWidgetLabel()">
+                  @for (handle of canvasResizeHandles; track handle.id) {
+                    <button type="button" class="pdx-canvas-edge"
+                      [attr.data-canvas-edge]="handle.id"
+                      [attr.aria-label]="resizeHandleLabel(handle.id)"
+                      [matTooltip]="resizeHandleLabel(handle.id)"
+                      [matTooltipDisabled]="canvasInteractionActive()"
+                      (pointerdown)="onSelectedCanvasResizePointerDown(handle.id, $event)"
+                      (keydown)="onSelectedCanvasResizeKeydown(handle.id, $event)"
+                      (click)="$event.stopPropagation()"></button>
+                  }
+                </div>
+              }
               @if (shouldRenderWidgetContextOverlay(w)) {
                 <praxis-dynamic-widget-context-toolbar
+                  [showResize]="canCustomizeCanvas()"
+                  [resizeLabel]="resizeWidgetLabel()"
+                  [resizeControls]="resizePopoverId"
+                  [resizeExpanded]="!!resizePopoverOrigin() && isWidgetSelected(w.key)"
+                  (resize)="toggleResizePopover(w.key)"
                   [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                   [contextLabel]="widgetContextLabel(w)"
                   [contextTooltip]="widgetContextTooltip(w)"
@@ -43323,7 +44305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               }
             </div>
           }
-          @if (canvasPreviewItem()) {
+          @if (canvasPreviewItem() && !hasResizeFeedback()) {
             <div
               class="pdx-canvas-snap-preview"
               [class.pdx-canvas-snap-preview--invalid]="canvasPreviewInvalid()"
@@ -43596,7 +44578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       }
     </div>
-  `, styles: [":host{display:block;min-width:0}.pdx-page-wrapper{position:relative;display:block;background:var(--pdx-page-bg, transparent);color:var(--pdx-page-color, inherit)}.pdx-page{display:grid;gap:var(--pdx-page-gap, 12px);grid-template-columns:minmax(0,1fr)}.pdx-page--canvas{align-items:start;grid-auto-flow:dense}.pdx-page-wrapper.editing .pdx-page--canvas{padding-block-start:var(--pdx-canvas-context-toolbar-safe-area, 22px);padding-block-end:22px;padding-inline:22px;box-sizing:border-box}.pdx-page-settings{position:sticky;top:8px;z-index:2;color:inherit;margin-bottom:6px}.pdx-widget{position:relative;background:var(--pfx-surface, transparent);border-radius:6px;min-width:0;min-height:0}.pdx-widget--interactive{cursor:pointer}.pdx-widget--selected:before{content:\"\";position:absolute;inset:0;border:1px dashed color-mix(in srgb,var(--md-sys-color-primary) 34%,transparent);border-radius:14px;pointer-events:none;z-index:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent),0 8px 20px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent)}.pdx-widget--canvas{align-self:stretch;--pdx-resize-gradient-horizontal: linear-gradient( 90deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-resize-gradient-vertical: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-resize-gradient-diagonal-se: linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-resize-gradient-diagonal-sw: linear-gradient( 225deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-se)}.pdx-widget--canvas:after{content:\"\";position:absolute;inset:0;padding:2px;border-radius:14px;background:var(--pdx-active-resize-gradient);opacity:0;pointer-events:none;transition:opacity .14s ease,filter .14s ease;filter:saturate(1.02) drop-shadow(0 0 5px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.pdx-widget--canvas-selected:before,.pdx-widget--canvas-blocked:before{content:\"\";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:1;transition:opacity .14s ease,box-shadow .14s ease,border-color .14s ease}.pdx-widget--canvas-blocked:before{border:1px solid color-mix(in srgb,var(--md-sys-color-error) 74%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 20%,transparent),0 10px 24px color-mix(in srgb,var(--md-sys-color-error) 12%,transparent)}.pdx-widget--canvas:has(.pdx-canvas-resize:hover):after,.pdx-widget--canvas:has(.pdx-canvas-resize:focus-visible):after{opacity:.82}.pdx-widget--canvas:has(.pdx-canvas-resize--north:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--north:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--south:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--south:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-horizontal)}.pdx-widget--canvas:has(.pdx-canvas-resize--east:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--east:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--west:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--west:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-vertical)}.pdx-widget--canvas:has(.pdx-canvas-resize--north-east:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--north-east:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--south-west:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--south-west:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-sw)}.pdx-widget--canvas:has(.pdx-canvas-resize--north-west:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--north-west:focus-visible),.pdx-widget--canvas:has(.pdx-canvas-resize--south-east:hover),.pdx-widget--canvas:has(.pdx-canvas-resize--south-east:focus-visible){--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-se)}.pdx-canvas-resize{position:absolute;z-index:7;border:0;padding:0;margin:0;background:transparent;touch-action:none;cursor:pointer;opacity:0;pointer-events:none;transform:scale(.94);transition:opacity .14s ease,transform .14s ease,filter .14s ease;filter:saturate(.9)}.pdx-widget--canvas:hover .pdx-canvas-resize,.pdx-widget--canvas:focus-within .pdx-canvas-resize,.pdx-widget--canvas-selected .pdx-canvas-resize{opacity:.88;pointer-events:auto;transform:scale(1);filter:saturate(1)}.pdx-widget--canvas:has(.pdx-shell.expanded) .pdx-canvas-resize,.pdx-widget--canvas:has(.pdx-shell.fullscreen) .pdx-canvas-resize{opacity:0;pointer-events:none;transform:scale(.94)}.pdx-canvas-resize-grip{display:block;width:9px;height:9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-primary) 42%,var(--md-sys-color-outline-variant) 58%);background:color-mix(in srgb,var(--md-sys-color-surface) 92%,var(--md-sys-color-primary) 8%);box-shadow:0 1px 4px color-mix(in srgb,var(--md-sys-color-shadow) 10%,transparent);transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}.pdx-canvas-resize:hover .pdx-canvas-resize-grip,.pdx-canvas-resize:focus-visible .pdx-canvas-resize-grip{border-color:color-mix(in srgb,var(--md-sys-color-primary) 58%,var(--md-sys-color-outline-variant) 42%);background:color-mix(in srgb,var(--md-sys-color-surface) 84%,var(--md-sys-color-primary) 16%);box-shadow:0 2px 7px color-mix(in srgb,var(--md-sys-color-primary) 14%,transparent);transform:scale(1.04)}.pdx-canvas-resize--north,.pdx-canvas-resize--south{left:50%;width:52px;height:44px;margin-left:-26px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north{top:-22px;cursor:ns-resize}.pdx-canvas-resize--south{bottom:-22px;cursor:ns-resize}.pdx-canvas-resize--east,.pdx-canvas-resize--west{top:50%;width:44px;height:52px;margin-top:-26px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--east{right:-22px;cursor:ew-resize}.pdx-canvas-resize--west{left:-22px;cursor:ew-resize}.pdx-canvas-resize--north-east,.pdx-canvas-resize--north-west,.pdx-canvas-resize--south-east,.pdx-canvas-resize--south-west{width:44px;height:44px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north-east{top:-22px;right:-22px;cursor:nesw-resize}.pdx-canvas-resize--north-west{top:-22px;left:-22px;cursor:nwse-resize}.pdx-canvas-resize--south-east{bottom:-22px;right:-22px;cursor:nwse-resize}.pdx-canvas-resize--south-west{bottom:-22px;left:-22px;cursor:nesw-resize}.pdx-canvas-snap-preview{position:relative;align-self:stretch;border-radius:12px;pointer-events:none;z-index:0;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 42%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 55%,transparent);animation:pdx-snap-preview-pulse .48s ease-out infinite alternate}.pdx-canvas-snap-preview:before,.pdx-canvas-snap-preview:after{content:\"\";position:absolute;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 82%,var(--md-sys-color-tertiary) 18%);opacity:.72}.pdx-canvas-snap-preview:before{inset:0 auto 0 0;width:3px}.pdx-canvas-snap-preview:after{inset:0 0 auto;height:3px}.pdx-canvas-snap-preview--invalid{background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-error) 18%,transparent),color-mix(in srgb,var(--md-sys-color-error-container) 22%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 58%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 40%,transparent)}.pdx-canvas-snap-preview--invalid:before,.pdx-canvas-snap-preview--invalid:after{background:color-mix(in srgb,var(--md-sys-color-error) 86%,var(--md-sys-color-error-container) 14%)}.pdx-canvas-resize:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-canvas-resize:hover .pdx-canvas-resize-grip,.pdx-canvas-resize:focus-visible .pdx-canvas-resize-grip{border-color:transparent;box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 20%,transparent),var(--mat-elevation-level3)}.pdx-canvas-resize--north:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--north:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--south:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--south:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-horizontal)}.pdx-canvas-resize--east:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--east:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--west:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--west:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-vertical)}.pdx-canvas-resize--north-east:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--north-east:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--south-west:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--south-west:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-diagonal-sw)}.pdx-canvas-resize--north-west:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--north-west:focus-visible .pdx-canvas-resize-grip,.pdx-canvas-resize--south-east:hover .pdx-canvas-resize-grip,.pdx-canvas-resize--south-east:focus-visible .pdx-canvas-resize-grip{background:var(--pdx-resize-gradient-diagonal-se)}.pdx-canvas-resize:hover .pdx-canvas-resize-grip,.pdx-canvas-resize:focus-visible .pdx-canvas-resize-grip{transform:scale(1.08)}@keyframes pdx-snap-preview-pulse{0%{opacity:.72;transform:scale(.996)}to{opacity:1;transform:scale(1)}}.pdx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pdx-group{display:grid;gap:12px;grid-column:1 / -1;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 76%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent)}.pdx-group--hero{padding:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent),color-mix(in srgb,var(--md-sys-color-surface-container-low) 86%,transparent))}.pdx-group--rail{align-self:start}.pdx-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.pdx-group-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.pdx-group-content{display:grid;gap:12px}.pdx-group-content--stack{grid-template-columns:minmax(0,1fr)}.pdx-group-content--row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pdx-group-content--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.pdx-group-tabs{display:grid;gap:12px}.pdx-tabs-header{display:flex;flex-wrap:wrap;gap:8px}.pdx-tab-chip{appearance:none;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border-radius:999px;padding:8px 12px;font:inherit;cursor:pointer}.pdx-tab-chip.active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 78%,transparent);color:var(--md-sys-color-on-primary-container)}.pdx-page-wrapper.editing .pdx-widget-settings{opacity:1}\n"] }]
+  `, styles: [":host{display:block;min-width:0}.pdx-page-wrapper{position:relative;display:block;background:var(--pdx-page-bg, transparent);color:var(--pdx-page-color, inherit)}.pdx-page{display:grid;gap:var(--pdx-page-gap, 12px);grid-template-columns:minmax(0,1fr)}.pdx-page--canvas{align-items:start;grid-auto-flow:dense}.pdx-page-wrapper.editing .pdx-page--canvas{padding-block-start:var(--pdx-canvas-context-toolbar-safe-area, 22px);padding-block-end:22px;padding-inline:22px;box-sizing:border-box}.pdx-page-settings{position:sticky;top:8px;z-index:2;color:inherit;margin-bottom:6px}.pdx-widget{position:relative;background:var(--pfx-surface, transparent);border-radius:6px;min-width:0;min-height:0}.pdx-widget--interactive{cursor:pointer}.pdx-widget--selected:before{content:\"\";position:absolute;inset:0;border:1px dashed color-mix(in srgb,var(--md-sys-color-primary) 34%,transparent);border-radius:14px;pointer-events:none;z-index:1;box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent),0 8px 20px color-mix(in srgb,var(--md-sys-color-primary) 6%,transparent)}.pdx-widget--canvas{align-self:stretch;--pdx-resize-gradient-diagonal-se: linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary) 94%, white 6%), color-mix(in srgb, var(--md-sys-color-tertiary) 90%, white 10%), color-mix(in srgb, var(--md-sys-color-secondary) 88%, white 12%) );--pdx-active-resize-gradient: var(--pdx-resize-gradient-diagonal-se)}.pdx-widget--canvas:after{content:\"\";position:absolute;inset:0;padding:2px;border-radius:14px;background:var(--pdx-active-resize-gradient);opacity:0;pointer-events:none;transition:opacity .14s ease,filter .14s ease;filter:saturate(1.02) drop-shadow(0 0 5px color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}.pdx-widget--canvas-selected:before,.pdx-widget--canvas-blocked:before{content:\"\";position:absolute;inset:0;border-radius:14px;pointer-events:none;z-index:1;transition:opacity .14s ease,box-shadow .14s ease,border-color .14s ease}.pdx-widget--canvas-blocked:before{border:1px solid color-mix(in srgb,var(--md-sys-color-error) 74%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 20%,transparent),0 10px 24px color-mix(in srgb,var(--md-sys-color-error) 12%,transparent)}.pdx-widget--canvas-selected:has(>.pdx-canvas-edges .pdx-canvas-edge:hover):after,.pdx-widget--canvas-selected:has(>.pdx-canvas-edges .pdx-canvas-edge:focus-visible):after,.pdx-page-wrapper:has(>.pdx-canvas-resize-alternative .pdx-canvas-resize:hover)>.pdx-page>.pdx-widget--canvas-selected:after,.pdx-page-wrapper:has(>.pdx-canvas-resize-alternative .pdx-canvas-resize:focus-visible)>.pdx-page>.pdx-widget--canvas-selected:after{opacity:.82}.pdx-canvas-resize-alternative>summary{display:list-item;width:fit-content;padding:12px;min-height:44px;box-sizing:border-box;cursor:pointer;font-size:12px;color:var(--md-sys-color-on-surface-variant)}[data-resize-feedback=valid]{--pdx-resize-feedback-color: #27864b}[data-resize-feedback=minimum]{--pdx-resize-feedback-color: #bc8a00}[data-resize-feedback=blocked]{--pdx-resize-feedback-color: var(--md-sys-color-error)}.pdx-widget--canvas[data-resize-feedback]:after{background:var(--pdx-resize-feedback-color);opacity:1;z-index:2}.pdx-resize-feedback{position:absolute;inset-inline:8px;bottom:8px;width:fit-content;max-width:calc(100% - 16px);box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:4px 8px;border:2px solid var(--pdx-resize-feedback-color);border-radius:8px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);font-size:12px;line-height:18px;pointer-events:none;z-index:3}.pdx-resize-feedback mat-icon{flex:0 0 18px;width:18px;height:18px;font-size:18px}.pdx-resize-feedback--floating{position:static;max-width:min(320px,calc(100vw - 24px));overflow-wrap:anywhere}.pdx-resize-feedback--floating strong{display:block}.pdx-canvas-edges{position:absolute;inset:0;pointer-events:none;z-index:2}.pdx-canvas-edge{position:absolute;display:grid;place-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--md-sys-color-primary);pointer-events:auto;touch-action:none;transform:translate(-50%,-50%)}.pdx-canvas-edge:after{content:\"\";width:8px;height:8px;border:2px solid currentColor;border-radius:2px;background:var(--md-sys-color-surface)}.pdx-canvas-edge:hover:after,.pdx-canvas-edge:focus-visible:after{background:var(--md-sys-color-primary-container)}.pdx-canvas-edge[data-canvas-edge=north-west]{left:0;top:0;cursor:nwse-resize}.pdx-canvas-edge[data-canvas-edge=north]{left:50%;top:0;cursor:ns-resize}.pdx-canvas-edge[data-canvas-edge=north-east]{left:100%;top:0;cursor:nesw-resize}.pdx-canvas-edge[data-canvas-edge=east]{left:100%;top:50%;cursor:ew-resize}.pdx-canvas-edge[data-canvas-edge=south-east]{left:100%;top:100%;cursor:nwse-resize}.pdx-canvas-edge[data-canvas-edge=south]{left:50%;top:100%;cursor:ns-resize}.pdx-canvas-edge[data-canvas-edge=south-west]{left:0;top:100%;cursor:nesw-resize}.pdx-canvas-edge[data-canvas-edge=west]{left:0;top:50%;cursor:ew-resize}.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.expanded)>.pdx-page>.pdx-widget>.pdx-canvas-edges,.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.fullscreen)>.pdx-page>.pdx-widget>.pdx-canvas-edges{display:none}.pdx-canvas-tools{container-type:inline-size;display:flex;flex-wrap:wrap;align-items:end;gap:8px 16px;padding:12px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface-container-low);border-radius:12px}.pdx-resize-popover{box-sizing:border-box;display:grid;gap:12px;width:248px;max-width:calc(100vw - 24px);padding:12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface)}.pdx-resize-popover header{display:flex;align-items:start;gap:8px}.pdx-resize-popover header div{display:grid;gap:4px;flex:1;min-width:0}.pdx-resize-popover strong{font-size:13px}.pdx-resize-popover header span{font-size:12px;overflow-wrap:anywhere;color:var(--md-sys-color-on-surface-variant)}.pdx-resize-popover header button{flex:0 0 44px;width:44px;height:44px}.pdx-resize-popover .pdx-canvas-tools-directions{grid-template-columns:repeat(3,44px);justify-content:space-between}.pdx-resize-popover--gesturing{background:transparent;border-color:transparent;pointer-events:none}.pdx-resize-popover--gesturing header,.pdx-resize-popover--gesturing .pdx-canvas-tools-hint,.pdx-resize-popover--gesturing .pdx-canvas-resize{visibility:hidden}.pdx-resize-popover--gesturing .pdx-canvas-resize.pdx-resize-active-handle{visibility:visible;pointer-events:auto;background:var(--md-sys-color-surface-container-high)}.pdx-canvas-tools-target{display:grid;gap:4px;flex:1 1 220px;min-width:0;font-size:12px;font-weight:600}.pdx-canvas-tools-target select{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px;border:1px solid var(--md-sys-color-outline-variant);border-radius:8px;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);font:inherit}.pdx-canvas-tools-directions{display:grid;grid-template-columns:repeat(4,44px);gap:4px;max-width:100%}@container (min-width: 650px){.pdx-canvas-tools-directions{grid-template-columns:repeat(8,44px)}}.pdx-canvas-tools-hint{flex-basis:100%;margin:0;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.expanded)>.pdx-canvas-resize-alternative,.pdx-page-wrapper:has(>.pdx-page>.pdx-widget>praxis-widget-shell>.pdx-shell.fullscreen)>.pdx-canvas-resize-alternative{visibility:hidden}.pdx-canvas-resize{flex:0 0 44px;width:44px;height:44px;touch-action:none;cursor:grab}.pdx-canvas-resize:active{cursor:grabbing}.pdx-canvas-resize:focus-visible,.pdx-canvas-edge:focus-visible,.pdx-canvas-resize-alternative>summary:focus-visible,.pdx-canvas-tools-target select:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pdx-canvas-snap-preview{position:relative;align-self:stretch;border-radius:12px;pointer-events:none;z-index:0;background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-primary) 10%,transparent),color-mix(in srgb,var(--md-sys-color-tertiary) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-primary) 42%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 55%,transparent);animation:pdx-snap-preview-pulse .48s ease-out infinite alternate}.pdx-canvas-snap-preview:before,.pdx-canvas-snap-preview:after{content:\"\";position:absolute;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-primary) 82%,var(--md-sys-color-tertiary) 18%);opacity:.72}.pdx-canvas-snap-preview:before{inset:0 auto 0 0;width:3px}.pdx-canvas-snap-preview:after{inset:0 0 auto;height:3px}.pdx-canvas-snap-preview--invalid{background:linear-gradient(135deg,color-mix(in srgb,var(--md-sys-color-error) 18%,transparent),color-mix(in srgb,var(--md-sys-color-error-container) 22%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-sys-color-error) 58%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--md-sys-color-surface) 40%,transparent)}.pdx-canvas-snap-preview--invalid:before,.pdx-canvas-snap-preview--invalid:after{background:color-mix(in srgb,var(--md-sys-color-error) 86%,var(--md-sys-color-error-container) 14%)}@media(prefers-reduced-motion:reduce){.pdx-canvas-snap-preview{animation:none}.pdx-widget--canvas:after,.pdx-widget--canvas-selected:before,.pdx-widget--canvas-blocked:before{transition:none}}@media(forced-colors:active){.pdx-widget--canvas-selected:before{border:2px solid Highlight}.pdx-canvas-resize:focus-visible,.pdx-canvas-edge:focus-visible,.pdx-canvas-resize-alternative>summary:focus-visible,.pdx-canvas-tools-target select:focus-visible{outline-color:Highlight}}@keyframes pdx-snap-preview-pulse{0%{opacity:.72;transform:scale(.996)}to{opacity:1;transform:scale(1)}}.pdx-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.pdx-group{display:grid;gap:12px;grid-column:1 / -1;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--md-sys-color-surface-container-low) 76%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 72%,transparent)}.pdx-group--hero{padding:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--md-sys-color-primary-container) 42%,transparent),color-mix(in srgb,var(--md-sys-color-surface-container-low) 86%,transparent))}.pdx-group--rail{align-self:start}.pdx-group-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.pdx-group-title{font-size:.95rem;font-weight:600;color:var(--md-sys-color-on-surface)}.pdx-group-content{display:grid;gap:12px}.pdx-group-content--stack{grid-template-columns:minmax(0,1fr)}.pdx-group-content--row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.pdx-group-content--grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.pdx-group-tabs{display:grid;gap:12px}.pdx-tabs-header{display:flex;flex-wrap:wrap;gap:8px}.pdx-tab-chip{appearance:none;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-lowest);color:var(--md-sys-color-on-surface);border-radius:999px;padding:8px 12px;font:inherit;cursor:pointer}.pdx-tab-chip.active{border-color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary-container) 78%,transparent);color:var(--md-sys-color-on-primary-container)}.pdx-page-wrapper.editing .pdx-widget-settings{opacity:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pageCanvasHost: [{
                 type: ViewChild,
                 args: ['pageCanvasHost']
@@ -44701,7 +45683,7 @@ class PraxisRelatedResourceOutletComponent {
         </div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.pdx-related-outlet{display:block;min-width:0;color:var(--md-sys-color-on-surface, currentColor)}.pdx-related-outlet__state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--pdx-related-outlet-gap, 12px);min-height:var(--pdx-related-outlet-min-height, 64px);padding:var(--pdx-related-outlet-padding, 12px);border:1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, .16));border-radius:var(--pdx-related-outlet-radius, 8px);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface, transparent))}.pdx-related-outlet--compact .pdx-related-outlet__state{min-height:var(--pdx-related-outlet-compact-min-height, 48px);padding:var(--pdx-related-outlet-compact-padding, 8px 10px)}.pdx-related-outlet__state--ready{border-color:var(--md-sys-color-primary, currentColor)}.pdx-related-outlet__icon{display:inline-grid;place-items:center;width:32px;height:32px;color:var(--md-sys-color-primary, currentColor)}.pdx-related-outlet__state--busy .pdx-related-outlet__icon{color:var(--md-sys-color-secondary, currentColor)}.pdx-related-outlet__copy{display:grid;gap:2px;min-width:0}.pdx-related-outlet__copy h3,.pdx-related-outlet__copy p{margin:0}.pdx-related-outlet__copy h3{font:var(--md-sys-typescale-title-small, 600 .95rem/1.25rem system-ui);color:var(--md-sys-color-on-surface, currentColor)}.pdx-related-outlet__copy p{font:var(--md-sys-typescale-body-small, 400 .82rem/1.15rem system-ui);color:var(--md-sys-color-on-surface-variant, currentColor)}@media(max-width:600px){.pdx-related-outlet__state{grid-template-columns:auto minmax(0,1fr)}.pdx-related-outlet__state button{grid-column:1 / -1;justify-self:start}}\n"], dependencies: [{ kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { 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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
+  `, isInline: true, styles: [":host{display:block;min-width:0}.pdx-related-outlet{display:block;min-width:0;color:var(--md-sys-color-on-surface, currentColor)}.pdx-related-outlet__state{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--pdx-related-outlet-gap, 12px);min-height:var(--pdx-related-outlet-min-height, 64px);padding:var(--pdx-related-outlet-padding, 12px);border:1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, .16));border-radius:var(--pdx-related-outlet-radius, 8px);background:var(--md-sys-color-surface-container-low, var(--md-sys-color-surface, transparent))}.pdx-related-outlet--compact .pdx-related-outlet__state{min-height:var(--pdx-related-outlet-compact-min-height, 48px);padding:var(--pdx-related-outlet-compact-padding, 8px 10px)}.pdx-related-outlet__state--ready{border-color:var(--md-sys-color-primary, currentColor)}.pdx-related-outlet__icon{display:inline-grid;place-items:center;width:32px;height:32px;color:var(--md-sys-color-primary, currentColor)}.pdx-related-outlet__state--busy .pdx-related-outlet__icon{color:var(--md-sys-color-secondary, currentColor)}.pdx-related-outlet__copy{display:grid;gap:2px;min-width:0}.pdx-related-outlet__copy h3,.pdx-related-outlet__copy p{margin:0}.pdx-related-outlet__copy h3{font:var(--md-sys-typescale-title-small, 600 .95rem/1.25rem system-ui);color:var(--md-sys-color-on-surface, currentColor)}.pdx-related-outlet__copy p{font:var(--md-sys-typescale-body-small, 400 .82rem/1.15rem system-ui);color:var(--md-sys-color-on-surface-variant, currentColor)}@media(max-width:600px){.pdx-related-outlet__state{grid-template-columns:auto minmax(0,1fr)}.pdx-related-outlet__state button{grid-column:1 / -1;justify-self:start}}\n"], dependencies: [{ kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { 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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i3$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisRelatedResourceOutletComponent, decorators: [{
             type: Component,
@@ -44964,7 +45946,7 @@ class PraxisIconPickerComponent {
       }
     </div>
   </div>
-  `, isInline: true, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px;color:var(--md-sys-color-on-surface)}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);color:inherit;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pip-item:hover{background:var(--md-sys-color-surface-container)}.pip-item:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pip-item.selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.pip-name{font-size:12px;color:var(--md-sys-color-on-surface-variant);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin:-6px 0 8px}.pip-stats{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-bottom:8px}.pip-shortcut{opacity:.9}.pip-empty{padding:12px;border:1px dashed var(--md-sys-color-outline-variant);border-radius:10px;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container);margin-top:8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;color:var(--md-sys-color-on-surface)}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8$1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8$1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+  `, isInline: true, styles: [".pip-root{display:flex;flex-direction:column;min-width:340px;max-width:760px;max-height:80vh;overflow:hidden;padding:16px;color:var(--md-sys-color-on-surface)}.pip-head{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}.pip-search{flex:1;min-width:180px}.pip-spacer{flex:1}.pip-body{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:4px}.pip-item{display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:10px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);color:inherit;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease}.pip-item:hover{background:var(--md-sys-color-surface-container)}.pip-item:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.pip-item.selected{border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary)}.pip-name{font-size:12px;color:var(--md-sys-color-on-surface-variant);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.pip-hint{font-size:12px;color:var(--md-sys-color-on-surface-variant);margin:-6px 0 8px}.pip-stats{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--md-sys-color-on-surface-variant);margin-bottom:8px}.pip-shortcut{opacity:.9}.pip-empty{padding:12px;border:1px dashed var(--md-sys-color-outline-variant);border-radius:10px;color:var(--md-sys-color-on-surface-variant);background:var(--md-sys-color-surface-container);margin-top:8px}.pip-footer{display:flex;gap:12px;align-items:center;margin-top:10px}.pip-typed{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:12px;color:var(--md-sys-color-on-surface)}.pip-family{display:flex;align-items:center}.pip-family .mat-mdc-chip-listbox{min-width:260px}.pip-root .mat-icon{font-family:Material Icons,Material Symbols Outlined,Material Symbols Rounded,Material Symbols Sharp!important;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;color:currentColor}.material-symbols-outlined{font-family:Material Symbols Outlined;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-rounded{font-family:Material Symbols Rounded;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}.material-symbols-sharp{font-family:Material Symbols Sharp;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased;font-variation-settings:\"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i8.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i8.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisIconPickerComponent, decorators: [{
             type: Component,
@@ -45586,7 +46568,7 @@ class PraxisRelatedResourceOutletConfigEditorComponent {
         </span>
       </aside>
     </form>
-  `, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface, currentColor)}.pdx-related-outlet-editor{display:grid;gap:var(--pdx-spacing-lg, 24px);padding:var(--pdx-spacing-md, 16px)}.pdx-related-outlet-editor__header,.pdx-related-outlet-editor__boundary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--pdx-spacing-sm, 12px)}.pdx-related-outlet-editor__header-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--md-sys-shape-corner-medium, 12px);color:var(--md-sys-color-primary, currentColor);background:var(--md-sys-color-primary-container, transparent)}.pdx-related-outlet-editor__header strong,.pdx-related-outlet-editor__boundary strong,.pdx-related-outlet-editor__header small,.pdx-related-outlet-editor__boundary small{display:block}.pdx-related-outlet-editor__header strong{font:var(--md-sys-typescale-title-medium, 600 1rem/1.4 system-ui)}.pdx-related-outlet-editor__header small,.pdx-related-outlet-editor__boundary small,.pdx-related-outlet-editor__section-heading p{color:var(--md-sys-color-on-surface-variant, currentColor)}.pdx-related-outlet-editor__section{display:grid;gap:var(--pdx-spacing-md, 16px)}.pdx-related-outlet-editor__section-heading h3,.pdx-related-outlet-editor__section-heading p{margin:0}.pdx-related-outlet-editor__section-heading h3{font:var(--md-sys-typescale-title-small, 600 .95rem/1.3 system-ui)}.pdx-related-outlet-editor__section-heading p{margin-top:4px;font:var(--md-sys-typescale-body-small, 400 .82rem/1.35 system-ui)}.pdx-related-outlet-editor__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pdx-spacing-sm, 12px)}.pdx-related-outlet-editor__wide{grid-column:1 / -1}.pdx-related-outlet-editor__choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pdx-spacing-md, 16px)}.pdx-related-outlet-editor__appearance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--pdx-spacing-sm, 12px)}.pdx-related-outlet-editor__appearance-cluster{display:grid;align-content:start;gap:var(--pdx-spacing-sm, 12px);min-width:0}.pdx-related-outlet-editor__appearance-cluster--wide{grid-column:1 / -1}.pdx-related-outlet-editor__appearance-cluster mat-button-toggle-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}.pdx-related-outlet-editor__appearance-cluster mat-button-toggle{min-height:44px}.pdx-related-outlet-editor__density-cluster{gap:var(--pdx-spacing-md, 16px)}fieldset{min-width:0;margin:0;padding:0;border:0}legend{margin-bottom:8px;font:var(--md-sys-typescale-label-large, 500 .88rem/1.2 system-ui)}mat-button-toggle-group{width:100%}mat-button-toggle{flex:1 1 0}mat-button-toggle mat-icon{margin-right:6px}.pdx-related-outlet-editor__boundary{padding:var(--pdx-spacing-sm, 12px);border:1px solid var(--md-sys-color-outline-variant, currentColor);border-radius:var(--md-sys-shape-corner-medium, 12px);background:var(--md-sys-color-surface-container-low, transparent)}.pdx-related-outlet-editor__boundary mat-icon{color:var(--md-sys-color-on-surface-variant, currentColor)}@media(max-width:640px){.pdx-related-outlet-editor__fields,.pdx-related-outlet-editor__choice-grid{grid-template-columns:minmax(0,1fr)}.pdx-related-outlet-editor__wide{grid-column:auto}mat-button-toggle-group{display:grid}}@media(max-width:420px){.pdx-related-outlet-editor__appearance-cluster mat-button-toggle-group{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;color:var(--md-sys-color-on-surface, currentColor)}.pdx-related-outlet-editor{display:grid;gap:var(--pdx-spacing-lg, 24px);padding:var(--pdx-spacing-md, 16px)}.pdx-related-outlet-editor__header,.pdx-related-outlet-editor__boundary{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--pdx-spacing-sm, 12px)}.pdx-related-outlet-editor__header-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--md-sys-shape-corner-medium, 12px);color:var(--md-sys-color-primary, currentColor);background:var(--md-sys-color-primary-container, transparent)}.pdx-related-outlet-editor__header strong,.pdx-related-outlet-editor__boundary strong,.pdx-related-outlet-editor__header small,.pdx-related-outlet-editor__boundary small{display:block}.pdx-related-outlet-editor__header strong{font:var(--md-sys-typescale-title-medium, 600 1rem/1.4 system-ui)}.pdx-related-outlet-editor__header small,.pdx-related-outlet-editor__boundary small,.pdx-related-outlet-editor__section-heading p{color:var(--md-sys-color-on-surface-variant, currentColor)}.pdx-related-outlet-editor__section{display:grid;gap:var(--pdx-spacing-md, 16px)}.pdx-related-outlet-editor__section-heading h3,.pdx-related-outlet-editor__section-heading p{margin:0}.pdx-related-outlet-editor__section-heading h3{font:var(--md-sys-typescale-title-small, 600 .95rem/1.3 system-ui)}.pdx-related-outlet-editor__section-heading p{margin-top:4px;font:var(--md-sys-typescale-body-small, 400 .82rem/1.35 system-ui)}.pdx-related-outlet-editor__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pdx-spacing-sm, 12px)}.pdx-related-outlet-editor__wide{grid-column:1 / -1}.pdx-related-outlet-editor__choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pdx-spacing-md, 16px)}.pdx-related-outlet-editor__appearance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--pdx-spacing-sm, 12px)}.pdx-related-outlet-editor__appearance-cluster{display:grid;align-content:start;gap:var(--pdx-spacing-sm, 12px);min-width:0}.pdx-related-outlet-editor__appearance-cluster--wide{grid-column:1 / -1}.pdx-related-outlet-editor__appearance-cluster mat-button-toggle-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,132px),1fr))}.pdx-related-outlet-editor__appearance-cluster mat-button-toggle{min-height:44px}.pdx-related-outlet-editor__density-cluster{gap:var(--pdx-spacing-md, 16px)}fieldset{min-width:0;margin:0;padding:0;border:0}legend{margin-bottom:8px;font:var(--md-sys-typescale-label-large, 500 .88rem/1.2 system-ui)}mat-button-toggle-group{width:100%}mat-button-toggle{flex:1 1 0}mat-button-toggle mat-icon{margin-right:6px}.pdx-related-outlet-editor__boundary{padding:var(--pdx-spacing-sm, 12px);border:1px solid var(--md-sys-color-outline-variant, currentColor);border-radius:var(--md-sys-shape-corner-medium, 12px);background:var(--md-sys-color-surface-container-low, transparent)}.pdx-related-outlet-editor__boundary mat-icon{color:var(--md-sys-color-on-surface-variant, currentColor)}@media(max-width:640px){.pdx-related-outlet-editor__fields,.pdx-related-outlet-editor__choice-grid{grid-template-columns:minmax(0,1fr)}.pdx-related-outlet-editor__wide{grid-column:auto}mat-button-toggle-group{display:grid}}@media(max-width:420px){.pdx-related-outlet-editor__appearance-cluster mat-button-toggle-group{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisRelatedResourceOutletConfigEditorComponent, decorators: [{
             type: Component,