@praxisui/core 9.0.27 → 9.0.29

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, SimpleChange, ContentChild, HostBinding, Injector, ElementRef, ChangeDetectorRef, HostListener, ViewChildren, ViewChild, output, effect } 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, SimpleChange, ContentChild, HostBinding, Injector, ElementRef, ChangeDetectorRef, afterNextRender, HostListener, ViewChildren, ViewChild, output, effect } 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';
@@ -37066,6 +37066,7 @@ class DynamicWidgetContextToolbarComponent {
     showShellSettings = false;
     shellSettingsLabel = '';
     shellSettingsTooltip = '';
+    showRemove = true;
     moreActionsLabel = '';
     removeLabel = '';
     assistant = new EventEmitter();
@@ -37073,7 +37074,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: "toolbarLabel", contextLabel: "contextLabel", contextTooltip: "contextTooltip", showAssistant: "showAssistant", assistantLabel: "assistantLabel", assistantTooltip: "assistantTooltip", showComponentSettings: "showComponentSettings", componentSettingsLabel: "componentSettingsLabel", componentSettingsTooltip: "componentSettingsTooltip", showShellSettings: "showShellSettings", shellSettingsLabel: "shellSettingsLabel", shellSettingsTooltip: "shellSettingsTooltip", moreActionsLabel: "moreActionsLabel", removeLabel: "removeLabel" }, 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: { toolbarLabel: "toolbarLabel", contextLabel: "contextLabel", contextTooltip: "contextTooltip", showAssistant: "showAssistant", assistantLabel: "assistantLabel", assistantTooltip: "assistantTooltip", showComponentSettings: "showComponentSettings", componentSettingsLabel: "componentSettingsLabel", componentSettingsTooltip: "componentSettingsTooltip", showShellSettings: "showShellSettings", shellSettingsLabel: "shellSettingsLabel", shellSettingsTooltip: "shellSettingsTooltip", showRemove: "showRemove", moreActionsLabel: "moreActionsLabel", removeLabel: "removeLabel" }, outputs: { 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"
@@ -37125,21 +37126,23 @@ class DynamicWidgetContextToolbarComponent {
           (click)="shellSettings.emit()"
         ></button>
       }
-      <button
-        praxisIconButton="ms:more_horiz"
-        size="dense"
-        type="button"
-        data-testid="dynamic-widget-more-actions"
-        [matTooltip]="moreActionsLabel"
-        [attr.aria-label]="moreActionsLabel"
-        [matMenuTriggerFor]="widgetContextMenu"
-      ></button>
-      <mat-menu #widgetContextMenu="matMenu">
-        <button mat-menu-item type="button" data-testid="dynamic-widget-remove" (click)="remove.emit()">
-          <mat-icon [praxisIcon]="'delete'"></mat-icon>
-          <span>{{ removeLabel }}</span>
-        </button>
-      </mat-menu>
+      @if (showRemove) {
+        <button
+          praxisIconButton="ms:more_horiz"
+          size="dense"
+          type="button"
+          data-testid="dynamic-widget-more-actions"
+          [matTooltip]="moreActionsLabel"
+          [attr.aria-label]="moreActionsLabel"
+          [matMenuTriggerFor]="widgetContextMenu"
+        ></button>
+        <mat-menu #widgetContextMenu="matMenu">
+          <button mat-menu-item type="button" data-testid="dynamic-widget-remove" (click)="remove.emit()">
+            <mat-icon [praxisIcon]="'delete'"></mat-icon>
+            <span>{{ removeLabel }}</span>
+          </button>
+        </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.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4.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 });
 }
@@ -37203,21 +37206,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           (click)="shellSettings.emit()"
         ></button>
       }
-      <button
-        praxisIconButton="ms:more_horiz"
-        size="dense"
-        type="button"
-        data-testid="dynamic-widget-more-actions"
-        [matTooltip]="moreActionsLabel"
-        [attr.aria-label]="moreActionsLabel"
-        [matMenuTriggerFor]="widgetContextMenu"
-      ></button>
-      <mat-menu #widgetContextMenu="matMenu">
-        <button mat-menu-item type="button" data-testid="dynamic-widget-remove" (click)="remove.emit()">
-          <mat-icon [praxisIcon]="'delete'"></mat-icon>
-          <span>{{ removeLabel }}</span>
-        </button>
-      </mat-menu>
+      @if (showRemove) {
+        <button
+          praxisIconButton="ms:more_horiz"
+          size="dense"
+          type="button"
+          data-testid="dynamic-widget-more-actions"
+          [matTooltip]="moreActionsLabel"
+          [attr.aria-label]="moreActionsLabel"
+          [matMenuTriggerFor]="widgetContextMenu"
+        ></button>
+        <mat-menu #widgetContextMenu="matMenu">
+          <button mat-menu-item type="button" data-testid="dynamic-widget-remove" (click)="remove.emit()">
+            <mat-icon [praxisIcon]="'delete'"></mat-icon>
+            <span>{{ removeLabel }}</span>
+          </button>
+        </mat-menu>
+      }
     </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: [{
@@ -37244,6 +37249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], shellSettingsTooltip: [{
                 type: Input
+            }], showRemove: [{
+                type: Input
             }], moreActionsLabel: [{
                 type: Input
             }], removeLabel: [{
@@ -37483,6 +37490,8 @@ class DynamicWidgetPageComponent {
     strictValidation = true;
     /** Enables lightweight editing affordances (shell + page layout). */
     enableCustomization = false;
+    /** Optional host grant that narrows the available authoring operations. */
+    authoringCapabilities;
     /** Shows page settings button when edit mode is enabled. */
     showPageSettingsButton = true;
     /** Optional editor component override for widget shell settings. */
@@ -37584,7 +37593,7 @@ class DynamicWidgetPageComponent {
     widgetLoaders;
     constructor() {
         this.registerRuntimeComponentObservationProvider();
-        this.observeHostWidth();
+        afterNextRender({ read: () => this.observeHostWidth() });
     }
     ngOnDestroy() {
         this.destroyed = true;
@@ -37598,6 +37607,7 @@ class DynamicWidgetPageComponent {
         if (changes['page'] ||
             changes['context'] ||
             changes['enableCustomization'] ||
+            changes['authoringCapabilities'] ||
             changes['pageIdentity']) {
             this.widgetShellRenderCache.clear();
             const parsed = this.parsePage(this.page);
@@ -38866,10 +38876,21 @@ class DynamicWidgetPageComponent {
         }
         return `widget:${fromKey}:${output}:${timestamp}:${sequence}`;
     }
+    canCustomizeCanvas() {
+        return this.isAuthoringCapabilityEnabled('canvas');
+    }
+    canOpenPageSettings() {
+        return this.isAuthoringCapabilityEnabled('pageSettings')
+            && this.showPageSettingsButton
+            && !!(this.pageEditorComponent || this.defaultPageEditor);
+    }
     canOpenWidgetShellSettings() {
-        return !!(this.shellEditorComponent || this.defaultShellEditor);
+        return this.isWidgetShellCapabilityEnabled()
+            && !!(this.shellEditorComponent || this.defaultShellEditor);
     }
     canOpenWidgetComponentSettings(key) {
+        if (!this.isAuthoringCapabilityEnabled('widgetInputs'))
+            return false;
         const page = this.pageDefinition || this.parsePage(this.page);
         const widget = page?.widgets?.find((candidate) => candidate.key === key);
         if (!widget)
@@ -38877,6 +38898,38 @@ class DynamicWidgetPageComponent {
         const metadata = this.componentMetadata?.get(widget.definition?.id || '');
         return !!metadata?.configEditor?.component;
     }
+    canRemoveWidgets() {
+        return this.isAuthoringCapabilityEnabled('widgetRemoval');
+    }
+    canRequestWidgetAssistant() {
+        return this.enableCustomization && this.showWidgetAssistantButton;
+    }
+    canSelectWidgets() {
+        return this.enableCustomization && (this.canCustomizeCanvas()
+            || this.canOpenWidgetShellSettings()
+            || this.isAuthoringCapabilityEnabled('widgetInputs')
+            || this.canRemoveWidgets()
+            || this.canRequestWidgetAssistant());
+    }
+    isAuthoringCapabilityEnabled(capability) {
+        return this.enableCustomization
+            && this.authoringCapabilities?.[capability] !== false;
+    }
+    isWidgetShellCapabilityEnabled() {
+        return this.isWidgetShellCapabilityEnabledFor('identity')
+            || this.isWidgetShellCapabilityEnabledFor('appearance')
+            || this.isWidgetShellCapabilityEnabledFor('actions');
+    }
+    isWidgetShellCapabilityEnabledFor(capability) {
+        if (!this.enableCustomization)
+            return false;
+        const widgetShell = this.authoringCapabilities?.widgetShell;
+        if (widgetShell === false)
+            return false;
+        if (!widgetShell || widgetShell === true)
+            return true;
+        return widgetShell[capability] !== false;
+    }
     componentSettingsLabel() {
         return this.t('controls.componentSettings', 'Configurar conteúdo');
     }
@@ -38896,6 +38949,8 @@ class DynamicWidgetPageComponent {
         return this.t('controls.widgetAssistantTooltip', 'Abrir o assistente Praxis com contexto deste widget');
     }
     requestWidgetAssistant(widgetKey) {
+        if (!this.canRequestWidgetAssistant())
+            return;
         this.selectWidget(widgetKey);
         this.widgetAssistantRequested.emit(widgetKey);
     }
@@ -38920,7 +38975,8 @@ class DynamicWidgetPageComponent {
         });
     }
     shouldRenderWidgetContextOverlay(widget) {
-        return (this.enableCustomization && !this.hasVisibleWidgetShellHeader(widget));
+        return (this.hasWidgetContextAuthoringActions(widget)
+            && !this.hasVisibleWidgetShellHeader(widget));
     }
     widgetShellForRender(widget) {
         if (!this.shouldProjectWidgetHeaderActions(widget)) {
@@ -38964,7 +39020,14 @@ class DynamicWidgetPageComponent {
         return metadata?.friendlyName || componentId || widget.key;
     }
     shouldProjectWidgetHeaderActions(widget) {
-        return this.enableCustomization && this.hasVisibleWidgetShellHeader(widget);
+        return this.hasWidgetContextAuthoringActions(widget)
+            && this.hasVisibleWidgetShellHeader(widget);
+    }
+    hasWidgetContextAuthoringActions(widget) {
+        return this.canRequestWidgetAssistant()
+            || this.canOpenWidgetComponentSettings(widget.key)
+            || this.canOpenWidgetShellSettings()
+            || this.canRemoveWidgets();
     }
     hasVisibleWidgetShellHeader(widget) {
         const shell = widget.shell;
@@ -38989,7 +39052,7 @@ class DynamicWidgetPageComponent {
     }
     buildProjectedWidgetShellActions(widget) {
         const actions = [];
-        if (this.showWidgetAssistantButton) {
+        if (this.canRequestWidgetAssistant()) {
             actions.push({
                 id: 'widget-assistant',
                 label: this.widgetAssistantLabel(),
@@ -39019,14 +39082,16 @@ class DynamicWidgetPageComponent {
                 placement: 'header',
             });
         }
-        actions.push({
-            id: 'widget-remove',
-            label: this.widgetRemoveLabel(),
-            tooltip: this.widgetRemoveLabel(),
-            icon: 'delete',
-            variant: 'icon',
-            placement: 'header',
-        });
+        if (this.canRemoveWidgets()) {
+            actions.push({
+                id: 'widget-remove',
+                label: this.widgetRemoveLabel(),
+                tooltip: this.widgetRemoveLabel(),
+                icon: 'delete',
+                variant: 'icon',
+                placement: 'header',
+            });
+        }
         return actions;
     }
     widgetShellActionSignature(actions) {
@@ -39084,6 +39149,8 @@ class DynamicWidgetPageComponent {
             this.cancelCanvasInteractionForWidget(fromKey);
         }
         if (evt.id === 'widget-assistant') {
+            if (!this.canRequestWidgetAssistant())
+                return;
             this.requestWidgetAssistant(fromKey);
             return;
         }
@@ -39239,6 +39306,8 @@ class DynamicWidgetPageComponent {
         return path.split('.').reduce((acc, key) => acc?.[key], ctx);
     }
     openWidgetShellSettings(key) {
+        if (!this.canOpenWidgetShellSettings())
+            return;
         if (!this.settingsPanel)
             return;
         const editor = this.shellEditorComponent || this.defaultShellEditor;
@@ -39260,6 +39329,7 @@ class DynamicWidgetPageComponent {
                     widgetType: widget.definition?.id,
                     presets: uiShell?.presets || null,
                     pagePreset: uiShell?.preset || null,
+                    authoringCapabilities: this.authoringCapabilities,
                 },
             },
         });
@@ -39267,6 +39337,8 @@ class DynamicWidgetPageComponent {
         ref.saved$.subscribe((result) => this.applyWidgetShell(key, result, true));
     }
     async openWidgetComponentSettings(key) {
+        if (!this.canOpenWidgetComponentSettings(key))
+            return;
         if (!this.settingsPanel) {
             this.dispatchWidgetComponentSettingsToRuntime(key);
             return;
@@ -39423,6 +39495,8 @@ class DynamicWidgetPageComponent {
         this.applyPageUpdate({ ...page, widgets }, persist);
     }
     async confirmAndRemoveWidget(widgetKey) {
+        if (!this.canRemoveWidgets())
+            return;
         const page = this.ensurePageDefinition();
         const widget = page.widgets.find((item) => item.key === widgetKey);
         if (!widget) {
@@ -39551,6 +39625,8 @@ class DynamicWidgetPageComponent {
         return (endpoint.kind === 'component-port' && endpoint.ref.widget === widgetKey);
     }
     openPageSettings() {
+        if (!this.canOpenPageSettings())
+            return;
         if (!this.settingsPanel)
             return;
         const editor = this.pageEditorComponent || this.defaultPageEditor;
@@ -39568,6 +39644,7 @@ class DynamicWidgetPageComponent {
                     layout: page.layout || null,
                     presets: uiShell?.presets || null,
                     pagePreset: uiShell?.preset || null,
+                    authoringCapabilities: this.authoringCapabilities,
                 },
             },
         });
@@ -39578,9 +39655,16 @@ class DynamicWidgetPageComponent {
         if (!result)
             return;
         const page = this.ensurePageDefinition();
-        const widgets = page.widgets.map((w) => w.key === key ? { ...w, shell: result.shell ?? null } : w);
+        const widgets = page.widgets.map((w) => w.key === key
+            ? {
+                ...w,
+                shell: this.constrainWidgetShellResult(w.shell, result.shell),
+            }
+            : w);
         let context = page.context || {};
-        if (result.applyToAll && result.pagePreset) {
+        if (this.isWidgetShellCapabilityEnabledFor('pagePreset') &&
+            result.applyToAll &&
+            result.pagePreset) {
             const ui = { ...context.ui };
             const shell = { ...(ui?.shell || {}) };
             shell.preset = result.pagePreset;
@@ -39589,6 +39673,41 @@ class DynamicWidgetPageComponent {
         }
         this.applyPageUpdate({ ...page, widgets, context }, persist);
     }
+    constrainWidgetShellResult(original, proposed) {
+        const next = proposed ? { ...proposed } : {};
+        if (!this.isWidgetShellCapabilityEnabledFor('identity')) {
+            this.restoreWidgetShellFields(next, original, [
+                'kind',
+                'preset',
+                'icon',
+                'title',
+                'subtitle',
+                'showHeader',
+                'windowActions',
+                'collapsed',
+                'expanded',
+                'fullscreen',
+            ]);
+        }
+        if (!this.isWidgetShellCapabilityEnabledFor('appearance')) {
+            this.restoreWidgetShellFields(next, original, [
+                'bodyLayout',
+                'appearance',
+            ]);
+        }
+        if (!this.isWidgetShellCapabilityEnabledFor('actions')) {
+            this.restoreWidgetShellFields(next, original, ['actions']);
+        }
+        return Object.keys(next).length ? next : undefined;
+    }
+    restoreWidgetShellFields(target, source, fields) {
+        for (const field of fields) {
+            delete target[field];
+            if (source && Object.prototype.hasOwnProperty.call(source, field)) {
+                Object.assign(target, { [field]: source[field] });
+            }
+        }
+    }
     applyPageLayout(result, persist) {
         if (!result)
             return;
@@ -39756,6 +39875,11 @@ class DynamicWidgetPageComponent {
     onWindowResize() {
         if (!this.pageDefinition)
             return;
+        const measuredWidth = this.measureHostWidth();
+        if (this.updateContainerWidth(measuredWidth))
+            return;
+        if (this.containerWidth)
+            return;
         this.applyResponsivePresentation(this.pageDefinition, this.pageDefinition.widgets || [], this.pageRuntime);
     }
     onCanvasPointerMove(event) {
@@ -40041,25 +40165,35 @@ class DynamicWidgetPageComponent {
             : fallback;
     }
     observeHostWidth() {
+        if (this.destroyed)
+            return;
+        this.updateContainerWidth(this.measureHostWidth());
         const ResizeObserverCtor = globalThis.ResizeObserver;
         if (typeof ResizeObserverCtor !== 'function') {
             return;
         }
         this.hostResizeObserver = new ResizeObserverCtor((entries) => {
-            const width = entries[0]?.contentRect.width;
-            if (!Number.isFinite(width)
-                || width <= 0
-                || Math.abs(width - (this.containerWidth || 0)) < 0.5) {
-                return;
-            }
-            this.containerWidth = width;
-            if (this.pageDefinition) {
-                this.applyResponsivePresentation(this.pageDefinition, this.pageDefinition.widgets || [], this.pageRuntime);
-                this.changeDetector.markForCheck();
-            }
+            this.updateContainerWidth(entries[0]?.contentRect.width);
         });
         this.hostResizeObserver.observe(this.hostElement.nativeElement);
     }
+    measureHostWidth() {
+        return this.hostElement.nativeElement.getBoundingClientRect().width;
+    }
+    updateContainerWidth(width) {
+        if (!Number.isFinite(width)
+            || !width
+            || width <= 0
+            || Math.abs(width - (this.containerWidth || 0)) < 0.5) {
+            return false;
+        }
+        this.containerWidth = width;
+        if (this.pageDefinition) {
+            this.applyResponsivePresentation(this.pageDefinition, this.pageDefinition.widgets || [], this.pageRuntime);
+            this.changeDetector.markForCheck();
+        }
+        return true;
+    }
     isCanvasMode() {
         return !!this.canvas;
     }
@@ -40082,7 +40216,7 @@ class DynamicWidgetPageComponent {
             link.from.ref.direction === 'output');
     }
     selectWidget(widgetKey) {
-        if (!this.enableCustomization)
+        if (!this.canSelectWidgets())
             return;
         if (this.selectedWidgetKeyState() !== widgetKey) {
             this.selectedWidgetKeyState.set(widgetKey);
@@ -40132,13 +40266,17 @@ class DynamicWidgetPageComponent {
         return this.canvasPreviewInvalidState();
     }
     startCanvasDrag(widgetKey, event) {
+        if (!this.canCustomizeCanvas())
+            return;
         this.startCanvasInteraction(widgetKey, event, 'drag');
     }
     startCanvasResize(widgetKey, handle, event) {
+        if (!this.canCustomizeCanvas())
+            return;
         this.startCanvasInteraction(widgetKey, event, 'resize', handle);
     }
     onCanvasHandleKeydown(widgetKey, kind, event) {
-        if (!this.enableCustomization || !this.isCanvasMode())
+        if (!this.canCustomizeCanvas() || !this.isCanvasMode())
             return;
         this.selectCanvasWidget(widgetKey);
         const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
@@ -40156,7 +40294,7 @@ class DynamicWidgetPageComponent {
         }, true, this.canvasAnnouncement(kind, widgetKey), this.blockedCanvasAnnouncement(kind), kind);
     }
     onCanvasResizeHandleKeydown(widgetKey, handle, event) {
-        if (!this.enableCustomization || !this.isCanvasMode())
+        if (!this.canCustomizeCanvas() || !this.isCanvasMode())
             return;
         this.selectCanvasWidget(widgetKey);
         const horizontal = event.key === 'ArrowLeft' || event.key === 'ArrowRight';
@@ -40231,7 +40369,7 @@ class DynamicWidgetPageComponent {
         });
     }
     startCanvasInteraction(widgetKey, event, kind, resizeHandle) {
-        if (!this.enableCustomization || !this.isCanvasMode())
+        if (!this.canCustomizeCanvas() || !this.isCanvasMode())
             return;
         if (this.isCanvasOverlayInteraction(event))
             return;
@@ -41011,7 +41149,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", showPageSettingsButton: "showPageSettingsButton", shellEditorComponent: "shellEditorComponent", pageEditorComponent: "pageEditorComponent", autoPersist: "autoPersist", pageIdentity: "pageIdentity", componentInstanceId: "componentInstanceId", showWidgetAssistantButton: "showWidgetAssistantButton" }, outputs: { pageChange: "pageChange", 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", 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: `
     <div
       class="pdx-page-wrapper"
       [class.editing]="enableCustomization"
@@ -41020,7 +41158,7 @@ class DynamicWidgetPageComponent {
       [attr.data-motion]="pageThemeMotion"
       [ngStyle]="pageThemeTokenStyle"
     >
-      @if (enableCustomization && showPageSettingsButton) {
+      @if (canOpenPageSettings()) {
         <button
           class="pdx-page-settings"
           praxisIconButton="ms:settings"
@@ -41045,15 +41183,15 @@ class DynamicWidgetPageComponent {
             <div
               class="pdx-widget pdx-widget--canvas"
               [attr.data-widget-key]="w.key"
-              [class.pdx-widget--interactive]="enableCustomization"
+              [class.pdx-widget--interactive]="canSelectWidgets()"
               [class.pdx-widget--selected]="
-                enableCustomization && isWidgetSelected(w.key)
+                canSelectWidgets() && isWidgetSelected(w.key)
               "
               [class.pdx-widget--canvas-selected]="
-                enableCustomization && isWidgetSelected(w.key)
+                canCustomizeCanvas() && isWidgetSelected(w.key)
               "
               [class.pdx-widget--canvas-blocked]="
-                enableCustomization && isCanvasWidgetBlocked(w.key)
+                canCustomizeCanvas() && isCanvasWidgetBlocked(w.key)
               "
               [class]="widgetClassName(w)"
               [style.gridColumn]="widgetGridColumn(w)"
@@ -41063,7 +41201,7 @@ class DynamicWidgetPageComponent {
               (click)="selectWidgetFromHostEvent(w.key, $event)"
               (focusin)="selectWidgetFromHostEvent(w.key, $event)"
             >
-              @if (enableCustomization) {
+              @if (canCustomizeCanvas()) {
                 @for (handle of canvasResizeHandles; track handle.id) {
                   <button
                     class="pdx-canvas-resize"
@@ -41084,7 +41222,7 @@ class DynamicWidgetPageComponent {
               <praxis-widget-shell
                 [shell]="widgetShellForRender(w)"
                 [context]="mergedContext"
-                [dragSurfaceEnabled]="enableCustomization && isCanvasMode()"
+                [dragSurfaceEnabled]="canCustomizeCanvas() && isCanvasMode()"
                 [dragSurfaceLabel]="dragWidgetLabel()"
                 (action)="onShellAction(w.key, $event)"
                 (dragSurfacePointerDown)="startCanvasDrag(w.key, $event)"
@@ -41108,7 +41246,7 @@ class DynamicWidgetPageComponent {
                   [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                   [contextLabel]="widgetContextLabel(w)"
                   [contextTooltip]="widgetContextTooltip(w)"
-                  [showAssistant]="showWidgetAssistantButton"
+                  [showAssistant]="canRequestWidgetAssistant()"
                   [assistantLabel]="widgetAssistantLabel()"
                   [assistantTooltip]="widgetAssistantTooltip()"
                   [showComponentSettings]="
@@ -41120,6 +41258,7 @@ class DynamicWidgetPageComponent {
                   [shellSettingsLabel]="widgetSettingsLabel()"
                   [shellSettingsTooltip]="widgetSettingsTooltip()"
                   [moreActionsLabel]="moreWidgetActionsLabel()"
+                  [showRemove]="canRemoveWidgets()"
                   [removeLabel]="widgetRemoveLabel()"
                   (assistant)="requestWidgetAssistant(w.key)"
                   (componentSettings)="openWidgetComponentSettings(w.key)"
@@ -41186,11 +41325,9 @@ class DynamicWidgetPageComponent {
                           <div
                             class="pdx-widget"
                             [attr.data-widget-key]="w.key"
-                            [class.pdx-widget--interactive]="
-                              enableCustomization
-                            "
+                            [class.pdx-widget--interactive]="canSelectWidgets()"
                             [class.pdx-widget--selected]="
-                              enableCustomization && isWidgetSelected(w.key)
+                              canSelectWidgets() && isWidgetSelected(w.key)
                             "
                             [class]="w.renderClassName || w.className || ''"
                             [style.gridColumn]="widgetGridColumn(w)"
@@ -41223,7 +41360,7 @@ class DynamicWidgetPageComponent {
                                 "
                                 [contextLabel]="widgetContextLabel(w)"
                                 [contextTooltip]="widgetContextTooltip(w)"
-                                [showAssistant]="showWidgetAssistantButton"
+                                [showAssistant]="canRequestWidgetAssistant()"
                                 [assistantLabel]="widgetAssistantLabel()"
                                 [assistantTooltip]="widgetAssistantTooltip()"
                                 [showComponentSettings]="
@@ -41241,6 +41378,7 @@ class DynamicWidgetPageComponent {
                                 [shellSettingsLabel]="widgetSettingsLabel()"
                                 [shellSettingsTooltip]="widgetSettingsTooltip()"
                                 [moreActionsLabel]="moreWidgetActionsLabel()"
+                                [showRemove]="canRemoveWidgets()"
                                 [removeLabel]="widgetRemoveLabel()"
                                 (assistant)="requestWidgetAssistant(w.key)"
                                 (componentSettings)="
@@ -41267,9 +41405,9 @@ class DynamicWidgetPageComponent {
                     <div
                       class="pdx-widget"
                       [attr.data-widget-key]="w.key"
-                      [class.pdx-widget--interactive]="enableCustomization"
+                      [class.pdx-widget--interactive]="canSelectWidgets()"
                       [class.pdx-widget--selected]="
-                        enableCustomization && isWidgetSelected(w.key)
+                        canSelectWidgets() && isWidgetSelected(w.key)
                       "
                       [class]="widgetClassName(w)"
                       [style.gridColumn]="widgetGridColumn(w)"
@@ -41298,7 +41436,7 @@ class DynamicWidgetPageComponent {
                           [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                           [contextLabel]="widgetContextLabel(w)"
                           [contextTooltip]="widgetContextTooltip(w)"
-                          [showAssistant]="showWidgetAssistantButton"
+                          [showAssistant]="canRequestWidgetAssistant()"
                           [assistantLabel]="widgetAssistantLabel()"
                           [assistantTooltip]="widgetAssistantTooltip()"
                           [showComponentSettings]="
@@ -41312,6 +41450,7 @@ class DynamicWidgetPageComponent {
                           [shellSettingsLabel]="widgetSettingsLabel()"
                           [shellSettingsTooltip]="widgetSettingsTooltip()"
                           [moreActionsLabel]="moreWidgetActionsLabel()"
+                          [showRemove]="canRemoveWidgets()"
                           [removeLabel]="widgetRemoveLabel()"
                           (assistant)="requestWidgetAssistant(w.key)"
                           (componentSettings)="
@@ -41332,9 +41471,9 @@ class DynamicWidgetPageComponent {
             <div
               class="pdx-widget"
               [attr.data-widget-key]="w.key"
-              [class.pdx-widget--interactive]="enableCustomization"
+              [class.pdx-widget--interactive]="canSelectWidgets()"
               [class.pdx-widget--selected]="
-                enableCustomization && isWidgetSelected(w.key)
+                canSelectWidgets() && isWidgetSelected(w.key)
               "
               [class]="widgetClassName(w)"
               [style.gridColumn]="widgetGridColumn(w)"
@@ -41363,7 +41502,7 @@ class DynamicWidgetPageComponent {
                   [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                   [contextLabel]="widgetContextLabel(w)"
                   [contextTooltip]="widgetContextTooltip(w)"
-                  [showAssistant]="showWidgetAssistantButton"
+                  [showAssistant]="canRequestWidgetAssistant()"
                   [assistantLabel]="widgetAssistantLabel()"
                   [assistantTooltip]="widgetAssistantTooltip()"
                   [showComponentSettings]="
@@ -41375,6 +41514,7 @@ class DynamicWidgetPageComponent {
                   [shellSettingsLabel]="widgetSettingsLabel()"
                   [shellSettingsTooltip]="widgetSettingsTooltip()"
                   [moreActionsLabel]="moreWidgetActionsLabel()"
+                  [showRemove]="canRemoveWidgets()"
                   [removeLabel]="widgetRemoveLabel()"
                   (assistant)="requestWidgetAssistant(w.key)"
                   (componentSettings)="openWidgetComponentSettings(w.key)"
@@ -41392,7 +41532,7 @@ 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", "componentSettingsLabel", "componentSettingsTooltip", "showShellSettings", "shellSettingsLabel", "shellSettingsTooltip", "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-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", "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicWidgetPageComponent, decorators: [{
             type: Component,
@@ -41413,7 +41553,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       [attr.data-motion]="pageThemeMotion"
       [ngStyle]="pageThemeTokenStyle"
     >
-      @if (enableCustomization && showPageSettingsButton) {
+      @if (canOpenPageSettings()) {
         <button
           class="pdx-page-settings"
           praxisIconButton="ms:settings"
@@ -41438,15 +41578,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             <div
               class="pdx-widget pdx-widget--canvas"
               [attr.data-widget-key]="w.key"
-              [class.pdx-widget--interactive]="enableCustomization"
+              [class.pdx-widget--interactive]="canSelectWidgets()"
               [class.pdx-widget--selected]="
-                enableCustomization && isWidgetSelected(w.key)
+                canSelectWidgets() && isWidgetSelected(w.key)
               "
               [class.pdx-widget--canvas-selected]="
-                enableCustomization && isWidgetSelected(w.key)
+                canCustomizeCanvas() && isWidgetSelected(w.key)
               "
               [class.pdx-widget--canvas-blocked]="
-                enableCustomization && isCanvasWidgetBlocked(w.key)
+                canCustomizeCanvas() && isCanvasWidgetBlocked(w.key)
               "
               [class]="widgetClassName(w)"
               [style.gridColumn]="widgetGridColumn(w)"
@@ -41456,7 +41596,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               (click)="selectWidgetFromHostEvent(w.key, $event)"
               (focusin)="selectWidgetFromHostEvent(w.key, $event)"
             >
-              @if (enableCustomization) {
+              @if (canCustomizeCanvas()) {
                 @for (handle of canvasResizeHandles; track handle.id) {
                   <button
                     class="pdx-canvas-resize"
@@ -41477,7 +41617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               <praxis-widget-shell
                 [shell]="widgetShellForRender(w)"
                 [context]="mergedContext"
-                [dragSurfaceEnabled]="enableCustomization && isCanvasMode()"
+                [dragSurfaceEnabled]="canCustomizeCanvas() && isCanvasMode()"
                 [dragSurfaceLabel]="dragWidgetLabel()"
                 (action)="onShellAction(w.key, $event)"
                 (dragSurfacePointerDown)="startCanvasDrag(w.key, $event)"
@@ -41501,7 +41641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                   [contextLabel]="widgetContextLabel(w)"
                   [contextTooltip]="widgetContextTooltip(w)"
-                  [showAssistant]="showWidgetAssistantButton"
+                  [showAssistant]="canRequestWidgetAssistant()"
                   [assistantLabel]="widgetAssistantLabel()"
                   [assistantTooltip]="widgetAssistantTooltip()"
                   [showComponentSettings]="
@@ -41513,6 +41653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   [shellSettingsLabel]="widgetSettingsLabel()"
                   [shellSettingsTooltip]="widgetSettingsTooltip()"
                   [moreActionsLabel]="moreWidgetActionsLabel()"
+                  [showRemove]="canRemoveWidgets()"
                   [removeLabel]="widgetRemoveLabel()"
                   (assistant)="requestWidgetAssistant(w.key)"
                   (componentSettings)="openWidgetComponentSettings(w.key)"
@@ -41579,11 +41720,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <div
                             class="pdx-widget"
                             [attr.data-widget-key]="w.key"
-                            [class.pdx-widget--interactive]="
-                              enableCustomization
-                            "
+                            [class.pdx-widget--interactive]="canSelectWidgets()"
                             [class.pdx-widget--selected]="
-                              enableCustomization && isWidgetSelected(w.key)
+                              canSelectWidgets() && isWidgetSelected(w.key)
                             "
                             [class]="w.renderClassName || w.className || ''"
                             [style.gridColumn]="widgetGridColumn(w)"
@@ -41616,7 +41755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                                 "
                                 [contextLabel]="widgetContextLabel(w)"
                                 [contextTooltip]="widgetContextTooltip(w)"
-                                [showAssistant]="showWidgetAssistantButton"
+                                [showAssistant]="canRequestWidgetAssistant()"
                                 [assistantLabel]="widgetAssistantLabel()"
                                 [assistantTooltip]="widgetAssistantTooltip()"
                                 [showComponentSettings]="
@@ -41634,6 +41773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                                 [shellSettingsLabel]="widgetSettingsLabel()"
                                 [shellSettingsTooltip]="widgetSettingsTooltip()"
                                 [moreActionsLabel]="moreWidgetActionsLabel()"
+                                [showRemove]="canRemoveWidgets()"
                                 [removeLabel]="widgetRemoveLabel()"
                                 (assistant)="requestWidgetAssistant(w.key)"
                                 (componentSettings)="
@@ -41660,9 +41800,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     <div
                       class="pdx-widget"
                       [attr.data-widget-key]="w.key"
-                      [class.pdx-widget--interactive]="enableCustomization"
+                      [class.pdx-widget--interactive]="canSelectWidgets()"
                       [class.pdx-widget--selected]="
-                        enableCustomization && isWidgetSelected(w.key)
+                        canSelectWidgets() && isWidgetSelected(w.key)
                       "
                       [class]="widgetClassName(w)"
                       [style.gridColumn]="widgetGridColumn(w)"
@@ -41691,7 +41831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                           [contextLabel]="widgetContextLabel(w)"
                           [contextTooltip]="widgetContextTooltip(w)"
-                          [showAssistant]="showWidgetAssistantButton"
+                          [showAssistant]="canRequestWidgetAssistant()"
                           [assistantLabel]="widgetAssistantLabel()"
                           [assistantTooltip]="widgetAssistantTooltip()"
                           [showComponentSettings]="
@@ -41705,6 +41845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           [shellSettingsLabel]="widgetSettingsLabel()"
                           [shellSettingsTooltip]="widgetSettingsTooltip()"
                           [moreActionsLabel]="moreWidgetActionsLabel()"
+                          [showRemove]="canRemoveWidgets()"
                           [removeLabel]="widgetRemoveLabel()"
                           (assistant)="requestWidgetAssistant(w.key)"
                           (componentSettings)="
@@ -41725,9 +41866,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             <div
               class="pdx-widget"
               [attr.data-widget-key]="w.key"
-              [class.pdx-widget--interactive]="enableCustomization"
+              [class.pdx-widget--interactive]="canSelectWidgets()"
               [class.pdx-widget--selected]="
-                enableCustomization && isWidgetSelected(w.key)
+                canSelectWidgets() && isWidgetSelected(w.key)
               "
               [class]="widgetClassName(w)"
               [style.gridColumn]="widgetGridColumn(w)"
@@ -41756,7 +41897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   [toolbarLabel]="widgetContextToolbarLabel(w.key)"
                   [contextLabel]="widgetContextLabel(w)"
                   [contextTooltip]="widgetContextTooltip(w)"
-                  [showAssistant]="showWidgetAssistantButton"
+                  [showAssistant]="canRequestWidgetAssistant()"
                   [assistantLabel]="widgetAssistantLabel()"
                   [assistantTooltip]="widgetAssistantTooltip()"
                   [showComponentSettings]="
@@ -41768,6 +41909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   [shellSettingsLabel]="widgetSettingsLabel()"
                   [shellSettingsTooltip]="widgetSettingsTooltip()"
                   [moreActionsLabel]="moreWidgetActionsLabel()"
+                  [showRemove]="canRemoveWidgets()"
                   [removeLabel]="widgetRemoveLabel()"
                   (assistant)="requestWidgetAssistant(w.key)"
                   (componentSettings)="openWidgetComponentSettings(w.key)"
@@ -41797,6 +41939,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], enableCustomization: [{
                 type: Input
+            }], authoringCapabilities: [{
+                type: Input
             }], showPageSettingsButton: [{
                 type: Input
             }], shellEditorComponent: [{
@@ -41867,6 +42011,11 @@ const PRAXIS_DYNAMIC_PAGE_COMPONENT_METADATA = {
             type: 'boolean',
             description: 'Habilita affordances de edição na página.',
         },
+        {
+            name: 'authoringCapabilities',
+            type: 'WidgetPageAuthoringCapabilities',
+            description: 'Restringe granularmente as operações de authoring permitidas pelo host.',
+        },
         {
             name: 'showPageSettingsButton',
             type: 'boolean',