@praxisui/core 8.0.0-beta.98 → 9.0.0-beta.0

package/fesm2022/praxisui-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, Injectable, inject, Inject, Optional, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, APP_INITIALIZER, ErrorHandler, EventEmitter, Output, Input, ChangeDetectionStrategy, Directive, SecurityContext, ViewContainerRef, inputBinding, ContentChild, HostBinding, signal, HostListener, ViewChild, computed } from '@angular/core';
+import { Component, InjectionToken, Injectable, inject, Inject, Optional, makeEnvironmentProviders, signal, computed, DestroyRef, ENVIRONMENT_INITIALIZER, APP_INITIALIZER, ErrorHandler, EventEmitter, Output, Input, ChangeDetectionStrategy, Directive, SecurityContext, ViewContainerRef, SimpleChange, ContentChild, HostBinding, 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, map as map$1, switchMap as switchMap$1 } from 'rxjs';
@@ -3085,6 +3085,7 @@ class GenericCrudService {
     endpoints = {}; // Stores user-defined custom endpoints
     apiUrlConfig;
     currentEndpointKey = ApiEndpoint.Default;
+    currentApiUrlEntry = null;
     resourcePath;
     // Nova propriedade para armazenar a URL do schema
     _schemaUrl = null;
@@ -3185,19 +3186,22 @@ class GenericCrudService {
         if (this.configured &&
             this.apiUrl === nextApiUrl &&
             this.baseApiUrl === nextBaseApiUrl &&
-            this.currentEndpointKey === nextEndpointKey) {
+            this.currentEndpointKey === nextEndpointKey &&
+            this.currentApiUrlEntry === (configureOptions.apiUrlEntry ?? null)) {
             // No-op; already configured with same values
             // console.debug('[CRUD:Service] configure (no-op)', { resourcePath, baseApiUrl: nextBaseApiUrl });
             return;
         }
         // Apply new configuration
         this.currentEndpointKey = nextEndpointKey;
+        this.currentApiUrlEntry = configureOptions.apiUrlEntry ?? null;
         this.baseApiUrl = nextBaseApiUrl;
         this.resourcePath = resource;
         this.apiUrl = nextApiUrl;
         this.configured = true;
         this._filterSchemaLoaded = false;
         this._rangeFilterFieldHints.clear();
+        this._lastSchemaInfo = {};
         this._lastResourceMeta = {};
         this._lastResourceCapabilityDigest = null;
         console.debug('[CRUD:Service] configure', {
@@ -4280,6 +4284,10 @@ class GenericCrudService {
     }
     resolveEndpointEntry(key) {
         const cfgKey = key ?? this.currentEndpointKey;
+        if (this.currentApiUrlEntry &&
+            (!key || cfgKey === this.currentEndpointKey)) {
+            return this.currentApiUrlEntry;
+        }
         return this.apiUrlConfig[cfgKey] || this.apiUrlConfig['default'];
     }
     /**
@@ -6118,6 +6126,8 @@ class SurfaceBindingRuntimeService {
             if (!targetPath)
                 continue;
             const value = this.resolveBindingValue(binding, context);
+            if (value === undefined && binding.omitIfUndefined)
+                continue;
             resolvedWidget = this.setValueAtPath(resolvedWidget, targetPath, value);
         }
         return resolvedWidget;
@@ -6130,6 +6140,8 @@ class SurfaceBindingRuntimeService {
             if (!rawTargetPath)
                 continue;
             const value = this.resolveBindingValue(binding, context);
+            if (value === undefined && binding.omitIfUndefined)
+                continue;
             if (rawTargetPath.startsWith('widget.')) {
                 resolvedPayload = {
                     ...resolvedPayload,
@@ -6863,8 +6875,26 @@ class GlobalActionService {
             }
             const resolvedPayload = this.surfaceBindingRuntime.resolveSurfacePayload(surfacePayload, context, surfacePayload.context);
             const data = await this.surface.open(resolvedPayload, context);
+            this.bindSurfaceResultAction(data, resolvedPayload, context);
             return { success: true, data };
         });
+        this.register('surface.close', async (payload, context) => {
+            const runtime = this.resolveSurfaceRuntime(context);
+            if (typeof runtime?.close !== 'function') {
+                return { success: false, error: 'Surface runtime not available' };
+            }
+            runtime.close(this.toSurfaceResult(payload, 'close'));
+            return { success: true };
+        });
+        this.register('surface.result', async (payload, context) => {
+            const runtime = this.resolveSurfaceRuntime(context);
+            if (typeof runtime?.emitResult !== 'function') {
+                return { success: false, error: 'Surface result runtime not available' };
+            }
+            runtime.emitResult(this.toSurfaceResult(payload, 'result'));
+            return { success: true };
+        });
+        this.register('dynamicPage.composition.dispatch', async (payload, context) => this.handleCompositionDispatch(payload, context));
         this.register('toast.success', async (payload) => {
             const message = payload?.message || payload;
             if (!message)
@@ -6939,6 +6969,46 @@ class GlobalActionService {
             return { success: false, error: err?.message || String(err) };
         }
     }
+    async handleCompositionDispatch(payload, context) {
+        const dispatch = context?.runtime?.composition?.dispatch;
+        if (typeof dispatch !== 'function') {
+            return { success: false, error: 'Composition runtime not available' };
+        }
+        const source = payload?.source;
+        if (!this.isCompositionEndpointRef(source)) {
+            return { success: false, error: 'dynamicPage.composition.dispatch requires source endpoint' };
+        }
+        const eventPayload = payload && Object.prototype.hasOwnProperty.call(payload, 'payload')
+            ? payload.payload
+            : context?.payload;
+        await dispatch({
+            source,
+            payload: eventPayload,
+            ...(typeof payload?.occurredAt === 'string' ? { occurredAt: payload.occurredAt } : {}),
+        });
+        return {
+            success: true,
+            data: {
+                source,
+                payload: eventPayload,
+            },
+        };
+    }
+    isCompositionEndpointRef(value) {
+        if (!value || typeof value !== 'object') {
+            return false;
+        }
+        if (value.kind === 'component-port') {
+            return !!value.ref?.widget && !!value.ref?.port && !!value.ref?.direction;
+        }
+        if (value.kind === 'state') {
+            return !!value.ref?.path;
+        }
+        if (value.kind === 'global-action') {
+            return !!value.ref?.actionId;
+        }
+        return false;
+    }
     async handleNavigationOpenRoute(payload) {
         const url = this.buildNavigationUrl(payload);
         if (!url)
@@ -7077,6 +7147,51 @@ class GlobalActionService {
             return '';
         return `#${encodeURIComponent(raw.replace(/^#/, ''))}`;
     }
+    resolveSurfaceRuntime(context) {
+        return (context?.runtime?.state?.surfaceRuntime
+            || context?.payload?.surfaceContext?.surfaceRuntime
+            || context?.pageContext?.surfaceRuntime
+            || null);
+    }
+    bindSurfaceResultAction(ref, payload, context) {
+        const onResult = payload.onResult;
+        if (!onResult || typeof ref?.result$?.subscribe !== 'function') {
+            return;
+        }
+        ref.result$.subscribe((result) => {
+            void this.executeRef(onResult, {
+                ...context,
+                payload: result,
+                runtime: {
+                    ...(context?.runtime || {}),
+                    value: result,
+                    state: {
+                        ...(context?.runtime?.state || {}),
+                        surfaceResult: result,
+                    },
+                },
+                meta: {
+                    ...(context?.meta || {}),
+                    origin: 'surface.result',
+                    surfaceTitle: payload.title,
+                    surfacePresentation: payload.presentation,
+                },
+            });
+        });
+    }
+    toSurfaceResult(payload, fallbackType) {
+        if (payload && typeof payload === 'object' && ('type' in payload || 'data' in payload)) {
+            return {
+                type: String(payload.type || fallbackType),
+                ...(Object.prototype.hasOwnProperty.call(payload, 'data')
+                    ? { data: payload.data }
+                    : {}),
+            };
+        }
+        return payload === undefined
+            ? { type: fallbackType }
+            : { type: fallbackType, data: payload };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GlobalActionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: GlobalActionService, providedIn: 'root' });
 }
@@ -8596,6 +8711,15 @@ function minWordsValidator(minWords, message) {
 function requiredCheckedValidator(message) {
     return withMessage(Validators.requiredTrue, 'requiredTrue', message);
 }
+function requiredPresenceValidator(message) {
+    return (control) => {
+        const value = control.value;
+        if (value === null || value === undefined || value === '') {
+            return toMessageError('required', { required: true }, message);
+        }
+        return null;
+    };
+}
 function fileTypeValidator(allowed, message) {
     const normalized = (allowed || []).map((s) => String(s).toLowerCase());
     const hasExt = (s) => s.startsWith('.');
@@ -8919,8 +9043,11 @@ function buildAngularValidators(field) {
     const v = [];
     let av = [];
     // Required / requiredChecked
-    if (field.required)
-        v.push(withMessage(Validators.required, 'required', field.requiredMessage));
+    if (field.required) {
+        v.push(isBooleanRequiredField(field)
+            ? requiredPresenceValidator(field.requiredMessage)
+            : withMessage(Validators.required, 'required', field.requiredMessage));
+    }
     if (field.requiredChecked)
         v.push(requiredCheckedValidator());
     // Length
@@ -8973,6 +9100,11 @@ function buildAngularValidators(field) {
     }
     return { validators: v, asyncValidators: av };
 }
+function isBooleanRequiredField(field) {
+    const controlType = String(field.controlType ?? '').toLowerCase();
+    const type = String(field.type ?? field.dataType ?? '').toLowerCase();
+    return type === 'boolean' || controlType === 'checkbox' || controlType === 'toggle';
+}
 function buildValidatorsFromValidatorOptions(opts = {}, jsonLogic = DEFAULT_JSON_LOGIC$3) {
     const v = [];
     let av = [];
@@ -9661,15 +9793,98 @@ class DynamicFormService {
                 return null;
             });
         }
+        else if (this.isPhoneField(meta)) {
+            const pattern = meta.validators?.pattern ?? meta.pattern;
+            const patternMessage = meta.validators?.patternMessage ?? meta.patternMessage;
+            if (pattern) {
+                v.push(this.buildNormalizedPhonePatternValidator(pattern, patternMessage));
+            }
+        }
         return v;
     }
     /**
      * Indica se o campo deve ser tratado como seleção múltipla (valor padrão []).
      */
     isMultipleField(meta) {
-        return (meta.controlType === FieldControlType.CHECKBOX ||
-            meta.controlType === FieldControlType.MULTI_SELECT ||
-            meta.multiple === true);
+        return (meta.controlType === FieldControlType.MULTI_SELECT ||
+            meta.multiple === true ||
+            (meta.controlType === FieldControlType.CHECKBOX &&
+                this.hasCheckboxOptions(meta)));
+    }
+    isBooleanField(meta) {
+        const controlType = String(meta?.controlType ?? '').toLowerCase();
+        const type = String(meta?.type ?? meta?.dataType ?? '').toLowerCase();
+        if (controlType === 'checkbox' && (this.isMultipleField(meta) || this.hasCheckboxOptions(meta))) {
+            return false;
+        }
+        return type === 'boolean' || controlType === 'checkbox' || controlType === 'toggle';
+    }
+    hasCheckboxOptions(meta) {
+        return (Array.isArray(meta.checkboxOptions) ||
+            Array.isArray(meta.options));
+    }
+    isPhoneField(meta) {
+        const controlType = String(meta?.controlType ?? '').toLowerCase();
+        return controlType === 'phone' || controlType === 'phoneinput' || controlType === 'inlinephone';
+    }
+    buildNormalizedPhonePatternValidator(pattern, message) {
+        const { regex, requiredPattern } = this.buildAngularCompatiblePattern(pattern);
+        return withMessage((control) => {
+            const value = control.value;
+            if (value === null || value === undefined || value === '') {
+                return null;
+            }
+            const normalized = String(value).replace(/[()\s-]/g, '');
+            regex.lastIndex = 0;
+            return regex.test(normalized)
+                ? null
+                : {
+                    pattern: {
+                        requiredPattern,
+                        actualValue: value,
+                        normalizedValue: normalized,
+                    },
+                };
+        }, 'pattern', message);
+    }
+    buildAngularCompatiblePattern(pattern) {
+        if (typeof pattern !== 'string') {
+            return { regex: pattern, requiredPattern: pattern.toString() };
+        }
+        let regexStr = '';
+        if (pattern.charAt(0) !== '^') {
+            regexStr += '^';
+        }
+        regexStr += pattern;
+        if (pattern.charAt(pattern.length - 1) !== '$') {
+            regexStr += '$';
+        }
+        return { regex: new RegExp(regexStr), requiredPattern: regexStr };
+    }
+    buildFromMetadata(meta) {
+        const options = { ...(meta.validators ?? {}) };
+        const required = meta.validators?.required === true ||
+            meta.required === true;
+        if (meta.required === true && options.required === undefined) {
+            options.required = true;
+        }
+        if (meta.pattern && options.pattern === undefined) {
+            options.pattern = meta.pattern;
+        }
+        if (meta.patternMessage && options.patternMessage === undefined) {
+            options.patternMessage = meta.patternMessage;
+        }
+        if (this.isBooleanField(meta) && required) {
+            options.required = false;
+        }
+        if (this.isPhoneField(meta) && options.pattern) {
+            options.pattern = undefined;
+        }
+        const built = this.buildFromValidatorOptions(options);
+        if (this.isBooleanField(meta) && required) {
+            built.validators.unshift(requiredPresenceValidator(meta.validators?.requiredMessage ?? meta.requiredMessage));
+        }
+        return built;
     }
     isArrayMetadata(meta) {
         return (meta.controlType === FieldControlType.ARRAY_INPUT ||
@@ -9890,7 +10105,7 @@ class DynamicFormService {
      * - Valor inicial: [] para campos múltiplos quando ausente.
      */
     createControlFromMetadata(meta) {
-        const { validators, asyncValidators } = this.buildFromValidatorOptions(meta.validators);
+        const { validators, asyncValidators } = this.buildFromMetadata(meta);
         const updateOn = this.getUpdateOnFromMetadata(meta);
         const initialValue = meta.defaultValue ?? null;
         const value = this.isMultipleField(meta) && initialValue == null ? [] : initialValue;
@@ -9971,7 +10186,7 @@ class DynamicFormService {
             control.updateValueAndValidity({ emitEvent: opts.emitEvent ?? false });
             return;
         }
-        const { validators, asyncValidators } = this.buildFromValidatorOptions(meta.validators);
+        const { validators, asyncValidators } = this.buildFromMetadata(meta);
         control.setValidators(validators);
         control.setAsyncValidators(asyncValidators);
         control.addValidators(this.getUiSpecificValidators(meta));
@@ -10455,8 +10670,17 @@ function serializePraxisCollectionToCsv(request, policy = PRAXIS_DEFAULT_EXPORT_
     const fields = resolvePraxisExportFields(request);
     const items = resolvePraxisCollectionExportItems(request);
     const rows = [];
+    const csvOptions = request.formatOptions?.csv;
+    const locale = request.localization?.locale;
+    const isPtBr = locale === 'pt-BR' || (typeof locale === 'string' && locale.toLowerCase().startsWith('pt'));
+    const delimiter = csvOptions?.delimiter ?? (isPtBr ? ';' : ',');
+    const includeBom = csvOptions?.includeBom ?? isPtBr;
+    const includeSepDirective = csvOptions?.includeSepDirective ?? (csvOptions?.excelCompatibility && delimiter === ';');
+    if (includeSepDirective) {
+        rows.push(`sep=${delimiter}`);
+    }
     if (request.includeHeaders !== false) {
-        rows.push(fields.map((field) => quoteCsvCell(field.label ?? field.key)).join(','));
+        rows.push(fields.map((field) => quoteCsvCell(field.label ?? field.key)).join(delimiter));
     }
     for (const item of applyPraxisExportLimit(items, request.maxRows)) {
         const cells = fields.map((field) => {
@@ -10468,9 +10692,10 @@ function serializePraxisCollectionToCsv(request, policy = PRAXIS_DEFAULT_EXPORT_
                 : rawValue;
             return quoteCsvCell(escapePraxisExportCell(formattedValue, policy));
         });
-        rows.push(cells.join(','));
+        rows.push(cells.join(delimiter));
     }
-    return rows.join('\r\n');
+    const csvContent = rows.join('\r\n');
+    return includeBom ? `\uFEFF${csvContent}` : csvContent;
 }
 function serializePraxisCollectionToJson(request) {
     const fields = resolvePraxisExportFields(request);
@@ -11697,6 +11922,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ providedIn: 'any' }]
         }] });
 
+function clonePraxisRuntimeComponentObservation(observation) {
+    assertPraxisRuntimeComponentObservationSerializable(observation);
+    return JSON.parse(JSON.stringify(observation));
+}
+function assertPraxisRuntimeComponentObservationSerializable(observation) {
+    assertSerializableValue(observation, 'observation', new WeakSet());
+}
+function assertSerializableValue(value, path, seen) {
+    if (value === null ||
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        value === undefined) {
+        return;
+    }
+    if (typeof value === 'function' ||
+        typeof value === 'symbol' ||
+        typeof value === 'bigint') {
+        throw new Error(`Runtime observation contains a non-serializable value at ${path}.`);
+    }
+    if (typeof value !== 'object') {
+        throw new Error(`Runtime observation contains an unsupported value at ${path}.`);
+    }
+    if (seen.has(value)) {
+        throw new Error(`Runtime observation contains a circular reference at ${path}.`);
+    }
+    seen.add(value);
+    if (Array.isArray(value)) {
+        value.forEach((item, index) => {
+            assertSerializableValue(item, `${path}[${index}]`, seen);
+        });
+        seen.delete(value);
+        return;
+    }
+    Object.entries(value).forEach(([key, item]) => {
+        assertSerializableValue(item, `${path}.${key}`, seen);
+    });
+    seen.delete(value);
+}
+
+class PraxisRuntimeComponentObservationRegistryService {
+    entriesSignal = signal([], ...(ngDevMode ? [{ debugName: "entriesSignal" }] : /* istanbul ignore next */ []));
+    registeredCount = computed(() => this.entriesSignal().length, ...(ngDevMode ? [{ debugName: "registeredCount" }] : /* istanbul ignore next */ []));
+    register(provider, options = {}) {
+        const entry = {
+            id: Symbol('praxis-runtime-component-observation'),
+            provider,
+        };
+        let active = true;
+        this.entriesSignal.update((entries) => [...entries, entry]);
+        const destroy = () => {
+            if (!active) {
+                return;
+            }
+            active = false;
+            this.entriesSignal.update((entries) => entries.filter((candidate) => candidate.id !== entry.id));
+        };
+        options.destroyRef?.onDestroy(destroy);
+        return { destroy };
+    }
+    async listActive() {
+        const settled = await Promise.allSettled(this.entriesSignal().map((entry) => this.resolveObservation(entry.provider)));
+        return settled
+            .filter((result) => result.status === 'fulfilled' && this.isActiveObservation(result.value))
+            .map((result) => result.value);
+    }
+    async getByInstance(instanceId) {
+        const normalizedInstanceId = instanceId.trim();
+        if (!normalizedInstanceId) {
+            return null;
+        }
+        const active = await this.listActive();
+        return active.find((observation) => observation.identity.instanceId === normalizedInstanceId) ?? null;
+    }
+    async resolveObservation(provider) {
+        const observation = await provider.getObservation();
+        return clonePraxisRuntimeComponentObservation(observation);
+    }
+    isActiveObservation(observation) {
+        if (!observation.lifecycle.active) {
+            return false;
+        }
+        const ttlMs = observation.lifecycle.ttlMs;
+        if (ttlMs === undefined || ttlMs < 0) {
+            return true;
+        }
+        const capturedAt = Date.parse(observation.lifecycle.capturedAt);
+        return Number.isFinite(capturedAt) && Date.now() - capturedAt <= ttlMs;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisRuntimeComponentObservationRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisRuntimeComponentObservationRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisRuntimeComponentObservationRegistryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function registerPraxisRuntimeComponentObservation(provider, options = {}) {
+    const registry = inject(PraxisRuntimeComponentObservationRegistryService);
+    const destroyRef = options.destroyRef ?? inject(DestroyRef);
+    return registry.register(provider, { ...options, destroyRef });
+}
+
 const SURFACE_OPEN_PRESETS = [
     {
         id: 'praxis-dynamic-form',
@@ -11913,9 +12240,7 @@ class ResourceSurfaceOpenAdapterService {
         const resolvedSubmitUrl = this.isWritableFormSurface(surface.kind)
             ? this.discovery.resolveHref(surface.path, discoveryOptions)
             : null;
-        const resolvedReadUrl = this.isReadableItemSurface(surface)
-            ? this.discovery.resolveHref(surface.path, discoveryOptions)
-            : null;
+        const resolvedReadUrl = this.resolveItemHydrationReadUrl(surface, resourcePath, discoveryOptions);
         const basePayload = this.buildBasePayload(surface);
         const payload = {
             ...basePayload,
@@ -11966,10 +12291,10 @@ class ResourceSurfaceOpenAdapterService {
             apiEndpointKey: options.endpointKey ?? null,
             apiUrlEntry: options.apiUrlEntry ?? resolvedApiEntry,
         };
-        if (surface.scope === 'ITEM' && this.isReadableFormSurface(surface.kind)) {
+        if (surface.scope === 'ITEM' && resolvedReadUrl) {
             payload.widget.inputs['customEndpoints'] = {
                 ...(payload.widget.inputs['customEndpoints'] || {}),
-                getById: this.discovery.resolveHref(surface.path, discoveryOptions),
+                getById: resolvedReadUrl,
             };
             payload.widget.bindingOrder = this.withInputBefore(payload.widget.bindingOrder, 'customEndpoints', 'resourceId');
         }
@@ -12044,6 +12369,24 @@ class ResourceSurfaceOpenAdapterService {
             surface.method.toUpperCase() === 'GET' &&
             (surface.kind === 'VIEW' || surface.kind === 'READ_PROJECTION'));
     }
+    isItemFormHydrationSurface(surface) {
+        return surface.scope === 'ITEM'
+            && (this.isReadableFormSurface(surface.kind) || this.isWritableFormSurface(surface.kind));
+    }
+    resolveItemHydrationReadUrl(surface, resourcePath, discoveryOptions) {
+        if (!this.isItemFormHydrationSurface(surface)) {
+            return null;
+        }
+        if (this.isReadableItemSurface(surface)) {
+            return this.discovery.resolveHref(surface.path, discoveryOptions);
+        }
+        return this.discovery.resolveHref(this.buildCanonicalItemHref(resourcePath), discoveryOptions);
+    }
+    buildCanonicalItemHref(resourcePath) {
+        const normalizedResourcePath = this.normalizeResourcePath(resourcePath);
+        const itemHref = `${normalizedResourcePath}/{id}`;
+        return normalizedResourcePath.startsWith('api/') ? `/${itemHref}` : itemHref;
+    }
     buildIdBinding(idBindingPath) {
         return {
             from: idBindingPath,
@@ -12127,6 +12470,7 @@ class SurfaceOpenMaterializerService {
         if (data && typeof data === 'object' && !Array.isArray(data)) {
             const objectData = data;
             if (payload.widget.id === 'praxis-dynamic-form') {
+                const schemaFields = await this.resolveSchemaFields(payload, discoveryOptions);
                 return {
                     ...payload,
                     widget: {
@@ -12137,7 +12481,7 @@ class SurfaceOpenMaterializerService {
                             mode: payload.widget.inputs?.['mode'] || 'view',
                             initialValue: objectData,
                             resourceId,
-                            config: this.buildLocalFormConfig(objectData, payload.title),
+                            config: this.buildLocalFormConfig(objectData, schemaFields),
                         },
                     },
                     context: this.mergeMaterializationContext(payload, {
@@ -12171,6 +12515,15 @@ class SurfaceOpenMaterializerService {
         const supported = new Set([
             'formId',
             'componentInstanceId',
+            'resourcePath',
+            'resourceId',
+            'apiEndpointKey',
+            'apiUrlEntry',
+            'submitUrl',
+            'submitMethod',
+            'responseSchemaUrl',
+            'customEndpoints',
+            'configPersistenceStrategy',
             'mode',
             'actions',
             'enableCustomization',
@@ -12191,41 +12544,146 @@ class SurfaceOpenMaterializerService {
         ]);
         return Object.fromEntries(Object.entries(inputs).filter(([key]) => supported.has(key)));
     }
-    buildLocalFormConfig(data, title) {
-        const fields = Object.entries(data)
-            .filter(([key, value]) => this.shouldRenderMaterializedFormField(key, value))
-            .map(([key, value]) => ({
-            name: key,
-            label: this.humanizeFieldName(key),
-            controlType: this.inferFormControlType(value),
-            readOnly: true,
-        }));
-        const fieldNames = fields.map((field) => field.name);
-        const rows = this.chunk(fieldNames, 2).map((names, index) => ({
-            id: `row-${index + 1}`,
-            columns: names.map((name) => ({
-                id: `col-${name}`,
-                fields: [name],
-            })),
-        }));
+    buildLocalFormConfig(data, schemaFields = []) {
+        const fields = this.buildMaterializedFormFields(data, schemaFields);
+        const sections = this.buildMaterializedFormSections(fields);
         return {
-            sections: [
-                {
-                    id: 'details',
-                    title: title || 'Detalhes',
-                    rows,
-                },
-            ],
+            sections,
             fieldMetadata: fields,
         };
     }
-    shouldRenderMaterializedFormField(key, value) {
+    buildMaterializedFormFields(data, schemaFields) {
+        const schemaByName = new Map(schemaFields
+            .filter((field) => !!field?.name)
+            .map((field) => [field.name, field]));
+        const orderedNames = schemaFields.length
+            ? [
+                ...schemaFields
+                    .filter((field) => field?.name && Object.prototype.hasOwnProperty.call(data, field.name))
+                    .sort((left, right) => (left.order ?? Number.MAX_SAFE_INTEGER) - (right.order ?? Number.MAX_SAFE_INTEGER))
+                    .map((field) => field.name),
+                ...Object.keys(data).filter((key) => !schemaByName.has(key)),
+            ]
+            : Object.keys(data);
+        return orderedNames
+            .filter((key, index, keys) => keys.indexOf(key) === index)
+            .filter((key) => this.shouldRenderMaterializedFormField(key, data[key], schemaByName.get(key), data))
+            .map((key) => {
+            const field = schemaByName.get(key);
+            if (field) {
+                return {
+                    ...mapFieldDefinitionToMetadata({
+                        ...field,
+                        hidden: false,
+                        formHidden: false,
+                        readOnly: true,
+                    }),
+                    readOnly: true,
+                };
+            }
+            return {
+                name: key,
+                label: this.humanizeFieldName(key),
+                controlType: this.inferFormControlType(data[key]),
+                readOnly: true,
+            };
+        });
+    }
+    buildMaterializedFormSections(fields) {
+        const groups = new Map();
+        for (const field of fields) {
+            const group = String(field.group || '').trim() || 'Detalhes';
+            groups.set(group, [...(groups.get(group) || []), field]);
+        }
+        return Array.from(groups.entries()).map(([group, groupFields], sectionIndex) => {
+            const fieldNames = groupFields.map((field) => field.name);
+            const rows = this.chunk(fieldNames, 2).map((names, rowIndex) => ({
+                id: `row-${sectionIndex + 1}-${rowIndex + 1}`,
+                columns: names.map((name) => ({
+                    id: `col-${name}`,
+                    fields: [name],
+                })),
+            }));
+            return {
+                id: this.stableSectionId(group, sectionIndex),
+                title: group,
+                rows,
+            };
+        });
+    }
+    shouldRenderMaterializedFormField(key, value, field, data) {
         if (!key || key.startsWith('_'))
             return false;
+        if (field?.hidden === true)
+            return false;
+        if (this.isTechnicalRelationIdField(key, field, data))
+            return false;
+        if (this.isDuplicateMediaUrlField(key, value, field, data))
+            return false;
+        if (field?.formHidden === true && !this.isResolvedDisplayCompanionField(key, data)) {
+            return false;
+        }
         if (value == null)
             return true;
         return typeof value !== 'object' || value instanceof Date;
     }
+    isTechnicalRelationIdField(key, field, data) {
+        if (key === 'id' || !/Id$/.test(key))
+            return false;
+        const base = key.slice(0, -2);
+        const hasDisplayCompanion = this.hasDisplayCompanion(base, data);
+        if (!hasDisplayCompanion)
+            return false;
+        const controlType = String(field?.controlType || '').toLowerCase();
+        return Boolean(field?.endpoint
+            || field?.resourcePath
+            || field?.optionSource
+            || controlType.includes('select')
+            || field?.tableHidden === true);
+    }
+    isResolvedDisplayCompanionField(key, data) {
+        const base = this.resolveDisplayCompanionBase(key);
+        return !!base && Object.prototype.hasOwnProperty.call(data, `${base}Id`);
+    }
+    resolveDisplayCompanionBase(key) {
+        const suffixes = ['Nome', 'Name', 'Label', 'Descricao', 'Description', 'Title', 'Text'];
+        const suffix = suffixes.find((candidate) => key.endsWith(candidate));
+        return suffix ? key.slice(0, -suffix.length) : null;
+    }
+    hasDisplayCompanion(base, data) {
+        const suffixes = ['Nome', 'Name', 'Label', 'Descricao', 'Description', 'Title', 'Text'];
+        return suffixes.some((suffix) => {
+            const value = data[`${base}${suffix}`];
+            return value != null && String(value).trim().length > 0;
+        });
+    }
+    isDuplicateMediaUrlField(key, value, field, data) {
+        if (typeof value !== 'string' || !this.looksLikeMediaUrlField(key, field)) {
+            return false;
+        }
+        return Object.entries(data).some(([candidateKey, candidateValue]) => {
+            if (candidateKey === key || candidateValue !== value) {
+                return false;
+            }
+            return this.looksLikeAvatarFieldName(candidateKey);
+        });
+    }
+    looksLikeMediaUrlField(key, field) {
+        const type = String(field?.type || '').toLowerCase();
+        const controlType = String(field?.controlType || '').toLowerCase();
+        const normalized = key.toLowerCase();
+        return Boolean(type === 'url'
+            || controlType.includes('url')
+            || normalized.includes('url')
+            || normalized.includes('foto')
+            || normalized.includes('photo')
+            || normalized.includes('image')
+            || normalized.includes('imagem'));
+    }
+    looksLikeAvatarFieldName(key) {
+        const normalized = key.toLowerCase();
+        return normalized.includes('avatar') || normalized.includes('portrait');
+    }
     inferFormControlType(value) {
         if (typeof value === 'boolean')
             return 'checkbox';
@@ -12247,6 +12705,18 @@ class SurfaceOpenMaterializerService {
             .trim()
             .replace(/^./, (char) => char.toUpperCase());
     }
+    stableSectionId(group, index) {
+        if (group === 'Detalhes') {
+            return 'details';
+        }
+        const normalized = group
+            .normalize('NFD')
+            .replace(/[\u0300-\u036f]/g, '')
+            .toLowerCase()
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+        return normalized || `details-${index + 1}`;
+    }
     chunk(items, size) {
         const result = [];
         for (let index = 0; index < items.length; index += size) {
@@ -14882,6 +15352,10 @@ const PRAXIS_GLOBAL_ACTION_CATALOG = [
                     description: 'Bindings declarativos aplicados sobre widget.inputs.*. Prefira payload.* para o envelope canônico do evento e runtime.* para estado direto do host.',
                 },
                 context: { type: 'object', description: 'Contexto explícito adicional exposto ao runtime de bindings.' },
+                onResult: {
+                    type: 'object',
+                    description: 'Ação estruturada executada quando a surface emite um resultado semântico via surface.result.',
+                },
             },
             required: ['presentation', 'widget'],
             example: {
@@ -14902,6 +15376,60 @@ const PRAXIS_GLOBAL_ACTION_CATALOG = [
             },
         },
     },
+    {
+        id: 'surface.close',
+        label: 'Fechar Surface',
+        icon: 'close',
+        description: 'Fecha a surface de runtime atual quando a ação é executada dentro de um host aberto por surface.open.',
+        payloadSchema: {
+            type: 'object',
+            properties: {
+                type: { type: 'string', description: 'Tipo semântico do fechamento.' },
+                data: { type: 'object', description: 'Dados opcionais devolvidos ao host.' },
+            },
+            example: { type: 'done' },
+        },
+    },
+    {
+        id: 'surface.result',
+        label: 'Emitir Resultado de Surface',
+        icon: 'outbox',
+        description: 'Emite um resultado semântico para a surface de runtime atual sem fechar o drawer.',
+        payloadSchema: {
+            type: 'object',
+            properties: {
+                type: { type: 'string', description: 'Tipo semântico do resultado.' },
+                data: { type: 'object', description: 'Dados opcionais do resultado.' },
+            },
+            example: { type: 'selection', data: { id: 42 } },
+        },
+    },
+    {
+        id: 'dynamicPage.composition.dispatch',
+        label: 'Despachar Evento de Composição',
+        icon: 'hub',
+        description: 'Publica um evento no runtime de composição da página atual para que links governados atualizem estado, widgets e projeções derivadas.',
+        payloadSchema: {
+            type: 'object',
+            properties: {
+                source: {
+                    type: 'object',
+                    description: 'Endpoint canônico que deve ser usado como origem do dispatch.',
+                },
+                payload: {
+                    type: 'object',
+                    description: 'Payload opcional do evento. Quando omitido, a ação usa o payload do contexto de execução.',
+                },
+            },
+            required: ['source'],
+            example: {
+                source: {
+                    kind: 'global-action',
+                    ref: { actionId: 'peopleOps.decision.accepted' },
+                },
+            },
+        },
+    },
     {
         id: 'toast.success',
         label: 'Toast Sucesso',
@@ -23063,8 +23591,9 @@ class PraxisHeroBannerComponent {
     appearance = 'card';
     brandText;
     titleAccent;
+    visualSummary;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisHeroBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisHeroBannerComponent, isStandalone: true, selector: "praxis-hero-banner", inputs: { instanceId: "instanceId", analyticsId: "analyticsId", ariaLabel: "ariaLabel", title: "title", subtitle: "subtitle", description: "description", imageUrl: "imageUrl", imageAlt: "imageAlt", badges: "badges", metaItems: "metaItems", variant: "variant", appearance: "appearance", brandText: "brandText", titleAccent: "titleAccent" }, host: { properties: { "attr.data-instance-id": "instanceId || null", "attr.data-analytics-id": "analyticsId || null", "attr.aria-label": "ariaLabel || null", "attr.role": "ariaLabel ? \"region\" : null", "attr.data-variant": "variant" }, classAttribute: "praxis-hero-banner" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisHeroBannerComponent, isStandalone: true, selector: "praxis-hero-banner", inputs: { instanceId: "instanceId", analyticsId: "analyticsId", ariaLabel: "ariaLabel", title: "title", subtitle: "subtitle", description: "description", imageUrl: "imageUrl", imageAlt: "imageAlt", badges: "badges", metaItems: "metaItems", variant: "variant", appearance: "appearance", brandText: "brandText", titleAccent: "titleAccent", visualSummary: "visualSummary" }, host: { properties: { "attr.data-instance-id": "instanceId || null", "attr.data-analytics-id": "analyticsId || null", "attr.aria-label": "ariaLabel || null", "attr.role": "ariaLabel ? \"region\" : null", "attr.data-variant": "variant" }, classAttribute: "praxis-hero-banner" }, ngImport: i0, template: `
     <section
       class="phb-shell"
       [class.phb-event]="variant === 'event'"
@@ -23076,7 +23605,7 @@ class PraxisHeroBannerComponent {
           <p class="phb-brand">{{ brandText }}</p>
         }
     
-        @if (badges?.length) {
+        @if (badges.length) {
           <div class="phb-badges">
             @for (badge of badges; track badge) {
               <span
@@ -23101,7 +23630,7 @@ class PraxisHeroBannerComponent {
                 <span>{{ title }}</span>
               }
               @if (titleAccent) {
-                <span class="phb-title-accent">{{ titleAccent }}</span>
+                <span class="phb-title-accent"> {{ titleAccent }}</span>
               }
             </h2>
           }
@@ -23110,7 +23639,7 @@ class PraxisHeroBannerComponent {
           }
         </div>
     
-        @if (metaItems?.length) {
+        @if (metaItems.length) {
           <dl class="phb-meta">
             @for (item of metaItems; track item) {
               <div class="phb-meta-item">
@@ -23126,16 +23655,93 @@ class PraxisHeroBannerComponent {
         <div class="phb-visual">
           <img class="phb-image" [src]="imageUrl" [alt]="imageAlt || title || subtitle || 'Imagem do destaque'" />
         </div>
+      } @else if (visualSummary) {
+        <aside class="phb-visual phb-visual-summary" aria-label="Resumo visual">
+          <div class="phb-summary-header">
+            <div>
+              @if (visualSummary.eyebrow) {
+                <p class="phb-summary-eyebrow">{{ visualSummary.eyebrow }}</p>
+              }
+              @if (visualSummary.title) {
+                <h3>{{ visualSummary.title }}</h3>
+              }
+            </div>
+            @if (visualSummary.status) {
+              <span
+                class="phb-status"
+                [class.phb-tone-success]="visualSummary.statusTone === 'success'"
+                [class.phb-tone-warning]="visualSummary.statusTone === 'warning'"
+                [class.phb-tone-danger]="visualSummary.statusTone === 'danger'"
+                [class.phb-tone-info]="visualSummary.statusTone === 'info'"
+                >
+                {{ visualSummary.status }}
+              </span>
+            }
+          </div>
+
+          @if (visualSummary.items?.length) {
+            <dl class="phb-summary-grid">
+              @for (item of visualSummary.items; track item) {
+                <div
+                  class="phb-summary-item"
+                  [class.phb-tone-success]="item.tone === 'success'"
+                  [class.phb-tone-warning]="item.tone === 'warning'"
+                  [class.phb-tone-danger]="item.tone === 'danger'"
+                  [class.phb-tone-info]="item.tone === 'info'"
+                  >
+                  <dt>{{ item.label }}</dt>
+                  <dd>{{ item.value }}</dd>
+                </div>
+              }
+            </dl>
+          }
+
+          @if (visualSummary.events?.length) {
+            <div class="phb-summary-events">
+              @for (event of visualSummary.events; track event) {
+                <div
+                  class="phb-summary-event"
+                  [class.phb-tone-success]="event.tone === 'success'"
+                  [class.phb-tone-warning]="event.tone === 'warning'"
+                  [class.phb-tone-danger]="event.tone === 'danger'"
+                  [class.phb-tone-info]="event.tone === 'info'"
+                  >
+                  <span>{{ event.label }}</span>
+                  @if (event.value) {
+                    <strong>{{ event.value }}</strong>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </aside>
       } @else {
         <div class="phb-visual phb-visual-fallback" aria-hidden="true">
-          <div class="phb-orb phb-orb-a"></div>
-          <div class="phb-orb phb-orb-b"></div>
-          <div class="phb-grid"></div>
+          <div class="phb-preview">
+            <div class="phb-preview-header"></div>
+            <div class="phb-preview-kpis">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div class="phb-preview-chart">
+              <span style="--bar-height: 42%"></span>
+              <span style="--bar-height: 68%"></span>
+              <span style="--bar-height: 54%"></span>
+              <span style="--bar-height: 82%"></span>
+              <span style="--bar-height: 62%"></span>
+            </div>
+            <div class="phb-preview-list">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
         </div>
       }
     
     </section>
-    `, isInline: true, styles: [":host{display:block;--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-shell-shadow: 0 24px 60px color-mix(in srgb, var(--md-sys-color-shadow, #000) 10%, transparent);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 38%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--md-sys-color-primary-container) 8%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-surface-container) 4%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .24), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 45%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .2), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 18%, var(--md-sys-color-surface-container-lowest) 82%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 48%, color-mix(in srgb, var(--md-sys-color-surface) 94%, var(--md-sys-color-secondary-container) 6%) 100% );--phb-brand-color: color-mix(in srgb, var(--md-sys-color-primary) 68%, var(--md-sys-color-on-surface) 32%);--phb-subtitle-color: color-mix(in srgb, var(--md-sys-color-primary) 52%, var(--md-sys-color-on-surface) 48%);--phb-title-color: var(--md-sys-color-on-surface);--phb-description-color: var(--md-sys-color-on-surface-variant);--phb-badge-bg: color-mix(in srgb, var(--md-sys-color-surface-container-high) 78%, transparent);--phb-badge-color: var(--md-sys-color-on-surface);--phb-badge-highlight-bg: color-mix(in srgb, var(--md-sys-color-primary-container) 78%, transparent);--phb-badge-highlight-color: var(--md-sys-color-on-primary-container);--phb-badge-muted-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 82%, transparent);--phb-badge-muted-color: var(--md-sys-color-on-surface-variant);--phb-badge-warning-bg: color-mix(in srgb, var(--md-sys-color-error-container) 74%, transparent);--phb-badge-warning-color: var(--md-sys-color-on-error-container);--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 72%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 48%, transparent);--phb-meta-label-color: var(--md-sys-color-on-surface-variant);--phb-meta-value-color: var(--md-sys-color-on-surface);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, var(--md-sys-color-primary) 10%), color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 24%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface-container-high) 82%), color-mix(in srgb, var(--md-sys-color-primary-container) 18%, var(--md-sys-color-surface-container-low) 82%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 68%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)}:host-context(.mdc-theme-dark),:host-context(.theme-dark){--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 84%, transparent);--phb-shell-shadow: 0 22px 54px rgba(0, 0, 0, .28);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent), transparent 40%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 90%, var(--md-sys-color-primary-container) 10%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 84%, var(--md-sys-color-primary-container) 16%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .18), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 22%, var(--md-sys-color-surface-container-low) 78%) 45%, color-mix(in srgb, var(--md-sys-color-surface-container) 90%, var(--md-sys-color-primary-container) 10%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .16), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 20%, var(--md-sys-color-surface-container-low) 80%) 48%, color-mix(in srgb, var(--md-sys-color-surface-container) 92%, var(--md-sys-color-secondary-container) 8%) 100% );--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, var(--md-sys-color-primary) 12%), color-mix(in srgb, var(--md-sys-color-surface-container) 82%, var(--md-sys-color-primary-container) 18%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 22%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 22%, var(--md-sys-color-surface-container-high) 78%), color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 34%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent)}.phb-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.95fr);gap:22px;align-items:stretch;padding:22px;border-radius:28px;overflow:hidden;background:var(--phb-shell-bg);border:1px solid var(--phb-shell-border);box-shadow:var(--phb-shell-shadow)}.phb-event{background:var(--phb-event-bg)}.phb-institutional{background:var(--phb-institutional-bg)}.phb-copy{display:grid;gap:18px;min-width:0}.phb-brand{margin:0;color:var(--phb-brand-color);font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.phb-badges{display:flex;flex-wrap:wrap;gap:8px}.phb-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--phb-badge-bg);color:var(--phb-badge-color);font-size:.76rem;font-weight:700;letter-spacing:.02em}.phb-badge-highlight{background:var(--phb-badge-highlight-bg);color:var(--phb-badge-highlight-color)}.phb-badge-muted{background:var(--phb-badge-muted-bg);color:var(--phb-badge-muted-color)}.phb-badge-warning{background:var(--phb-badge-warning-bg);color:var(--phb-badge-warning-color)}.phb-text{display:grid;gap:8px}.phb-subtitle{margin:0;color:var(--phb-subtitle-color);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-title{margin:0;color:var(--phb-title-color);font-size:clamp(1.6rem,2.2vw,2.5rem);line-height:1.08;letter-spacing:-.03em}.phb-title-accent{display:inline;margin-left:.18em;background:linear-gradient(90deg,#4285f4,#6ea8ff 28%,#a142f4 62%,#ea4335);-webkit-background-clip:text;background-clip:text;color:transparent}.phb-description{margin:0;max-width:56ch;color:var(--phb-description-color);font-size:.98rem;line-height:1.65}.phb-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0}.phb-meta-item{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:var(--phb-meta-bg);border:1px solid var(--phb-meta-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.phb-meta-item dt{margin:0;color:var(--phb-meta-label-color);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-meta-item dd{margin:0;color:var(--phb-meta-value-color);font-size:.92rem;line-height:1.45}.phb-visual{position:relative;min-height:220px;border-radius:22px;overflow:hidden;background:var(--phb-visual-bg)}.phb-image{display:block;width:100%;height:100%;object-fit:cover}.phb-visual-fallback{background:var(--phb-visual-fallback)}.phb-flat{padding:0 0 18px;border:0;border-radius:0;box-shadow:none;background:transparent;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px}.phb-flat .phb-brand{color:var(--md-sys-color-primary)}.phb-flat .phb-badges{order:3}.phb-flat .phb-meta{grid-template-columns:1fr;gap:6px}.phb-flat .phb-meta-item{padding:0;border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.phb-flat .phb-meta-item dt,.phb-flat .phb-meta-item dd{display:inline}.phb-flat .phb-meta-item dt{margin-right:6px}.phb-flat .phb-visual{min-height:190px;border-radius:26px}.phb-orb{position:absolute;border-radius:999px;filter:blur(2px)}.phb-orb-a{inset:24px auto auto 20px;width:86px;height:86px;background:var(--phb-orb-a-bg)}.phb-orb-b{inset:auto 16px 18px auto;width:132px;height:132px;background:var(--phb-orb-b-bg)}.phb-grid{position:absolute;inset:0;background-image:linear-gradient(var(--phb-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--phb-grid-line) 1px,transparent 1px);background-size:24px 24px;opacity:.5}@media(max-width:900px){.phb-shell{grid-template-columns:1fr;padding:18px}.phb-visual{order:-1;min-height:180px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, styles: [":host{display:block;--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-shell-shadow: 0 24px 60px color-mix(in srgb, var(--md-sys-color-shadow, #000) 10%, transparent);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 38%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--md-sys-color-primary-container) 8%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-surface-container) 4%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .24), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 45%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .2), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 18%, var(--md-sys-color-surface-container-lowest) 82%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 48%, color-mix(in srgb, var(--md-sys-color-surface) 94%, var(--md-sys-color-secondary-container) 6%) 100% );--phb-brand-color: color-mix(in srgb, var(--md-sys-color-primary) 68%, var(--md-sys-color-on-surface) 32%);--phb-subtitle-color: color-mix(in srgb, var(--md-sys-color-primary) 52%, var(--md-sys-color-on-surface) 48%);--phb-title-color: var(--md-sys-color-on-surface);--phb-description-color: var(--md-sys-color-on-surface-variant);--phb-badge-bg: color-mix(in srgb, var(--md-sys-color-surface-container-high) 78%, transparent);--phb-badge-color: var(--md-sys-color-on-surface);--phb-badge-highlight-bg: color-mix(in srgb, var(--md-sys-color-primary-container) 78%, transparent);--phb-badge-highlight-color: var(--md-sys-color-on-primary-container);--phb-badge-muted-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 82%, transparent);--phb-badge-muted-color: var(--md-sys-color-on-surface-variant);--phb-badge-warning-bg: color-mix(in srgb, var(--md-sys-color-error-container) 74%, transparent);--phb-badge-warning-color: var(--md-sys-color-on-error-container);--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 72%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 48%, transparent);--phb-meta-label-color: var(--md-sys-color-on-surface-variant);--phb-meta-value-color: var(--md-sys-color-on-surface);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, var(--md-sys-color-primary) 10%), color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 24%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface-container-high) 82%), color-mix(in srgb, var(--md-sys-color-primary-container) 18%, var(--md-sys-color-surface-container-low) 82%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 68%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)}:host-context(.mdc-theme-dark),:host-context(.theme-dark){--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 84%, transparent);--phb-shell-shadow: 0 22px 54px rgba(0, 0, 0, .28);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent), transparent 40%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 90%, var(--md-sys-color-primary-container) 10%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 84%, var(--md-sys-color-primary-container) 16%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .18), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 22%, var(--md-sys-color-surface-container-low) 78%) 45%, color-mix(in srgb, var(--md-sys-color-surface-container) 90%, var(--md-sys-color-primary-container) 10%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .16), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 20%, var(--md-sys-color-surface-container-low) 80%) 48%, color-mix(in srgb, var(--md-sys-color-surface-container) 92%, var(--md-sys-color-secondary-container) 8%) 100% );--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, var(--md-sys-color-primary) 12%), color-mix(in srgb, var(--md-sys-color-surface-container) 82%, var(--md-sys-color-primary-container) 18%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 22%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 22%, var(--md-sys-color-surface-container-high) 78%), color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 34%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent)}.phb-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.95fr);gap:22px;align-items:stretch;padding:22px;border-radius:28px;overflow:hidden;background:var(--phb-shell-bg);border:1px solid var(--phb-shell-border);box-shadow:var(--phb-shell-shadow)}.phb-event{background:var(--phb-event-bg)}.phb-institutional{background:var(--phb-institutional-bg)}.phb-copy{display:grid;gap:14px;min-width:0}.phb-brand{margin:0;color:var(--phb-brand-color);font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.phb-badges{display:flex;flex-wrap:wrap;gap:8px}.phb-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--phb-badge-bg);color:var(--phb-badge-color);font-size:.76rem;font-weight:700;letter-spacing:.02em}.phb-badge-highlight{background:var(--phb-badge-highlight-bg);color:var(--phb-badge-highlight-color)}.phb-badge-muted{background:var(--phb-badge-muted-bg);color:var(--phb-badge-muted-color)}.phb-badge-warning{background:var(--phb-badge-warning-bg);color:var(--phb-badge-warning-color)}.phb-text{display:grid;gap:8px}.phb-subtitle{margin:0;color:var(--phb-subtitle-color);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-title{margin:0;color:var(--phb-title-color);font-size:clamp(1.6rem,2.2vw,2.5rem);line-height:1.08;letter-spacing:0}.phb-title-accent{display:inline;background:linear-gradient(90deg,#4285f4,#6ea8ff 28%,#a142f4 62%,#ea4335);-webkit-background-clip:text;background-clip:text;color:transparent}.phb-description{margin:0;max-width:56ch;color:var(--phb-description-color);font-size:.94rem;line-height:1.5}.phb-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0}.phb-meta-item{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:var(--phb-meta-bg);border:1px solid var(--phb-meta-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.phb-meta-item dt{margin:0;color:var(--phb-meta-label-color);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-meta-item dd{margin:0;color:var(--phb-meta-value-color);font-size:.92rem;line-height:1.45}.phb-visual{position:relative;min-height:220px;border-radius:22px;overflow:hidden;background:var(--phb-visual-bg)}.phb-image{display:block;width:100%;height:100%;object-fit:cover}.phb-visual-fallback{background:var(--phb-visual-fallback)}.phb-visual-summary{display:grid;align-content:start;gap:10px;padding:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--md-sys-color-surface-container-high) 92%,var(--md-sys-color-primary) 8%),color-mix(in srgb,var(--md-sys-color-surface-container-low) 88%,var(--md-sys-color-tertiary) 12%))}.phb-summary-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.phb-summary-eyebrow{margin:0 0 4px;color:var(--md-sys-color-primary);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.phb-summary-header h3{margin:0;color:var(--md-sys-color-on-surface);font-size:.95rem;line-height:1.25}.phb-status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-highest) 74%,transparent);color:var(--md-sys-color-on-surface);font-size:.72rem;font-weight:800;white-space:nowrap}.phb-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.phb-summary-item{display:grid;gap:4px;min-height:56px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 48%,transparent);border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 58%,transparent)}.phb-summary-item dt{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.phb-summary-item dd{margin:0;color:var(--md-sys-color-on-surface);font-size:1.08rem;font-weight:850;line-height:1.15}.phb-summary-events{display:grid;gap:6px}.phb-summary-event{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;padding:6px 9px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container) 68%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:.72rem}.phb-summary-event strong{color:var(--md-sys-color-on-surface);font-weight:800;white-space:nowrap}.phb-tone-success{--phb-tone-color: var(--md-sys-color-tertiary);border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 34%,var(--md-sys-color-outline-variant))}.phb-tone-warning{--phb-tone-color: #d79921;border-color:color-mix(in srgb,#d79921 36%,var(--md-sys-color-outline-variant))}.phb-tone-danger{--phb-tone-color: var(--md-sys-color-error);border-color:color-mix(in srgb,var(--md-sys-color-error) 34%,var(--md-sys-color-outline-variant))}.phb-tone-info{--phb-tone-color: var(--md-sys-color-primary);border-color:color-mix(in srgb,var(--md-sys-color-primary) 34%,var(--md-sys-color-outline-variant))}.phb-summary-item.phb-tone-success dd,.phb-summary-item.phb-tone-warning dd,.phb-summary-item.phb-tone-danger dd,.phb-summary-item.phb-tone-info dd,.phb-status.phb-tone-success,.phb-status.phb-tone-warning,.phb-status.phb-tone-danger,.phb-status.phb-tone-info,.phb-summary-event.phb-tone-success strong,.phb-summary-event.phb-tone-warning strong,.phb-summary-event.phb-tone-danger strong,.phb-summary-event.phb-tone-info strong{color:var(--phb-tone-color)}.phb-flat{padding:0 0 18px;border:0;border-radius:0;box-shadow:none;background:transparent;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px}.phb-flat .phb-brand{color:var(--md-sys-color-primary)}.phb-flat .phb-badges{order:3}.phb-flat .phb-meta{grid-template-columns:1fr;gap:6px}.phb-flat .phb-meta-item{padding:0;border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.phb-flat .phb-meta-item dt,.phb-flat .phb-meta-item dd{display:inline}.phb-flat .phb-meta-item dt{margin-right:6px}.phb-flat .phb-visual{min-height:190px;border-radius:26px}.phb-preview{position:absolute;inset:18px;display:grid;grid-template-rows:18px 44px minmax(72px,1fr) 1fr;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 62%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--md-sys-color-surface-bright, #fff) 28%,transparent)}.phb-preview-header,.phb-preview-kpis span,.phb-preview-list span{border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-on-surface) 12%,transparent)}.phb-preview-header{width:46%}.phb-preview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.phb-preview-kpis span{height:44px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 48%,var(--md-sys-color-surface-container-high) 52%)}.phb-preview-chart{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:8px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-container) 74%,transparent)}.phb-preview-chart span{min-height:18px;height:var(--bar-height);border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--md-sys-color-primary) 68%,var(--md-sys-color-tertiary) 32%)}.phb-preview-list{display:grid;gap:8px;align-content:start}.phb-preview-list span{height:10px}.phb-preview-list span:nth-child(2){width:74%}.phb-preview-list span:nth-child(3){width:58%}@media(max-width:900px){.phb-shell{grid-template-columns:1fr;padding:18px}.phb-visual{order:-1;min-height:180px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisHeroBannerComponent, decorators: [{
             type: Component,
@@ -23158,7 +23764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           <p class="phb-brand">{{ brandText }}</p>
         }
     
-        @if (badges?.length) {
+        @if (badges.length) {
           <div class="phb-badges">
             @for (badge of badges; track badge) {
               <span
@@ -23183,7 +23789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <span>{{ title }}</span>
               }
               @if (titleAccent) {
-                <span class="phb-title-accent">{{ titleAccent }}</span>
+                <span class="phb-title-accent"> {{ titleAccent }}</span>
               }
             </h2>
           }
@@ -23192,7 +23798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           }
         </div>
     
-        @if (metaItems?.length) {
+        @if (metaItems.length) {
           <dl class="phb-meta">
             @for (item of metaItems; track item) {
               <div class="phb-meta-item">
@@ -23208,16 +23814,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <div class="phb-visual">
           <img class="phb-image" [src]="imageUrl" [alt]="imageAlt || title || subtitle || 'Imagem do destaque'" />
         </div>
+      } @else if (visualSummary) {
+        <aside class="phb-visual phb-visual-summary" aria-label="Resumo visual">
+          <div class="phb-summary-header">
+            <div>
+              @if (visualSummary.eyebrow) {
+                <p class="phb-summary-eyebrow">{{ visualSummary.eyebrow }}</p>
+              }
+              @if (visualSummary.title) {
+                <h3>{{ visualSummary.title }}</h3>
+              }
+            </div>
+            @if (visualSummary.status) {
+              <span
+                class="phb-status"
+                [class.phb-tone-success]="visualSummary.statusTone === 'success'"
+                [class.phb-tone-warning]="visualSummary.statusTone === 'warning'"
+                [class.phb-tone-danger]="visualSummary.statusTone === 'danger'"
+                [class.phb-tone-info]="visualSummary.statusTone === 'info'"
+                >
+                {{ visualSummary.status }}
+              </span>
+            }
+          </div>
+
+          @if (visualSummary.items?.length) {
+            <dl class="phb-summary-grid">
+              @for (item of visualSummary.items; track item) {
+                <div
+                  class="phb-summary-item"
+                  [class.phb-tone-success]="item.tone === 'success'"
+                  [class.phb-tone-warning]="item.tone === 'warning'"
+                  [class.phb-tone-danger]="item.tone === 'danger'"
+                  [class.phb-tone-info]="item.tone === 'info'"
+                  >
+                  <dt>{{ item.label }}</dt>
+                  <dd>{{ item.value }}</dd>
+                </div>
+              }
+            </dl>
+          }
+
+          @if (visualSummary.events?.length) {
+            <div class="phb-summary-events">
+              @for (event of visualSummary.events; track event) {
+                <div
+                  class="phb-summary-event"
+                  [class.phb-tone-success]="event.tone === 'success'"
+                  [class.phb-tone-warning]="event.tone === 'warning'"
+                  [class.phb-tone-danger]="event.tone === 'danger'"
+                  [class.phb-tone-info]="event.tone === 'info'"
+                  >
+                  <span>{{ event.label }}</span>
+                  @if (event.value) {
+                    <strong>{{ event.value }}</strong>
+                  }
+                </div>
+              }
+            </div>
+          }
+        </aside>
       } @else {
         <div class="phb-visual phb-visual-fallback" aria-hidden="true">
-          <div class="phb-orb phb-orb-a"></div>
-          <div class="phb-orb phb-orb-b"></div>
-          <div class="phb-grid"></div>
+          <div class="phb-preview">
+            <div class="phb-preview-header"></div>
+            <div class="phb-preview-kpis">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+            <div class="phb-preview-chart">
+              <span style="--bar-height: 42%"></span>
+              <span style="--bar-height: 68%"></span>
+              <span style="--bar-height: 54%"></span>
+              <span style="--bar-height: 82%"></span>
+              <span style="--bar-height: 62%"></span>
+            </div>
+            <div class="phb-preview-list">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </div>
         </div>
       }
     
     </section>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-shell-shadow: 0 24px 60px color-mix(in srgb, var(--md-sys-color-shadow, #000) 10%, transparent);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 38%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--md-sys-color-primary-container) 8%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-surface-container) 4%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .24), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 45%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .2), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 18%, var(--md-sys-color-surface-container-lowest) 82%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 48%, color-mix(in srgb, var(--md-sys-color-surface) 94%, var(--md-sys-color-secondary-container) 6%) 100% );--phb-brand-color: color-mix(in srgb, var(--md-sys-color-primary) 68%, var(--md-sys-color-on-surface) 32%);--phb-subtitle-color: color-mix(in srgb, var(--md-sys-color-primary) 52%, var(--md-sys-color-on-surface) 48%);--phb-title-color: var(--md-sys-color-on-surface);--phb-description-color: var(--md-sys-color-on-surface-variant);--phb-badge-bg: color-mix(in srgb, var(--md-sys-color-surface-container-high) 78%, transparent);--phb-badge-color: var(--md-sys-color-on-surface);--phb-badge-highlight-bg: color-mix(in srgb, var(--md-sys-color-primary-container) 78%, transparent);--phb-badge-highlight-color: var(--md-sys-color-on-primary-container);--phb-badge-muted-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 82%, transparent);--phb-badge-muted-color: var(--md-sys-color-on-surface-variant);--phb-badge-warning-bg: color-mix(in srgb, var(--md-sys-color-error-container) 74%, transparent);--phb-badge-warning-color: var(--md-sys-color-on-error-container);--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 72%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 48%, transparent);--phb-meta-label-color: var(--md-sys-color-on-surface-variant);--phb-meta-value-color: var(--md-sys-color-on-surface);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, var(--md-sys-color-primary) 10%), color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 24%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface-container-high) 82%), color-mix(in srgb, var(--md-sys-color-primary-container) 18%, var(--md-sys-color-surface-container-low) 82%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 68%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)}:host-context(.mdc-theme-dark),:host-context(.theme-dark){--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 84%, transparent);--phb-shell-shadow: 0 22px 54px rgba(0, 0, 0, .28);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent), transparent 40%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 90%, var(--md-sys-color-primary-container) 10%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 84%, var(--md-sys-color-primary-container) 16%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .18), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 22%, var(--md-sys-color-surface-container-low) 78%) 45%, color-mix(in srgb, var(--md-sys-color-surface-container) 90%, var(--md-sys-color-primary-container) 10%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .16), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 20%, var(--md-sys-color-surface-container-low) 80%) 48%, color-mix(in srgb, var(--md-sys-color-surface-container) 92%, var(--md-sys-color-secondary-container) 8%) 100% );--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, var(--md-sys-color-primary) 12%), color-mix(in srgb, var(--md-sys-color-surface-container) 82%, var(--md-sys-color-primary-container) 18%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 22%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 22%, var(--md-sys-color-surface-container-high) 78%), color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 34%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent)}.phb-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.95fr);gap:22px;align-items:stretch;padding:22px;border-radius:28px;overflow:hidden;background:var(--phb-shell-bg);border:1px solid var(--phb-shell-border);box-shadow:var(--phb-shell-shadow)}.phb-event{background:var(--phb-event-bg)}.phb-institutional{background:var(--phb-institutional-bg)}.phb-copy{display:grid;gap:18px;min-width:0}.phb-brand{margin:0;color:var(--phb-brand-color);font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.phb-badges{display:flex;flex-wrap:wrap;gap:8px}.phb-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--phb-badge-bg);color:var(--phb-badge-color);font-size:.76rem;font-weight:700;letter-spacing:.02em}.phb-badge-highlight{background:var(--phb-badge-highlight-bg);color:var(--phb-badge-highlight-color)}.phb-badge-muted{background:var(--phb-badge-muted-bg);color:var(--phb-badge-muted-color)}.phb-badge-warning{background:var(--phb-badge-warning-bg);color:var(--phb-badge-warning-color)}.phb-text{display:grid;gap:8px}.phb-subtitle{margin:0;color:var(--phb-subtitle-color);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-title{margin:0;color:var(--phb-title-color);font-size:clamp(1.6rem,2.2vw,2.5rem);line-height:1.08;letter-spacing:-.03em}.phb-title-accent{display:inline;margin-left:.18em;background:linear-gradient(90deg,#4285f4,#6ea8ff 28%,#a142f4 62%,#ea4335);-webkit-background-clip:text;background-clip:text;color:transparent}.phb-description{margin:0;max-width:56ch;color:var(--phb-description-color);font-size:.98rem;line-height:1.65}.phb-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0}.phb-meta-item{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:var(--phb-meta-bg);border:1px solid var(--phb-meta-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.phb-meta-item dt{margin:0;color:var(--phb-meta-label-color);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-meta-item dd{margin:0;color:var(--phb-meta-value-color);font-size:.92rem;line-height:1.45}.phb-visual{position:relative;min-height:220px;border-radius:22px;overflow:hidden;background:var(--phb-visual-bg)}.phb-image{display:block;width:100%;height:100%;object-fit:cover}.phb-visual-fallback{background:var(--phb-visual-fallback)}.phb-flat{padding:0 0 18px;border:0;border-radius:0;box-shadow:none;background:transparent;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px}.phb-flat .phb-brand{color:var(--md-sys-color-primary)}.phb-flat .phb-badges{order:3}.phb-flat .phb-meta{grid-template-columns:1fr;gap:6px}.phb-flat .phb-meta-item{padding:0;border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.phb-flat .phb-meta-item dt,.phb-flat .phb-meta-item dd{display:inline}.phb-flat .phb-meta-item dt{margin-right:6px}.phb-flat .phb-visual{min-height:190px;border-radius:26px}.phb-orb{position:absolute;border-radius:999px;filter:blur(2px)}.phb-orb-a{inset:24px auto auto 20px;width:86px;height:86px;background:var(--phb-orb-a-bg)}.phb-orb-b{inset:auto 16px 18px auto;width:132px;height:132px;background:var(--phb-orb-b-bg)}.phb-grid{position:absolute;inset:0;background-image:linear-gradient(var(--phb-grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--phb-grid-line) 1px,transparent 1px);background-size:24px 24px;opacity:.5}@media(max-width:900px){.phb-shell{grid-template-columns:1fr;padding:18px}.phb-visual{order:-1;min-height:180px}}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-shell-shadow: 0 24px 60px color-mix(in srgb, var(--md-sys-color-shadow, #000) 10%, transparent);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 14%, transparent), transparent 38%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 92%, var(--md-sys-color-primary-container) 8%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-surface-container) 4%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .24), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 45%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .2), transparent 34%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 18%, var(--md-sys-color-surface-container-lowest) 82%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 24%, var(--md-sys-color-surface-container-low) 76%) 48%, color-mix(in srgb, var(--md-sys-color-surface) 94%, var(--md-sys-color-secondary-container) 6%) 100% );--phb-brand-color: color-mix(in srgb, var(--md-sys-color-primary) 68%, var(--md-sys-color-on-surface) 32%);--phb-subtitle-color: color-mix(in srgb, var(--md-sys-color-primary) 52%, var(--md-sys-color-on-surface) 48%);--phb-title-color: var(--md-sys-color-on-surface);--phb-description-color: var(--md-sys-color-on-surface-variant);--phb-badge-bg: color-mix(in srgb, var(--md-sys-color-surface-container-high) 78%, transparent);--phb-badge-color: var(--md-sys-color-on-surface);--phb-badge-highlight-bg: color-mix(in srgb, var(--md-sys-color-primary-container) 78%, transparent);--phb-badge-highlight-color: var(--md-sys-color-on-primary-container);--phb-badge-muted-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 82%, transparent);--phb-badge-muted-color: var(--md-sys-color-on-surface-variant);--phb-badge-warning-bg: color-mix(in srgb, var(--md-sys-color-error-container) 74%, transparent);--phb-badge-warning-color: var(--md-sys-color-on-error-container);--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 72%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 48%, transparent);--phb-meta-label-color: var(--md-sys-color-on-surface-variant);--phb-meta-value-color: var(--md-sys-color-on-surface);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 90%, var(--md-sys-color-primary) 10%), color-mix(in srgb, var(--md-sys-color-surface-container-low) 88%, var(--md-sys-color-primary-container) 12%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 24%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 18%, var(--md-sys-color-surface-container-high) 82%), color-mix(in srgb, var(--md-sys-color-primary-container) 18%, var(--md-sys-color-surface-container-low) 82%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-bright, var(--md-sys-color-surface-container-high)) 68%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 22%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent)}:host-context(.mdc-theme-dark),:host-context(.theme-dark){--phb-shell-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 84%, transparent);--phb-shell-shadow: 0 22px 54px rgba(0, 0, 0, .28);--phb-shell-bg: radial-gradient(circle at top right, color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent), transparent 40%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 90%, var(--md-sys-color-primary-container) 10%) 0%, color-mix(in srgb, var(--md-sys-color-surface-container-low) 84%, var(--md-sys-color-primary-container) 16%) 54%, color-mix(in srgb, var(--md-sys-color-surface) 92%, var(--md-sys-color-primary-container) 8%) 100% );--phb-event-bg: radial-gradient(circle at top right, rgba(255, 184, 77, .18), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-primary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 22%, var(--md-sys-color-surface-container-low) 78%) 45%, color-mix(in srgb, var(--md-sys-color-surface-container) 90%, var(--md-sys-color-primary-container) 10%) 100% );--phb-institutional-bg: radial-gradient(circle at top right, rgba(17, 94, 89, .16), transparent 36%), linear-gradient( 135deg, color-mix(in srgb, var(--md-sys-color-secondary-container) 16%, var(--md-sys-color-surface-container-lowest) 84%) 0%, color-mix(in srgb, var(--md-sys-color-secondary-container) 20%, var(--md-sys-color-surface-container-low) 80%) 48%, color-mix(in srgb, var(--md-sys-color-surface-container) 92%, var(--md-sys-color-secondary-container) 8%) 100% );--phb-meta-bg: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);--phb-meta-border: color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);--phb-visual-bg: linear-gradient( 160deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, var(--md-sys-color-primary) 12%), color-mix(in srgb, var(--md-sys-color-surface-container) 82%, var(--md-sys-color-primary-container) 18%) );--phb-visual-fallback: linear-gradient( 180deg, color-mix(in srgb, var(--md-sys-color-surface-container-high) 22%, transparent), color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 8%, transparent) ), linear-gradient( 145deg, color-mix(in srgb, var(--md-sys-color-primary) 22%, var(--md-sys-color-surface-container-high) 78%), color-mix(in srgb, var(--md-sys-color-primary-container) 24%, var(--md-sys-color-surface-container-low) 76%) );--phb-orb-a-bg: color-mix(in srgb, var(--md-sys-color-surface-container-highest) 34%, transparent);--phb-orb-b-bg: color-mix(in srgb, var(--md-sys-color-primary) 26%, transparent);--phb-grid-line: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent)}.phb-shell{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.95fr);gap:22px;align-items:stretch;padding:22px;border-radius:28px;overflow:hidden;background:var(--phb-shell-bg);border:1px solid var(--phb-shell-border);box-shadow:var(--phb-shell-shadow)}.phb-event{background:var(--phb-event-bg)}.phb-institutional{background:var(--phb-institutional-bg)}.phb-copy{display:grid;gap:14px;min-width:0}.phb-brand{margin:0;color:var(--phb-brand-color);font-size:.88rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.phb-badges{display:flex;flex-wrap:wrap;gap:8px}.phb-badge{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;background:var(--phb-badge-bg);color:var(--phb-badge-color);font-size:.76rem;font-weight:700;letter-spacing:.02em}.phb-badge-highlight{background:var(--phb-badge-highlight-bg);color:var(--phb-badge-highlight-color)}.phb-badge-muted{background:var(--phb-badge-muted-bg);color:var(--phb-badge-muted-color)}.phb-badge-warning{background:var(--phb-badge-warning-bg);color:var(--phb-badge-warning-color)}.phb-text{display:grid;gap:8px}.phb-subtitle{margin:0;color:var(--phb-subtitle-color);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-title{margin:0;color:var(--phb-title-color);font-size:clamp(1.6rem,2.2vw,2.5rem);line-height:1.08;letter-spacing:0}.phb-title-accent{display:inline;background:linear-gradient(90deg,#4285f4,#6ea8ff 28%,#a142f4 62%,#ea4335);-webkit-background-clip:text;background-clip:text;color:transparent}.phb-description{margin:0;max-width:56ch;color:var(--phb-description-color);font-size:.94rem;line-height:1.5}.phb-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0}.phb-meta-item{display:grid;gap:4px;padding:12px 14px;border-radius:16px;background:var(--phb-meta-bg);border:1px solid var(--phb-meta-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.phb-meta-item dt{margin:0;color:var(--phb-meta-label-color);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.phb-meta-item dd{margin:0;color:var(--phb-meta-value-color);font-size:.92rem;line-height:1.45}.phb-visual{position:relative;min-height:220px;border-radius:22px;overflow:hidden;background:var(--phb-visual-bg)}.phb-image{display:block;width:100%;height:100%;object-fit:cover}.phb-visual-fallback{background:var(--phb-visual-fallback)}.phb-visual-summary{display:grid;align-content:start;gap:10px;padding:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--md-sys-color-surface-container-high) 92%,var(--md-sys-color-primary) 8%),color-mix(in srgb,var(--md-sys-color-surface-container-low) 88%,var(--md-sys-color-tertiary) 12%))}.phb-summary-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.phb-summary-eyebrow{margin:0 0 4px;color:var(--md-sys-color-primary);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.phb-summary-header h3{margin:0;color:var(--md-sys-color-on-surface);font-size:.95rem;line-height:1.25}.phb-status{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-surface-container-highest) 74%,transparent);color:var(--md-sys-color-on-surface);font-size:.72rem;font-weight:800;white-space:nowrap}.phb-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}.phb-summary-item{display:grid;gap:4px;min-height:56px;padding:9px 10px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 48%,transparent);border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 58%,transparent)}.phb-summary-item dt{margin:0;color:var(--md-sys-color-on-surface-variant);font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.phb-summary-item dd{margin:0;color:var(--md-sys-color-on-surface);font-size:1.08rem;font-weight:850;line-height:1.15}.phb-summary-events{display:grid;gap:6px}.phb-summary-event{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;padding:6px 9px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-container) 68%,transparent);color:var(--md-sys-color-on-surface-variant);font-size:.72rem}.phb-summary-event strong{color:var(--md-sys-color-on-surface);font-weight:800;white-space:nowrap}.phb-tone-success{--phb-tone-color: var(--md-sys-color-tertiary);border-color:color-mix(in srgb,var(--md-sys-color-tertiary) 34%,var(--md-sys-color-outline-variant))}.phb-tone-warning{--phb-tone-color: #d79921;border-color:color-mix(in srgb,#d79921 36%,var(--md-sys-color-outline-variant))}.phb-tone-danger{--phb-tone-color: var(--md-sys-color-error);border-color:color-mix(in srgb,var(--md-sys-color-error) 34%,var(--md-sys-color-outline-variant))}.phb-tone-info{--phb-tone-color: var(--md-sys-color-primary);border-color:color-mix(in srgb,var(--md-sys-color-primary) 34%,var(--md-sys-color-outline-variant))}.phb-summary-item.phb-tone-success dd,.phb-summary-item.phb-tone-warning dd,.phb-summary-item.phb-tone-danger dd,.phb-summary-item.phb-tone-info dd,.phb-status.phb-tone-success,.phb-status.phb-tone-warning,.phb-status.phb-tone-danger,.phb-status.phb-tone-info,.phb-summary-event.phb-tone-success strong,.phb-summary-event.phb-tone-warning strong,.phb-summary-event.phb-tone-danger strong,.phb-summary-event.phb-tone-info strong{color:var(--phb-tone-color)}.phb-flat{padding:0 0 18px;border:0;border-radius:0;box-shadow:none;background:transparent;grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px}.phb-flat .phb-brand{color:var(--md-sys-color-primary)}.phb-flat .phb-badges{order:3}.phb-flat .phb-meta{grid-template-columns:1fr;gap:6px}.phb-flat .phb-meta-item{padding:0;border:0;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}.phb-flat .phb-meta-item dt,.phb-flat .phb-meta-item dd{display:inline}.phb-flat .phb-meta-item dt{margin-right:6px}.phb-flat .phb-visual{min-height:190px;border-radius:26px}.phb-preview{position:absolute;inset:18px;display:grid;grid-template-rows:18px 44px minmax(72px,1fr) 1fr;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant) 50%,transparent);border-radius:18px;background:color-mix(in srgb,var(--md-sys-color-surface-container-lowest) 62%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--md-sys-color-surface-bright, #fff) 28%,transparent)}.phb-preview-header,.phb-preview-kpis span,.phb-preview-list span{border-radius:999px;background:color-mix(in srgb,var(--md-sys-color-on-surface) 12%,transparent)}.phb-preview-header{width:46%}.phb-preview-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.phb-preview-kpis span{height:44px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-primary-container) 48%,var(--md-sys-color-surface-container-high) 52%)}.phb-preview-chart{display:grid;grid-template-columns:repeat(5,1fr);align-items:end;gap:8px;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-container) 74%,transparent)}.phb-preview-chart span{min-height:18px;height:var(--bar-height);border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--md-sys-color-primary) 68%,var(--md-sys-color-tertiary) 32%)}.phb-preview-list{display:grid;gap:8px;align-content:start}.phb-preview-list span{height:10px}.phb-preview-list span:nth-child(2){width:74%}.phb-preview-list span:nth-child(3){width:58%}@media(max-width:900px){.phb-shell{grid-template-columns:1fr;padding:18px}.phb-visual{order:-1;min-height:180px}}\n"] }]
         }], propDecorators: { instanceId: [{
                 type: Input
             }], analyticsId: [{
@@ -23246,6 +23929,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Input
             }], titleAccent: [{
                 type: Input
+            }], visualSummary: [{
+                type: Input
             }] } });
 
 const PRAXIS_HERO_BANNER_METADATA = {
@@ -23268,6 +23953,7 @@ const PRAXIS_HERO_BANNER_METADATA = {
         { name: 'imageAlt', type: 'string', label: 'Alt da imagem', description: 'Texto alternativo da imagem, quando presente.' },
         { name: 'badges', type: 'Array<{ label: string; tone?: "default" | "highlight" | "muted" | "warning" }>', label: 'Badges', description: 'Badges curatoriais no topo do hero.' },
         { name: 'metaItems', type: 'Array<{ label: string; value: string }>', label: 'Metadados', description: 'Metadados como data, local ou tenant.' },
+        { name: 'visualSummary', type: 'HeroVisualSummary | null', label: 'Resumo visual', description: 'Painel opcional com evidências executivas, métricas e eventos para substituir a ilustração padrão.' },
         { name: 'variant', type: "'default' | 'event' | 'institutional'", label: 'Variante', description: 'Variante visual inicial do hero banner.', default: 'default' },
         { name: 'appearance', type: "'card' | 'flat'", label: 'Aparência', description: 'Controla se o hero usa cartão completo ou composição mais plana e leve.', default: 'card' },
     ],
@@ -23985,12 +24671,19 @@ class DynamicWidgetLoaderDirective {
     currentId;
     currentUsesInitialBindings = false;
     currentInitialBindingSignature = null;
+    boundInputValues = {};
     outputSubs = [];
+    destroyed = false;
     /** Dispatch a shell action to the inner widget instance when supported. */
     dispatchAction(action) {
         const instance = this.compRef?.instance;
         if (!instance)
             return false;
+        if (action?.id === 'component-settings' &&
+            typeof instance.openTableSettings === 'function') {
+            instance.openTableSettings();
+            return true;
+        }
         if (typeof instance.handleShellAction === 'function') {
             instance.handleShellAction(action);
             return true;
@@ -24015,11 +24708,30 @@ class DynamicWidgetLoaderDirective {
         }
     }
     ngOnDestroy() {
+        this.destroyed = true;
         this.destroyCurrent();
     }
     renderNow() {
         this.tryRender();
     }
+    materializedInputSnapshot(inputNames) {
+        const instance = this.compRef?.instance;
+        if (!instance || !Array.isArray(inputNames) || !inputNames.length) {
+            return {};
+        }
+        const snapshot = {};
+        for (const name of inputNames) {
+            const key = typeof name === 'string' ? name.trim() : '';
+            if (!key) {
+                continue;
+            }
+            const value = instance[key];
+            if (value !== undefined && typeof value !== 'function') {
+                snapshot[key] = this.cloneValue(value);
+            }
+        }
+        return snapshot;
+    }
     parseWidget(input) {
         if (!input)
             return null;
@@ -24035,6 +24747,8 @@ class DynamicWidgetLoaderDirective {
         return input;
     }
     tryRender() {
+        if (this.destroyed)
+            return;
         const def = this.parseWidget(this.widget);
         if (!def || !def.id)
             return;
@@ -24051,7 +24765,7 @@ class DynamicWidgetLoaderDirective {
             throw error;
         }
         // New component type? recreate; else just update inputs
-        const useInitialBindings = this.shouldUseInitialInputBindings(def.id, meta || undefined);
+        const useInitialBindings = this.shouldUseInitialInputBindings(def.id, inputs, meta || undefined);
         const initialBindingSignature = useInitialBindings
             ? this.initialBindingSignature(def.id, inputs, def.bindingOrder, meta || undefined)
             : null;
@@ -24059,17 +24773,22 @@ class DynamicWidgetLoaderDirective {
             || def.id !== this.currentId
             || (useInitialBindings
                 && initialBindingSignature !== this.currentInitialBindingSignature);
+        let recreated = false;
         if (needsRecreate) {
             this.createComponent(def.id, inputs, def.bindingOrder, meta || undefined, useInitialBindings, initialBindingSignature);
+            recreated = !!this.compRef;
         }
         if (this.compRef) {
             try {
+                let inputsChanged = false;
                 // Faz o binding com coerção de tipos quando possível
                 if (!this.currentUsesInitialBindings) {
-                    this.bindInputs(this.compRef, def.id, inputs, def.bindingOrder, meta || undefined);
+                    inputsChanged = this.bindInputs(this.compRef, def.id, inputs, def.bindingOrder, meta || undefined);
                 }
                 this.bindOutputs(this.compRef.instance, def.id, outputs, meta || undefined);
-                this.compRef.changeDetectorRef.detectChanges();
+                if (recreated || inputsChanged) {
+                    this.compRef.changeDetectorRef.detectChanges();
+                }
                 this.widgetDiagnostic.emit({
                     componentId: def.id,
                     childWidgetKey: def.childWidgetKey,
@@ -24115,11 +24834,10 @@ class DynamicWidgetLoaderDirective {
         }
         this.vcRef.clear();
         try {
-            const initialBindings = useInitialBindings
-                ? this.orderedInputEntries(id, inputs, bindingOrder)
-                    .map(([key, raw]) => inputBinding(key, () => this.resolveAndCoerceValue(key, raw, metaForInputs)))
-                : [];
-            this.compRef = this.vcRef.createComponent(cmp, initialBindings.length ? { bindings: initialBindings } : undefined);
+            this.compRef = this.vcRef.createComponent(cmp);
+            if (useInitialBindings) {
+                this.bindInputs(this.compRef, id, inputs, bindingOrder, metaForInputs);
+            }
             this.currentId = id;
             this.currentUsesInitialBindings = useInitialBindings;
             this.currentInitialBindingSignature = useInitialBindings ? initialBindingSignature : null;
@@ -24142,25 +24860,57 @@ class DynamicWidgetLoaderDirective {
             this.currentId = undefined;
             this.currentUsesInitialBindings = false;
             this.currentInitialBindingSignature = null;
+            this.boundInputValues = {};
         }
         this.vcRef.clear();
     }
-    shouldUseInitialInputBindings(id, meta) {
+    cloneValue(value) {
+        if (value == null || typeof value !== 'object') {
+            return value;
+        }
+        try {
+            return JSON.parse(JSON.stringify(value));
+        }
+        catch {
+            return value;
+        }
+    }
+    shouldUseInitialInputBindings(id, inputs, meta) {
+        const hasDetachedDynamicFormRuntimeInputs = id === 'praxis-dynamic-form'
+            && Boolean(inputs['apiUrlEntry']
+                || inputs['apiEndpointKey']
+                || inputs['schemaUrl']
+                || inputs['readUrl']
+                || inputs['submitUrl']
+                || inputs['customEndpoints']);
+        const hasDetachedFilterRuntimeInputs = id === 'praxis-filter'
+            && Boolean(inputs['apiUrlEntry']);
         return meta?.requiresInitialInputs === true
-            || id === 'praxis-chart';
+            || id === 'praxis-chart'
+            || hasDetachedDynamicFormRuntimeInputs
+            || hasDetachedFilterRuntimeInputs;
     }
     bindInputs(compRef, id, inputs, bindingOrder, meta) {
         const prioritized = this.orderedInputEntries(id, inputs, bindingOrder);
+        const changes = {};
+        let changed = false;
         const apply = (key, raw) => {
             const value = this.resolveAndCoerceValue(key, raw, meta);
             try {
-                if (typeof compRef.setInput === 'function') {
+                const hadPreviousValue = Object.prototype.hasOwnProperty.call(this.boundInputValues, key);
+                const previousValue = this.boundInputValues[key];
+                if (hadPreviousValue && Object.is(previousValue, value)) {
+                    return;
+                }
+                if (this.isSignalInput(compRef.instance, key)) {
                     compRef.setInput(key, value);
                 }
                 else {
-                    // Fallback assignment when setInput is unavailable
                     compRef.instance[key] = value;
                 }
+                this.boundInputValues[key] = value;
+                changes[key] = new SimpleChange(previousValue, value, !hadPreviousValue);
+                changed = true;
             }
             catch (e) {
                 console.warn(`[DynamicWidgetLoader] Failed to set input ${key}`, e);
@@ -24171,6 +24921,20 @@ class DynamicWidgetLoaderDirective {
         for (const [key, raw] of prioritized) {
             apply(key, raw);
         }
+        if (changed && typeof compRef.instance?.ngOnChanges === 'function') {
+            compRef.instance.ngOnChanges(changes);
+        }
+        return changed;
+    }
+    isSignalInput(instance, key) {
+        try {
+            const candidate = instance?.[key];
+            return typeof candidate === 'function'
+                && candidate.length === 0;
+        }
+        catch {
+            return false;
+        }
     }
     initialBindingSignature(id, inputs, bindingOrder, meta) {
         const resolvedEntries = this.orderedInputEntries(id, inputs, bindingOrder)
@@ -24179,7 +24943,7 @@ class DynamicWidgetLoaderDirective {
     }
     orderedInputEntries(id, inputs, bindingOrder) {
         const defaultOrderMap = {
-            'praxis-table': ['tableId', 'componentInstanceId', 'resourcePath', 'data', 'config'],
+            'praxis-table': ['tableId', 'componentInstanceId', 'configPersistenceStrategy', 'resourcePath', 'data', 'config'],
             'praxis-crud': ['crudId', 'componentInstanceId', 'metadata'],
             'praxis-dynamic-form': ['formId', 'componentInstanceId', 'resourcePath'],
             'praxis-tabs': ['tabsId', 'componentInstanceId', 'configPersistenceStrategy', 'config'],
@@ -24282,8 +25046,11 @@ class DynamicWidgetLoaderDirective {
         this.outputSubs.forEach((u) => u());
         this.outputSubs = [];
         let keys = Object.keys(outputs || {});
-        if (this.autoWireOutputs && keys.length === 0 && meta?.outputs?.length) {
-            keys = meta.outputs.map((o) => o.name);
+        if (this.autoWireOutputs && meta?.outputs?.length) {
+            keys = Array.from(new Set([
+                ...keys,
+                ...meta.outputs.map((o) => o.name),
+            ]));
         }
         if (!keys.includes('widgetEvent') && isSubscribableOutput(instance?.widgetEvent)) {
             keys = [...keys, 'widgetEvent'];
@@ -25243,22 +26010,69 @@ const BUILTIN_PAGE_THEME_PRESETS = {
         id: 'analytics-calm',
         label: 'Analytics Calm',
         description: 'Superfícies leves, ênfase clara em dados e motion sutil.',
+        shellPreset: 'light-neutral',
+        chartThemePreset: 'executive',
         density: 'comfortable',
         motion: 'subtle',
+        tokens: {
+            '--pdx-page-bg': 'var(--md-sys-color-surface)',
+            '--pdx-page-surface': 'var(--md-sys-color-surface-container-lowest)',
+            '--pdx-page-gap': '20px',
+            '--pdx-page-card-radius': '14px',
+            '--pdx-page-card-shadow': '0 10px 26px color-mix(in srgb, var(--md-sys-color-shadow, #000) 8%, transparent)',
+            '--pdx-page-accent': 'var(--md-sys-color-primary)',
+        },
     },
     'workspace-balanced': {
         id: 'workspace-balanced',
         label: 'Workspace Balanced',
         description: 'Equilíbrio entre densidade operacional e clareza visual.',
+        shellPreset: 'light-neutral',
+        chartThemePreset: 'default',
         density: 'comfortable',
         motion: 'subtle',
+        tokens: {
+            '--pdx-page-bg': 'color-mix(in srgb, var(--md-sys-color-surface) 88%, var(--md-sys-color-surface-container) 12%)',
+            '--pdx-page-surface': 'var(--md-sys-color-surface)',
+            '--pdx-page-gap': '18px',
+            '--pdx-page-card-radius': '12px',
+            '--pdx-page-card-shadow': '0 8px 22px color-mix(in srgb, var(--md-sys-color-shadow, #000) 7%, transparent)',
+            '--pdx-page-accent': 'var(--md-sys-color-primary)',
+        },
     },
     'ops-monitoring': {
         id: 'ops-monitoring',
         label: 'Ops Monitoring',
         description: 'Contraste um pouco maior para leitura rápida de status, filas e alertas.',
+        shellPreset: 'graphite',
+        chartThemePreset: 'compact',
+        density: 'compact',
+        motion: 'subtle',
+        tokens: {
+            '--pdx-page-bg': 'color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, var(--md-sys-color-primary-container) 30%)',
+            '--pdx-page-surface': 'var(--md-sys-color-surface)',
+            '--pdx-page-gap': '14px',
+            '--pdx-page-card-radius': '12px',
+            '--pdx-page-card-shadow': '0 12px 30px color-mix(in srgb, var(--md-sys-color-shadow, #000) 12%, transparent)',
+            '--pdx-page-accent': 'var(--md-sys-color-tertiary)',
+        },
+    },
+    'executive-command-center': {
+        id: 'executive-command-center',
+        label: 'Executive Command Center',
+        description: 'Superfície premium para dashboards corporativos com hierarquia executiva, dados densos e ações de decisão.',
+        shellPreset: 'graphite',
+        chartThemePreset: 'executive',
         density: 'compact',
         motion: 'subtle',
+        tokens: {
+            '--pdx-page-bg': 'color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 86%, var(--md-sys-color-primary-container) 14%)',
+            '--pdx-page-surface': 'color-mix(in srgb, var(--md-sys-color-surface) 96%, var(--md-sys-color-surface-container-high) 4%)',
+            '--pdx-page-gap': '12px',
+            '--pdx-page-card-radius': '10px',
+            '--pdx-page-card-shadow': '0 6px 18px color-mix(in srgb, var(--md-sys-color-shadow) 10%, transparent)',
+            '--pdx-page-accent': 'var(--md-sys-color-primary)',
+        },
     },
 };
 
@@ -29110,6 +29924,10 @@ class DynamicWidgetPageComponent {
     widgets = signal([], ...(ngDevMode ? [{ debugName: "widgets" }] : /* istanbul ignore next */ []));
     renderedGroups = signal([], ...(ngDevMode ? [{ debugName: "renderedGroups" }] : /* istanbul ignore next */ []));
     mergedContext = {};
+    pageThemePresetId = null;
+    pageThemeDensity = null;
+    pageThemeMotion = null;
+    pageThemeTokenStyle = {};
     pageGap = '16px';
     gridTemplateColumns = 'minmax(0, 1fr)';
     gridAutoRows = 'auto';
@@ -29130,13 +29948,14 @@ class DynamicWidgetPageComponent {
     pageColumnCount = 1;
     activeTabs = {};
     widgetDiagnostics = {};
-    selectedWidgetKey = null;
+    selectedWidgetKeyState = signal(null, ...(ngDevMode ? [{ debugName: "selectedWidgetKeyState" }] : /* istanbul ignore next */ []));
     blockedCanvasWidgetKey = null;
     canvasPreviewState = signal(null, ...(ngDevMode ? [{ debugName: "canvasPreviewState" }] : /* istanbul ignore next */ []));
     canvasPreviewInvalidState = signal(false, ...(ngDevMode ? [{ debugName: "canvasPreviewInvalidState" }] : /* istanbul ignore next */ []));
     transientCanvasItemsState = signal({}, ...(ngDevMode ? [{ debugName: "transientCanvasItemsState" }] : /* istanbul ignore next */ []));
     activeCanvasInteraction = null;
     appliedPersisted = false;
+    destroyed = false;
     isHydrating = false;
     persistenceReady = false;
     warnedMissingKey = false;
@@ -29151,6 +29970,7 @@ class DynamicWidgetPageComponent {
     componentMetadata = inject(ComponentMetadataRegistry, {
         optional: true,
     });
+    runtimeObservationRegistry = inject(PraxisRuntimeComponentObservationRegistryService, { optional: true });
     i18n = inject(PraxisI18nService);
     route = (() => {
         try {
@@ -29172,8 +29992,15 @@ class DynamicWidgetPageComponent {
     defaultPageEditor = inject(DYNAMIC_PAGE_CONFIG_EDITOR, {
         optional: true,
     });
-    constructor() { }
+    runtimeObservationRegistration = null;
+    widgetLoaders;
+    constructor() {
+        this.registerRuntimeComponentObservationProvider();
+    }
     ngOnDestroy() {
+        this.destroyed = true;
+        this.runtimeObservationRegistration?.destroy();
+        this.runtimeObservationRegistration = null;
         this.compositionRuntime.destroy();
     }
     ngOnChanges(changes) {
@@ -29278,15 +30105,19 @@ class DynamicWidgetPageComponent {
     }
     applyWidgetInputPatchToPage(page, widgetKey, evt) {
         const payload = evt?.payload;
-        const inputPatch = this.extractWidgetInputPatch(payload);
+        let inputPatch = this.extractWidgetInputPatch(payload);
         if (!inputPatch) {
-            return { page, changed: false };
+            inputPatch = null;
         }
         const widgets = this.cloneWidgets(page.widgets || []);
         const widgetIndex = widgets.findIndex((widget) => widget.key === widgetKey);
         if (widgetIndex < 0) {
             return { page, changed: false };
         }
+        inputPatch ??= this.extractImplicitInputPatchFromChangeOutput(evt, widgets[widgetIndex]);
+        if (!inputPatch) {
+            return { page, changed: false };
+        }
         const nestedPath = this.resolveWidgetInputPatchNestedPath(widgets[widgetIndex], evt);
         if (nestedPath?.length) {
             let owner = widgets[widgetIndex];
@@ -29364,7 +30195,8 @@ class DynamicWidgetPageComponent {
         if (!payload || typeof payload !== 'object' || Array.isArray(payload)) {
             return null;
         }
-        const candidate = payload.inputPatch;
+        const candidate = payload.inputPatch
+            ?? payload.payload?.inputPatch;
         if (!candidate ||
             typeof candidate !== 'object' ||
             Array.isArray(candidate)) {
@@ -29372,6 +30204,26 @@ class DynamicWidgetPageComponent {
         }
         return candidate;
     }
+    extractImplicitInputPatchFromChangeOutput(evt, widget) {
+        const output = typeof evt?.output === 'string' ? evt.output.trim() : '';
+        if (!output.endsWith('Change') || output.length <= 'Change'.length) {
+            return null;
+        }
+        const inputName = output.slice(0, -'Change'.length);
+        if (!inputName) {
+            return null;
+        }
+        const declaredInputs = widget.definition?.inputs || {};
+        const hasWidgetInput = Object.prototype.hasOwnProperty.call(declaredInputs, inputName);
+        const hasMetadataInput = !!this.componentMetadata
+            ?.get(widget.definition?.id || '')
+            ?.inputs
+            ?.some((input) => input.name === inputName);
+        if (!hasWidgetInput && !hasMetadataInput) {
+            return null;
+        }
+        return { [inputName]: this.cloneStateValues(evt.payload) };
+    }
     buildStateRuntime(state, pageContext) {
         return this.stateRuntime.buildRuntimeSnapshot(state, this.buildStateContext(pageContext));
     }
@@ -29397,6 +30249,158 @@ class DynamicWidgetPageComponent {
         }).widgets;
         return this.applyRecordRelatedSurfaceAiContext(projected);
     }
+    buildRuntimeComponentObservation() {
+        const pageId = this.resolveRuntimePageId();
+        const widgets = this.widgets();
+        const widgetKeys = widgets.map((widget) => widget.key).filter(Boolean);
+        const currentSelectedWidgetKey = this.selectedWidgetKeyState();
+        const selectedWidgetKey = widgetKeys.includes(currentSelectedWidgetKey || '')
+            ? currentSelectedWidgetKey
+            : null;
+        const warnings = [];
+        if (currentSelectedWidgetKey && !selectedWidgetKey) {
+            warnings.push('selectedWidgetKey omitted because it is not present in the active composition.');
+        }
+        const compositionLinks = this.compositionDefinition?.links || [];
+        const compositionSurfaceRefs = this.getRuntimeCompositionSurfaceRefs(widgets);
+        const activeSurfaceRefs = Array.from(new Set(compositionSurfaceRefs.map((surface) => surface.id).filter(Boolean)));
+        const activeActionRefs = activeSurfaceRefs.length
+            ? ['dynamicPage.surface.open']
+            : undefined;
+        const active = !!this.pageDefinition;
+        const capturedAt = new Date().toISOString();
+        return {
+            schemaVersion: 'praxis-runtime-component-observation.v1',
+            identity: {
+                instanceId: this.resolveRuntimeComponentInstanceId(pageId),
+                componentId: 'praxis-dynamic-page',
+                componentType: 'dynamic-page',
+                ownerPackage: '@praxisui/core',
+                routeKey: this.pageIdentity?.routePath,
+            },
+            refs: {
+                componentMetadataId: 'praxis-dynamic-page',
+                authoringManifestRef: {
+                    componentId: 'praxis-dynamic-page',
+                    source: 'DYNAMIC_PAGE_COMPONENT_CONTEXT_PACK',
+                },
+                pageId,
+            },
+            lifecycle: {
+                active,
+                visible: active && this.isRuntimeObservationVisible(),
+                focused: !!selectedWidgetKey,
+                capturedAt,
+                ttlMs: 30_000,
+            },
+            snapshot: {
+                stateDigest: {
+                    pageId,
+                    widgetCount: widgetKeys.length,
+                    activeWidgetKeys: widgetKeys.slice(0, 80),
+                    selectedWidgetKey,
+                    composition: {
+                        version: this.pageDefinition?.composition?.version
+                            || '1.0.0',
+                        linkCount: compositionLinks.length,
+                        linkIds: compositionLinks.map((link) => link.id).filter(Boolean).slice(0, 80),
+                    },
+                    relationSurfaceRefs: compositionSurfaceRefs.slice(0, 80),
+                },
+                dataProfileDigest: {
+                    source: active ? 'dynamic-page-composition' : 'empty',
+                    widgetCount: widgetKeys.length,
+                    selectedWidgetPresent: !!selectedWidgetKey,
+                    compositionLinkCount: compositionLinks.length,
+                    relationSurfaceCount: activeSurfaceRefs.length,
+                },
+            },
+            affordances: {
+                ...(activeSurfaceRefs.length ? { activeSurfaceRefs } : {}),
+                ...(activeActionRefs ? { activeActionRefs } : {}),
+            },
+            claims: this.buildRuntimeObservationClaims({
+                pageId,
+                widgetKeys,
+                activeSurfaceRefs,
+                activeActionRefs,
+            }),
+            diagnostics: {
+                redactionApplied: true,
+                omittedFields: [
+                    'widgetInputValues',
+                    'stateValues',
+                    'rawEvents',
+                    'renderedDom',
+                    'intentDecision',
+                ],
+                ...(warnings.length ? { warnings } : {}),
+            },
+        };
+    }
+    registerRuntimeComponentObservationProvider() {
+        if (!this.runtimeObservationRegistry || this.runtimeObservationRegistration) {
+            return;
+        }
+        this.runtimeObservationRegistration = this.runtimeObservationRegistry.register({
+            getObservation: () => this.buildRuntimeComponentObservation(),
+        });
+    }
+    resolveRuntimePageId() {
+        const identityKey = this.pageIdentity ? buildPageKey(this.pageIdentity) : '';
+        return this.componentInstanceId
+            || identityKey
+            || this.stringOrNull(this.pageDefinition?.context?.['pageId'])
+            || 'dynamic-page:default';
+    }
+    resolveRuntimeComponentInstanceId(pageId) {
+        return this.componentInstanceId
+            || (pageId ? `dynamic-page:${pageId}` : 'dynamic-page:default');
+    }
+    isRuntimeObservationVisible() {
+        const nativeElement = this.pageCanvasHost?.nativeElement;
+        return nativeElement ? nativeElement.isConnected !== false : true;
+    }
+    getRuntimeCompositionSurfaceRefs(widgets) {
+        const surfacesBySource = this.buildRecordRelatedSurfacesBySource(widgets);
+        const refs = [];
+        for (const surfaces of surfacesBySource.values()) {
+            for (const surface of surfaces) {
+                refs.push({
+                    id: surface.id,
+                    label: surface.label,
+                    sourceWidget: surface.source.widget,
+                    targetWidget: surface.target.widget,
+                    ...(surface.target.resourcePath ? { targetResourcePath: surface.target.resourcePath } : {}),
+                    ...(surface.runtimeSurfaceInstanceRef ? {
+                        runtimeSurfaceInstanceRef: surface.runtimeSurfaceInstanceRef,
+                        targetRuntimeSurfaceInstanceRef: surface.runtimeSurfaceInstanceRef,
+                    } : {}),
+                    statePath: surface.statePath,
+                    ...(surface.queryMapping ? { queryMapping: surface.queryMapping } : {}),
+                    operationId: surface.operationId,
+                });
+            }
+        }
+        return refs;
+    }
+    buildRuntimeObservationClaims(context) {
+        const claims = [
+            { kind: 'component', ref: 'praxis-dynamic-page', observed: true },
+            { kind: 'stateDigest', ref: `page:${context.pageId}`, observed: true },
+            { kind: 'dataDigest', ref: `page:${context.pageId}:composition`, observed: true },
+        ];
+        for (const widgetKey of context.widgetKeys.slice(0, 80)) {
+            claims.push({ kind: 'component', ref: `widget:${widgetKey}`, observed: true });
+        }
+        for (const surfaceRef of context.activeSurfaceRefs.slice(0, 80)) {
+            claims.push({ kind: 'surface', ref: surfaceRef, observed: true });
+        }
+        for (const actionRef of context.activeActionRefs || []) {
+            claims.push({ kind: 'action', ref: actionRef, observed: true });
+        }
+        return claims;
+    }
     applyRecordRelatedSurfaceAiContext(widgets) {
         const surfacesBySource = this.buildRecordRelatedSurfacesBySource(widgets);
         if (!surfacesBySource.size) {
@@ -29454,6 +30458,9 @@ class DynamicWidgetPageComponent {
             const statePath = sourceLink.to.kind === 'state' ? sourceLink.to.ref.path : '';
             if (!sourceRef || !statePath)
                 continue;
+            const sourceWidget = widgetByKey.get(sourceRef.widget);
+            if (!sourceWidget)
+                continue;
             const targets = stateToQueryLinks.filter((link) => link.from.kind === 'state'
                 && link.from.ref.path === statePath
                 && link.to.kind === 'component-port');
@@ -29466,6 +30473,8 @@ class DynamicWidgetPageComponent {
                     continue;
                 const targetRef = targetLink.to.ref;
                 const targetWidget = widgetByKey.get(targetRef.widget);
+                if (!targetWidget)
+                    continue;
                 const targetDefinition = targetRef.nestedPath?.length && targetWidget
                     ? this.nestedWidgetAccessor.resolveNestedWidget(targetWidget, targetRef.nestedPath)
                     : targetWidget?.definition;
@@ -29473,11 +30482,13 @@ class DynamicWidgetPageComponent {
                 if (!surfaceId)
                     continue;
                 const label = this.resolveRecordSurfaceLabel(targetRef, targetWidget, targetDefinition);
+                const targetRuntimeSurfaceWidgetKey = this.resolveRuntimeSurfaceWidgetKey(targetRef, targetDefinition);
                 const surface = {
                     id: surfaceId,
                     label,
                     relation: 'record.related-surface',
                     operationId: 'dynamicPage.surface.open',
+                    runtimeSurfaceInstanceRef: this.runtimeSurfaceInstanceRef(targetRuntimeSurfaceWidgetKey, targetRef.componentType, targetRuntimeSurfaceWidgetKey, this.stringOrNull(targetDefinition?.inputs?.['resourcePath'])),
                     statePath,
                     source: {
                         widget: sourceRef.widget,
@@ -29496,6 +30507,10 @@ class DynamicWidgetPageComponent {
                     },
                     description: this.stringOrNull(targetDefinition?.inputs?.['config']?.['toolbar']?.['title']),
                 };
+                const queryMapping = this.resolveRecordSurfaceQueryMapping(sourceWidget, targetLink);
+                if (queryMapping) {
+                    surface.queryMapping = queryMapping;
+                }
                 if (!existing.some((item) => item.id === surface.id)) {
                     existing.push(surface);
                 }
@@ -29506,6 +30521,39 @@ class DynamicWidgetPageComponent {
         }
         return surfacesBySource;
     }
+    resolveRecordSurfaceQueryMapping(sourceWidget, targetLink) {
+        const sourceField = this.stringOrNull(sourceWidget?.definition.inputs?.['config']?.['meta']?.['idField'])
+            || this.stringOrNull(sourceWidget?.definition.inputs?.['config']?.['idField'])
+            || this.stringOrNull(sourceWidget?.definition.inputs?.['idField']);
+        const targetFilterField = this.resolveQueryContextFilterField(targetLink);
+        if (!sourceField || !targetFilterField) {
+            return undefined;
+        }
+        return {
+            sourceField,
+            targetFilterField,
+            targetPath: `filters.${targetFilterField}`,
+            valueSource: 'selectionDigest.selectedIds[0]',
+        };
+    }
+    resolveQueryContextFilterField(link) {
+        for (const step of link.transform?.steps || []) {
+            if (step.kind !== 'object-template')
+                continue;
+            const template = step.config?.['template'];
+            if (!template || typeof template !== 'object' || Array.isArray(template))
+                continue;
+            const filters = template['filters'];
+            if (!filters || typeof filters !== 'object' || Array.isArray(filters))
+                continue;
+            for (const [field, value] of Object.entries(filters)) {
+                if (value === '${source}') {
+                    return field;
+                }
+            }
+        }
+        return null;
+    }
     isTableRowClickToStateLink(link) {
         return link.from.kind === 'component-port'
             && link.from.ref.componentType === 'praxis-table'
@@ -29536,6 +30584,11 @@ class DynamicWidgetPageComponent {
         const tab = [...(ref.nestedPath || [])].reverse().find((segment) => segment.kind === 'tab');
         return this.humanizeRecordSurfaceLabel(tab?.id || ref.widget);
     }
+    resolveRuntimeSurfaceWidgetKey(targetRef, targetDefinition) {
+        return this.stringOrNull(targetDefinition?.inputs?.['componentInstanceId'])
+            || this.stringOrNull(targetDefinition?.inputs?.['tableId'])
+            || targetRef.widget;
+    }
     resolveRecordSurfaceTabLabel(ref, targetWidget) {
         const tab = [...(ref.nestedPath || [])].reverse().find((segment) => segment.kind === 'tab');
         if (!tab)
@@ -29561,6 +30614,23 @@ class DynamicWidgetPageComponent {
             .replace(/([a-z])([A-Z])/g, '$1 $2')
             .replace(/\b\w/g, (match) => match.toUpperCase());
     }
+    runtimeSurfaceInstanceRef(widgetKey, componentId, surfaceRef, resourcePath) {
+        const widget = this.safeRuntimeSurfaceRefSegment(widgetKey);
+        const component = this.safeRuntimeSurfaceRefSegment(componentId || 'component');
+        const surface = this.safeRuntimeSurfaceRefSegment(surfaceRef);
+        const resource = this.safeRuntimeSurfaceRefSegment(resourcePath || 'resource');
+        if (!widget || !surface) {
+            return undefined;
+        }
+        return `runtime-surface:${widget}:${component}:${surface}:${resource}`;
+    }
+    safeRuntimeSurfaceRefSegment(value) {
+        return String(value || '')
+            .trim()
+            .replace(/[^A-Za-z0-9._/-]+/g, '-')
+            .replace(/^-+|-+$/g, '')
+            .slice(0, 120);
+    }
     resolveRecordSurfaceChildWidgetKey(path) {
         const widget = [...(path || [])].reverse().find((segment) => segment.kind === 'widget');
         return widget?.key;
@@ -29774,6 +30844,42 @@ class DynamicWidgetPageComponent {
             payload,
         });
     }
+    dispatchRuntimeCompositionEvent(event) {
+        const page = this.ensurePageDefinition();
+        if (!this.compositionDefinition || !event?.source) {
+            return;
+        }
+        let payload;
+        try {
+            payload = this.cloneStateValues(event.payload);
+        }
+        catch (error) {
+            const message = 'DynamicWidgetPageComponent could not serialize global action payload for composition dispatch. ' +
+                'Composition links only support JSON-safe payloads.';
+            const wrapped = new Error(message);
+            wrapped.cause = error;
+            throw wrapped;
+        }
+        const cycle = this.compositionRuntime.dispatch({
+            eventId: this.buildRuntimeEventId('global-action', event.source.kind),
+            source: event.source,
+            payload,
+            occurredAt: event.occurredAt,
+        });
+        if (!cycle.matchedLinkIds.length) {
+            return;
+        }
+        const state = this.stateFromCompositionSnapshot(page.state, cycle.snapshot.state.primaryValues);
+        let widgets = this.cloneWidgets(page.widgets || []);
+        widgets = this.applyCompositionWidgetDeliveries(widgets, cycle).widgets;
+        widgets = this.compositionRuntime.projectStateWidgetInputs(this.compositionDefinition, {
+            widgets,
+            state: cycle.snapshot.state,
+            now: cycle.snapshot.generatedAt,
+        }).widgets;
+        const runtime = this.buildStateRuntime(state, page.context);
+        this.applyPageUpdate({ ...page, widgets, state }, true, runtime, false, true);
+    }
     matchesRuntimeSourceRef(endpoint, sourceRef) {
         return endpoint.kind === 'component-port'
             && endpoint.ref.widget === sourceRef.widget
@@ -29943,19 +31049,19 @@ class DynamicWidgetPageComponent {
                 ...widget.definition,
                 inputs: {
                     ...(widget.definition.inputs || {}),
-                    hostCapabilities: this.buildRichContentHostCapabilities(widget.key, runtime),
+                    hostCapabilities: this.buildRichContentHostCapabilities(widget.key, runtime, widget.definition.inputs?.['context']),
                 },
             },
         };
     }
-    buildRichContentHostCapabilities(widgetKey, runtime) {
+    buildRichContentHostCapabilities(widgetKey, runtime, widgetContext) {
         return {
-            dispatchAction: (actionId, payload) => this.dispatchRichContentAction(widgetKey, actionId, payload),
+            dispatchAction: (actionId, payload) => this.dispatchRichContentAction(widgetKey, actionId, payload, widgetContext),
             isActionAvailable: (actionId) => this.isRichContentActionAvailable(widgetKey, actionId),
             hasCapability: (capabilityId) => this.hasRichContentCapability(widgetKey, capabilityId, runtime),
         };
     }
-    dispatchRichContentAction(widgetKey, actionId, payload) {
+    dispatchRichContentAction(widgetKey, actionId, payload, widgetContext) {
         if (!actionId) {
             return;
         }
@@ -29969,6 +31075,14 @@ class DynamicWidgetPageComponent {
                     payload,
                     pageContext: this.mergedContext,
                     pageState: this.cloneStateValues(this.pageRuntime?.effectiveValues || {}),
+                    richContentContext: widgetContext,
+                },
+                runtime: {
+                    widgetContext,
+                    pageState: this.cloneStateValues(this.pageRuntime?.effectiveValues || {}),
+                    composition: {
+                        dispatch: (event) => this.dispatchRuntimeCompositionEvent(event),
+                    },
                 },
                 meta: {
                     origin: 'dynamic-page.rich-content',
@@ -30022,7 +31136,7 @@ class DynamicWidgetPageComponent {
             case 'page.autoPersist.disabled':
                 return !this.autoPersist;
             case 'page.widget.selected':
-                return this.selectedWidgetKey === widgetKey;
+                return this.selectedWidgetKeyState() === widgetKey;
             case 'page.widget.configurable': {
                 const widget = this.widgets().find((candidate) => candidate.key === widgetKey);
                 const widgetType = widget?.definition?.id || '';
@@ -30419,9 +31533,12 @@ class DynamicWidgetPageComponent {
         ref.saved$.subscribe((result) => this.applyWidgetShell(key, result, true));
     }
     openWidgetComponentSettings(key) {
+        if (this.dispatchWidgetComponentSettingsToRuntime(key)) {
+            return;
+        }
         if (!this.settingsPanel)
             return;
-        const page = this.ensurePageDefinition();
+        const page = this.materializeRuntimeInputsForWidget(this.ensurePageDefinition(), key);
         const widget = page.widgets.find((w) => w.key === key);
         if (!widget)
             return;
@@ -30446,6 +31563,54 @@ class DynamicWidgetPageComponent {
         ref.applied$.subscribe((result) => this.applyWidgetComponentInputs(key, result, false));
         ref.saved$.subscribe((result) => this.applyWidgetComponentInputs(key, result, true));
     }
+    materializeRuntimeInputsForWidget(page, key) {
+        const normalizedKey = String(key || '').trim();
+        if (!normalizedKey) {
+            return page;
+        }
+        const widget = page.widgets?.find((candidate) => candidate.key === normalizedKey);
+        if (!widget) {
+            return page;
+        }
+        const inputNames = this.componentMetadata
+            ?.get(widget.definition?.id || '')
+            ?.inputs
+            ?.map((input) => input.name)
+            ?.filter((name) => typeof name === 'string' && !!name.trim()) || [];
+        if (!inputNames.length) {
+            return page;
+        }
+        const loader = this.findWidgetLoader(normalizedKey);
+        const materializedInputs = loader?.materializedInputSnapshot(inputNames) || {};
+        if (!Object.keys(materializedInputs).length) {
+            return page;
+        }
+        const result = this.applyWidgetInputPatchToPage(page, normalizedKey, {
+            sourceComponentId: widget.definition?.id,
+            output: 'runtimeInputSnapshot',
+            payload: {
+                inputPatch: materializedInputs,
+            },
+        });
+        if (!result.changed) {
+            return page;
+        }
+        this.applyPageUpdate(result.page, true, undefined, true, true);
+        return result.page;
+    }
+    findWidgetLoader(key) {
+        return this.widgetLoaders?.find((loader) => loader.ownerWidgetKey === key);
+    }
+    dispatchWidgetComponentSettingsToRuntime(key) {
+        const loader = this.findWidgetLoader(String(key || '').trim());
+        if (typeof loader?.dispatchAction !== 'function') {
+            return false;
+        }
+        return loader?.dispatchAction({
+            id: 'component-settings',
+            command: 'component-settings',
+        }) === true;
+    }
     applyWidgetComponentInputs(key, result, persist) {
         if (!result || typeof result !== 'object' || Array.isArray(result))
             return;
@@ -30485,16 +31650,17 @@ class DynamicWidgetPageComponent {
             return;
         }
         this.applyPageUpdate(this.removeWidgetReferences(page, widgetKey), true);
-        if (this.selectedWidgetKey === widgetKey) {
-            this.selectedWidgetKey = null;
+        if (this.selectedWidgetKeyState() === widgetKey) {
+            this.selectedWidgetKeyState.set(null);
             this.widgetSelectionChange.emit(null);
         }
     }
     removeSelectedWidget() {
-        if (!this.selectedWidgetKey) {
+        const selectedWidgetKey = this.selectedWidgetKeyState();
+        if (!selectedWidgetKey) {
             return;
         }
-        void this.confirmAndRemoveWidget(this.selectedWidgetKey);
+        void this.confirmAndRemoveWidget(selectedWidgetKey);
     }
     removeSelectedCanvasWidget() {
         this.removeSelectedWidget();
@@ -30725,7 +31891,7 @@ class DynamicWidgetPageComponent {
         const layoutPreset = pageDefinition
             ? this.resolveLayoutPresetDefinition(pageDefinition)
             : undefined;
-        return {
+        const merged = {
             ...baseContext,
             ...(inputContext || {}),
             pageDeviceKind: this.resolveDeviceKind(),
@@ -30739,6 +31905,53 @@ class DynamicWidgetPageComponent {
             pageStateDerived: this.cloneStateValues(runtime.derivedValues),
             pageStateEffective: this.cloneStateValues(runtime.effectiveValues),
         };
+        this.syncThemePresentation(themePreset);
+        return this.projectThemeDefaultsIntoContext(merged, themePreset);
+    }
+    syncThemePresentation(themePreset) {
+        this.pageThemePresetId = themePreset?.id || null;
+        this.pageThemeDensity = themePreset?.density || null;
+        this.pageThemeMotion = themePreset?.motion || null;
+        this.pageThemeTokenStyle = this.normalizeThemeTokens(themePreset?.tokens);
+    }
+    normalizeThemeTokens(tokens) {
+        if (!tokens)
+            return {};
+        const out = {};
+        for (const [key, value] of Object.entries(tokens)) {
+            if (!key.startsWith('--'))
+                continue;
+            if (typeof value !== 'string')
+                continue;
+            out[key] = value;
+        }
+        return out;
+    }
+    toPlainObject(value) {
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? { ...value }
+            : {};
+    }
+    projectThemeDefaultsIntoContext(context, themePreset) {
+        const shellPreset = themePreset?.shellPreset?.trim();
+        if (!shellPreset)
+            return context;
+        const ui = this.toPlainObject(context['ui']);
+        const shell = this.toPlainObject(ui['shell']);
+        if (typeof shell['preset'] === 'string' && shell['preset'].trim()) {
+            return context;
+        }
+        return {
+            ...context,
+            ui: {
+                ...ui,
+                shell: {
+                    ...shell,
+                    preset: shellPreset,
+                    presetSource: 'theme',
+                },
+            },
+        };
     }
     onWindowResize() {
         if (!this.pageDefinition)
@@ -31011,8 +32224,8 @@ class DynamicWidgetPageComponent {
     selectWidget(widgetKey) {
         if (!this.enableCustomization)
             return;
-        if (this.selectedWidgetKey !== widgetKey) {
-            this.selectedWidgetKey = widgetKey;
+        if (this.selectedWidgetKeyState() !== widgetKey) {
+            this.selectedWidgetKeyState.set(widgetKey);
             this.widgetSelectionChange.emit(widgetKey);
         }
         if (this.blockedCanvasWidgetKey &&
@@ -31024,13 +32237,21 @@ class DynamicWidgetPageComponent {
         if (this.shouldPreserveInnerWidgetInteraction(event)) {
             return;
         }
+        if (event.type === 'focusin') {
+            setTimeout(() => {
+                if (!this.destroyed) {
+                    this.selectWidget(widgetKey);
+                }
+            }, 0);
+            return;
+        }
         this.selectWidget(widgetKey);
     }
     isCanvasWidgetSelected(widgetKey) {
         return this.isWidgetSelected(widgetKey);
     }
     isWidgetSelected(widgetKey) {
-        return this.selectedWidgetKey === widgetKey;
+        return this.selectedWidgetKeyState() === widgetKey;
     }
     shouldPreserveInnerWidgetInteraction(event) {
         if (!this.enableCustomization)
@@ -31974,8 +33195,15 @@ 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 }], usesOnChanges: true, ngImport: i0, template: `
-    <div class="pdx-page-wrapper" [class.editing]="enableCustomization">
+    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: `
+    <div
+      class="pdx-page-wrapper"
+      [class.editing]="enableCustomization"
+      [attr.data-theme-preset]="pageThemePresetId"
+      [attr.data-density]="pageThemeDensity"
+      [attr.data-motion]="pageThemeMotion"
+      [ngStyle]="pageThemeTokenStyle"
+      >
       @if (enableCustomization && showPageSettingsButton) {
         <button
           class="pdx-page-settings"
@@ -32001,6 +33229,7 @@ class DynamicWidgetPageComponent {
           @for (w of widgets(); track w.key) {
             <div
               class="pdx-widget pdx-widget--canvas"
+              [attr.data-widget-key]="w.key"
               [class.pdx-widget--interactive]="enableCustomization"
               [class.pdx-widget--selected]="
                 enableCustomization && isWidgetSelected(w.key)
@@ -32049,6 +33278,7 @@ class DynamicWidgetPageComponent {
               >
                 <ng-container
                   [dynamicWidgetLoader]="w.definition"
+                  #widgetLoader="dynamicWidgetLoader"
                   [ownerWidgetKey]="w.key"
                   [context]="mergedContext"
                   [strictValidation]="strictValidation"
@@ -32137,6 +33367,7 @@ class DynamicWidgetPageComponent {
                         @for (w of tab.widgets; track w.key) {
                           <div
                             class="pdx-widget"
+                            [attr.data-widget-key]="w.key"
                             [class.pdx-widget--interactive]="enableCustomization"
                             [class.pdx-widget--selected]="
                               enableCustomization && isWidgetSelected(w.key)
@@ -32153,6 +33384,7 @@ class DynamicWidgetPageComponent {
                             >
                               <ng-container
                                 [dynamicWidgetLoader]="w.definition"
+                                #widgetLoader="dynamicWidgetLoader"
                                 [ownerWidgetKey]="w.key"
                                 [context]="mergedContext"
                                 [strictValidation]="strictValidation"
@@ -32201,6 +33433,7 @@ class DynamicWidgetPageComponent {
                   @for (w of group.widgets; track w.key) {
                     <div
                       class="pdx-widget"
+                      [attr.data-widget-key]="w.key"
                       [class.pdx-widget--interactive]="enableCustomization"
                       [class.pdx-widget--selected]="
                         enableCustomization && isWidgetSelected(w.key)
@@ -32217,6 +33450,7 @@ class DynamicWidgetPageComponent {
                       >
                         <ng-container
                           [dynamicWidgetLoader]="w.definition"
+                          #widgetLoader="dynamicWidgetLoader"
                           [ownerWidgetKey]="w.key"
                           [context]="mergedContext"
                           [strictValidation]="strictValidation"
@@ -32257,6 +33491,7 @@ class DynamicWidgetPageComponent {
           @for (w of widgets(); track w.key) {
             <div
               class="pdx-widget"
+              [attr.data-widget-key]="w.key"
               [class.pdx-widget--interactive]="enableCustomization"
               [class.pdx-widget--selected]="
                 enableCustomization && isWidgetSelected(w.key)
@@ -32273,6 +33508,7 @@ class DynamicWidgetPageComponent {
               >
                 <ng-container
                   [dynamicWidgetLoader]="w.definition"
+                  #widgetLoader="dynamicWidgetLoader"
                   [ownerWidgetKey]="w.key"
                   [context]="mergedContext"
                   [strictValidation]="strictValidation"
@@ -32313,7 +33549,7 @@ class DynamicWidgetPageComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".pdx-page-wrapper{position:relative;display:block}.pdx-page{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}.pdx-page--canvas{align-items:start;grid-auto-flow:dense}.pdx-page-settings{position:sticky;top:8px;z-index:2;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:inherit;border-radius:12px;width:36px;height:36px;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:40px;height:18px;margin-left:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north{top:-8px;cursor:ns-resize}.pdx-canvas-resize--south{bottom:-8px;cursor:ns-resize}.pdx-canvas-resize--east,.pdx-canvas-resize--west{top:50%;width:18px;height:40px;margin-top:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--east{right:-8px;cursor:ew-resize}.pdx-canvas-resize--west{left:-8px;cursor:ew-resize}.pdx-canvas-resize--north-east,.pdx-canvas-resize--north-west,.pdx-canvas-resize--south-east,.pdx-canvas-resize--south-west{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north-east{top:-8px;right:-8px;cursor:nesw-resize}.pdx-canvas-resize--north-west{top:-8px;left:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-east{bottom:-8px;right:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-west{bottom:-8px;left:-8px;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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: [".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)}.pdx-page-settings{position:sticky;top:8px;z-index:2;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:inherit;border-radius:12px;width:36px;height:36px;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:40px;height:18px;margin-left:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north{top:-8px;cursor:ns-resize}.pdx-canvas-resize--south{bottom:-8px;cursor:ns-resize}.pdx-canvas-resize--east,.pdx-canvas-resize--west{top:50%;width:18px;height:40px;margin-top:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--east{right:-8px;cursor:ew-resize}.pdx-canvas-resize--west{left:-8px;cursor:ew-resize}.pdx-canvas-resize--north-east,.pdx-canvas-resize--north-west,.pdx-canvas-resize--south-east,.pdx-canvas-resize--south-west{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north-east{top:-8px;right:-8px;cursor:nesw-resize}.pdx-canvas-resize--north-west{top:-8px;left:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-east{bottom:-8px;right:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-west{bottom:-8px;left:-8px;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$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicWidgetPageComponent, decorators: [{
             type: Component,
@@ -32326,7 +33562,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         DynamicWidgetLoaderDirective,
                         WidgetShellComponent,
                     ], providers: [providePraxisI18nConfig(DYNAMIC_WIDGET_PAGE_I18N_CONFIG)], template: `
-    <div class="pdx-page-wrapper" [class.editing]="enableCustomization">
+    <div
+      class="pdx-page-wrapper"
+      [class.editing]="enableCustomization"
+      [attr.data-theme-preset]="pageThemePresetId"
+      [attr.data-density]="pageThemeDensity"
+      [attr.data-motion]="pageThemeMotion"
+      [ngStyle]="pageThemeTokenStyle"
+      >
       @if (enableCustomization && showPageSettingsButton) {
         <button
           class="pdx-page-settings"
@@ -32352,6 +33595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           @for (w of widgets(); track w.key) {
             <div
               class="pdx-widget pdx-widget--canvas"
+              [attr.data-widget-key]="w.key"
               [class.pdx-widget--interactive]="enableCustomization"
               [class.pdx-widget--selected]="
                 enableCustomization && isWidgetSelected(w.key)
@@ -32400,6 +33644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               >
                 <ng-container
                   [dynamicWidgetLoader]="w.definition"
+                  #widgetLoader="dynamicWidgetLoader"
                   [ownerWidgetKey]="w.key"
                   [context]="mergedContext"
                   [strictValidation]="strictValidation"
@@ -32488,6 +33733,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         @for (w of tab.widgets; track w.key) {
                           <div
                             class="pdx-widget"
+                            [attr.data-widget-key]="w.key"
                             [class.pdx-widget--interactive]="enableCustomization"
                             [class.pdx-widget--selected]="
                               enableCustomization && isWidgetSelected(w.key)
@@ -32504,6 +33750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                             >
                               <ng-container
                                 [dynamicWidgetLoader]="w.definition"
+                                #widgetLoader="dynamicWidgetLoader"
                                 [ownerWidgetKey]="w.key"
                                 [context]="mergedContext"
                                 [strictValidation]="strictValidation"
@@ -32552,6 +33799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   @for (w of group.widgets; track w.key) {
                     <div
                       class="pdx-widget"
+                      [attr.data-widget-key]="w.key"
                       [class.pdx-widget--interactive]="enableCustomization"
                       [class.pdx-widget--selected]="
                         enableCustomization && isWidgetSelected(w.key)
@@ -32568,6 +33816,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       >
                         <ng-container
                           [dynamicWidgetLoader]="w.definition"
+                          #widgetLoader="dynamicWidgetLoader"
                           [ownerWidgetKey]="w.key"
                           [context]="mergedContext"
                           [strictValidation]="strictValidation"
@@ -32608,6 +33857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
           @for (w of widgets(); track w.key) {
             <div
               class="pdx-widget"
+              [attr.data-widget-key]="w.key"
               [class.pdx-widget--interactive]="enableCustomization"
               [class.pdx-widget--selected]="
                 enableCustomization && isWidgetSelected(w.key)
@@ -32624,6 +33874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
               >
                 <ng-container
                   [dynamicWidgetLoader]="w.definition"
+                  #widgetLoader="dynamicWidgetLoader"
                   [ownerWidgetKey]="w.key"
                   [context]="mergedContext"
                   [strictValidation]="strictValidation"
@@ -32664,7 +33915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </div>
       }
     </div>
-  `, styles: [".pdx-page-wrapper{position:relative;display:block}.pdx-page{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}.pdx-page--canvas{align-items:start;grid-auto-flow:dense}.pdx-page-settings{position:sticky;top:8px;z-index:2;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:inherit;border-radius:12px;width:36px;height:36px;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:40px;height:18px;margin-left:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north{top:-8px;cursor:ns-resize}.pdx-canvas-resize--south{bottom:-8px;cursor:ns-resize}.pdx-canvas-resize--east,.pdx-canvas-resize--west{top:50%;width:18px;height:40px;margin-top:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--east{right:-8px;cursor:ew-resize}.pdx-canvas-resize--west{left:-8px;cursor:ew-resize}.pdx-canvas-resize--north-east,.pdx-canvas-resize--north-west,.pdx-canvas-resize--south-east,.pdx-canvas-resize--south-west{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north-east{top:-8px;right:-8px;cursor:nesw-resize}.pdx-canvas-resize--north-west{top:-8px;left:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-east{bottom:-8px;right:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-west{bottom:-8px;left:-8px;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: [".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)}.pdx-page-settings{position:sticky;top:8px;z-index:2;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-low);color:inherit;border-radius:12px;width:36px;height:36px;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:40px;height:18px;margin-left:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north{top:-8px;cursor:ns-resize}.pdx-canvas-resize--south{bottom:-8px;cursor:ns-resize}.pdx-canvas-resize--east,.pdx-canvas-resize--west{top:50%;width:18px;height:40px;margin-top:-20px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--east{right:-8px;cursor:ew-resize}.pdx-canvas-resize--west{left:-8px;cursor:ew-resize}.pdx-canvas-resize--north-east,.pdx-canvas-resize--north-west,.pdx-canvas-resize--south-east,.pdx-canvas-resize--south-west{width:18px;height:18px;display:flex;align-items:center;justify-content:center}.pdx-canvas-resize--north-east{top:-8px;right:-8px;cursor:nesw-resize}.pdx-canvas-resize--north-west{top:-8px;left:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-east{bottom:-8px;right:-8px;cursor:nwse-resize}.pdx-canvas-resize--south-west{bottom:-8px;left:-8px;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"] }]
         }], ctorParameters: () => [], propDecorators: { pageCanvasHost: [{
                 type: ViewChild,
                 args: ['pageCanvasHost']
@@ -32700,6 +33951,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 type: Output
             }], widgetDiagnosticsChange: [{
                 type: Output
+            }], widgetLoaders: [{
+                type: ViewChildren,
+                args: ['widgetLoader']
             }], onWindowResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -32757,10 +34011,13 @@ function providePraxisDynamicPageMetadata() {
 }
 
 class PraxisSurfaceHostComponent {
+    globalActions = inject(GlobalActionService);
     title;
     subtitle;
     icon;
+    beforeWidget;
     widget;
+    afterWidget;
     context = null;
     strictValidation = true;
     /**
@@ -32768,13 +34025,21 @@ class PraxisSurfaceHostComponent {
      * modal/drawer hosts. Inline consumers may opt into rendering it again.
      */
     renderTitleInsideBody = false;
-    widgetLoader;
+    widgetEvent = new EventEmitter();
+    beforeWidgetLoader;
+    mainWidgetLoader;
+    afterWidgetLoader;
     renderQueued = false;
+    beforeWidgetKey = 'surface.before';
+    mainWidgetKey = 'surface.main';
+    afterWidgetKey = 'surface.after';
     ngAfterViewInit() {
         this.scheduleWidgetRender();
     }
     ngOnChanges(changes) {
         if (changes['widget']
+            || changes['beforeWidget']
+            || changes['afterWidget']
             || changes['context']
             || changes['strictValidation']) {
             this.scheduleWidgetRender();
@@ -32786,17 +34051,101 @@ class PraxisSurfaceHostComponent {
         this.renderQueued = true;
         queueMicrotask(() => {
             this.renderQueued = false;
-            const loader = this.widgetLoader;
-            if (!loader)
-                return;
-            loader.widget = this.widget;
-            loader.context = this.context;
-            loader.strictValidation = this.strictValidation;
-            loader.renderNow();
+            this.renderLoader(this.beforeWidgetLoader, this.beforeWidget, this.beforeWidgetKey);
+            this.renderLoader(this.mainWidgetLoader, this.widget, this.mainWidgetKey);
+            this.renderLoader(this.afterWidgetLoader, this.afterWidget, this.afterWidgetKey);
+        });
+    }
+    renderLoader(loader, widget, widgetKey) {
+        if (!loader)
+            return;
+        loader.widget = this.enrichWidget(widget, widgetKey);
+        loader.ownerWidgetKey = widgetKey;
+        loader.context = this.context;
+        loader.strictValidation = this.strictValidation;
+        loader.renderNow();
+    }
+    enrichWidget(widget, widgetKey) {
+        if (!widget || widget.id !== 'praxis-rich-content') {
+            return widget;
+        }
+        return {
+            ...widget,
+            inputs: {
+                ...(widget.inputs || {}),
+                hostCapabilities: this.buildRichContentHostCapabilities(widgetKey, widget.inputs?.['context']),
+            },
+        };
+    }
+    buildRichContentHostCapabilities(widgetKey, widgetContext) {
+        return {
+            dispatchAction: (actionId, payload) => this.dispatchRichContentAction(widgetKey, actionId, payload, widgetContext),
+            isActionAvailable: (actionId) => this.isRichContentActionAvailable(actionId),
+            hasCapability: (capabilityId) => this.hasRichContentCapability(capabilityId),
+        };
+    }
+    dispatchRichContentAction(widgetKey, actionId, payload, widgetContext) {
+        if (!actionId) {
+            return;
+        }
+        if (this.globalActions.has(actionId)) {
+            void this.globalActions.execute(actionId, payload, {
+                sourceId: widgetKey,
+                widgetKey,
+                payload: {
+                    widgetKey,
+                    actionId,
+                    payload,
+                    surfaceContext: this.context,
+                    richContentContext: widgetContext,
+                },
+                runtime: {
+                    widgetContext,
+                    state: this.context,
+                },
+                meta: {
+                    origin: 'surface.rich-content',
+                    componentId: 'praxis-surface-host',
+                },
+            });
+            return;
+        }
+        this.widgetEvent.emit({
+            ownerWidgetKey: widgetKey,
+            sourceComponentId: 'praxis-rich-content',
+            output: 'customAction',
+            payload: {
+                actionId,
+                payload,
+                globalAction: {
+                    actionId,
+                    payload,
+                },
+            },
+        });
+    }
+    isRichContentActionAvailable(actionId) {
+        return !!actionId;
+    }
+    hasRichContentCapability(capabilityId) {
+        switch (capabilityId) {
+            case 'surface.host':
+            case 'surface.rich-content.actions':
+                return true;
+            case 'surface.context':
+                return !!this.context;
+            default:
+                return false;
+        }
+    }
+    onSlotWidgetEvent(ownerWidgetKey, event) {
+        this.widgetEvent.emit({
+            ...event,
+            ownerWidgetKey: event.ownerWidgetKey || ownerWidgetKey,
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisSurfaceHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisSurfaceHostComponent, isStandalone: true, selector: "praxis-surface-host", inputs: { title: "title", subtitle: "subtitle", icon: "icon", widget: "widget", context: "context", strictValidation: "strictValidation", renderTitleInsideBody: "renderTitleInsideBody" }, viewQueries: [{ propertyName: "widgetLoader", first: true, predicate: DynamicWidgetLoaderDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisSurfaceHostComponent, isStandalone: true, selector: "praxis-surface-host", inputs: { title: "title", subtitle: "subtitle", icon: "icon", beforeWidget: "beforeWidget", widget: "widget", afterWidget: "afterWidget", context: "context", strictValidation: "strictValidation", renderTitleInsideBody: "renderTitleInsideBody" }, outputs: { widgetEvent: "widgetEvent" }, viewQueries: [{ propertyName: "beforeWidgetLoader", first: true, predicate: ["beforeWidgetLoader"], descendants: true, read: DynamicWidgetLoaderDirective }, { propertyName: "mainWidgetLoader", first: true, predicate: ["mainWidgetLoader"], descendants: true, read: DynamicWidgetLoaderDirective }, { propertyName: "afterWidgetLoader", first: true, predicate: ["afterWidgetLoader"], descendants: true, read: DynamicWidgetLoaderDirective }], usesOnChanges: true, ngImport: i0, template: `
     <div class="pdx-surface-host">
       @if (subtitle || (title && renderTitleInsideBody)) {
         <header class="pdx-surface-host__header">
@@ -32815,16 +34164,45 @@ class PraxisSurfaceHostComponent {
       }
 
       <section class="pdx-surface-host__body">
+        @if (beforeWidget) {
+          <div class="pdx-surface-host__slot pdx-surface-host__slot--before">
+            <ng-container
+              #beforeWidgetLoader
+              [dynamicWidgetLoader]="beforeWidget"
+              [ownerWidgetKey]="beforeWidgetKey"
+              [context]="context"
+              [strictValidation]="strictValidation"
+              (widgetEvent)="onSlotWidgetEvent(beforeWidgetKey, $event)"
+            ></ng-container>
+          </div>
+        }
+
         @if (widget) {
           <ng-container
+            #mainWidgetLoader
             [dynamicWidgetLoader]="widget"
+            [ownerWidgetKey]="mainWidgetKey"
             [context]="context"
             [strictValidation]="strictValidation"
+            (widgetEvent)="onSlotWidgetEvent(mainWidgetKey, $event)"
           ></ng-container>
         }
+
+        @if (afterWidget) {
+          <div class="pdx-surface-host__slot pdx-surface-host__slot--after">
+            <ng-container
+              #afterWidgetLoader
+              [dynamicWidgetLoader]="afterWidget"
+              [ownerWidgetKey]="afterWidgetKey"
+              [context]="context"
+              [strictValidation]="strictValidation"
+              (widgetEvent)="onSlotWidgetEvent(afterWidgetKey, $event)"
+            ></ng-container>
+          </div>
+        }
       </section>
     </div>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.pdx-surface-host{display:grid;gap:16px;min-width:0}.pdx-surface-host__header{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.pdx-surface-host__icon{font-size:20px;line-height:20px;color:var(--md-sys-color-primary, currentColor)}.pdx-surface-host__copy{display:grid;gap:4px;min-width:0}.pdx-surface-host__title,.pdx-surface-host__subtitle{margin:0}.pdx-surface-host__title{font-size:1rem;font-weight:600}.pdx-surface-host__subtitle{color:var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, .64));font-size:.9375rem}.pdx-surface-host__body{min-width:0}\n"], dependencies: [{ kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }] });
+  `, isInline: true, styles: [":host{display:block;min-width:0}.pdx-surface-host{display:grid;gap:16px;min-width:0}.pdx-surface-host__header{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.pdx-surface-host__icon{font-size:20px;line-height:20px;color:var(--md-sys-color-primary, currentColor)}.pdx-surface-host__copy{display:grid;gap:4px;min-width:0}.pdx-surface-host__title,.pdx-surface-host__subtitle{margin:0}.pdx-surface-host__title{font-size:1rem;font-weight:600}.pdx-surface-host__subtitle{color:var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, .64));font-size:.9375rem}.pdx-surface-host__body{display:grid;gap:16px;min-width:0}.pdx-surface-host__slot{min-width:0}\n"], dependencies: [{ kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisSurfaceHostComponent, decorators: [{
             type: Component,
@@ -32847,33 +34225,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       }
 
       <section class="pdx-surface-host__body">
+        @if (beforeWidget) {
+          <div class="pdx-surface-host__slot pdx-surface-host__slot--before">
+            <ng-container
+              #beforeWidgetLoader
+              [dynamicWidgetLoader]="beforeWidget"
+              [ownerWidgetKey]="beforeWidgetKey"
+              [context]="context"
+              [strictValidation]="strictValidation"
+              (widgetEvent)="onSlotWidgetEvent(beforeWidgetKey, $event)"
+            ></ng-container>
+          </div>
+        }
+
         @if (widget) {
           <ng-container
+            #mainWidgetLoader
             [dynamicWidgetLoader]="widget"
+            [ownerWidgetKey]="mainWidgetKey"
             [context]="context"
             [strictValidation]="strictValidation"
+            (widgetEvent)="onSlotWidgetEvent(mainWidgetKey, $event)"
           ></ng-container>
         }
+
+        @if (afterWidget) {
+          <div class="pdx-surface-host__slot pdx-surface-host__slot--after">
+            <ng-container
+              #afterWidgetLoader
+              [dynamicWidgetLoader]="afterWidget"
+              [ownerWidgetKey]="afterWidgetKey"
+              [context]="context"
+              [strictValidation]="strictValidation"
+              (widgetEvent)="onSlotWidgetEvent(afterWidgetKey, $event)"
+            ></ng-container>
+          </div>
+        }
       </section>
     </div>
-  `, styles: [":host{display:block;min-width:0}.pdx-surface-host{display:grid;gap:16px;min-width:0}.pdx-surface-host__header{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.pdx-surface-host__icon{font-size:20px;line-height:20px;color:var(--md-sys-color-primary, currentColor)}.pdx-surface-host__copy{display:grid;gap:4px;min-width:0}.pdx-surface-host__title,.pdx-surface-host__subtitle{margin:0}.pdx-surface-host__title{font-size:1rem;font-weight:600}.pdx-surface-host__subtitle{color:var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, .64));font-size:.9375rem}.pdx-surface-host__body{min-width:0}\n"] }]
+  `, styles: [":host{display:block;min-width:0}.pdx-surface-host{display:grid;gap:16px;min-width:0}.pdx-surface-host__header{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}.pdx-surface-host__icon{font-size:20px;line-height:20px;color:var(--md-sys-color-primary, currentColor)}.pdx-surface-host__copy{display:grid;gap:4px;min-width:0}.pdx-surface-host__title,.pdx-surface-host__subtitle{margin:0}.pdx-surface-host__title{font-size:1rem;font-weight:600}.pdx-surface-host__subtitle{color:var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, .64));font-size:.9375rem}.pdx-surface-host__body{display:grid;gap:16px;min-width:0}.pdx-surface-host__slot{min-width:0}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], beforeWidget: [{
+                type: Input
             }], widget: [{
                 type: Input
+            }], afterWidget: [{
+                type: Input
             }], context: [{
                 type: Input
             }], strictValidation: [{
                 type: Input
             }], renderTitleInsideBody: [{
                 type: Input
-            }], widgetLoader: [{
+            }], widgetEvent: [{
+                type: Output
+            }], beforeWidgetLoader: [{
                 type: ViewChild,
-                args: [DynamicWidgetLoaderDirective]
+                args: ['beforeWidgetLoader', { read: DynamicWidgetLoaderDirective }]
+            }], mainWidgetLoader: [{
+                type: ViewChild,
+                args: ['mainWidgetLoader', { read: DynamicWidgetLoaderDirective }]
+            }], afterWidgetLoader: [{
+                type: ViewChild,
+                args: ['afterWidgetLoader', { read: DynamicWidgetLoaderDirective }]
             }] } });
 
 class EmptyStateCardComponent {
@@ -34339,4 +35758,4 @@ function provideHookWhitelist(allowed) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_CONFIG_STORAGE_OPTIONS, API_URL, ASYNC_CONFIG_STORAGE, AllowedFileTypes, AnalyticsPresentationResolver, AnalyticsSchemaContractService, AnalyticsStatsRequestBuilderService, ApiConfigStorage, ApiEndpoint, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, BUILTIN_SHELL_PRESETS, CONFIG_STORAGE, CONNECTION_STORAGE, ComponentKeyService, ComponentMetadataRegistry, CompositionRuntimeFacade, ConsoleLoggerSink, CrudOperationResolutionService, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, DEFAULT_JSON_LOGIC_OPERATORS, DEFAULT_TABLE_CONFIG, DOMAIN_CATALOG_COMPONENT_CONTEXT_PACK, DOMAIN_CATALOG_CONTEXT_HINT_SCHEMA_VERSION, DYNAMIC_PAGE_AI_CAPABILITIES, DYNAMIC_PAGE_COMPONENT_CONTEXT_PACK, DYNAMIC_PAGE_CONFIG_EDITOR, DYNAMIC_PAGE_SHELL_EDITOR, DefaultLoadingRenderer, DeferredAsyncConfigStorage, DomainCatalogService, DomainKnowledgeService, DomainRuleService, DynamicFormService, DynamicWidgetLoaderDirective, DynamicWidgetPageComponent, EDITORIAL_ALLOWED_CONTENT_FORMATS, EDITORIAL_COMPLIANCE_PRESETS, EDITORIAL_EXTERNAL_LINK_REL, EDITORIAL_FORM_TEMPLATE_CATALOG, EDITORIAL_HTML_ENABLED, EDITORIAL_MARKDOWN_IMAGES_ENABLED, EDITORIAL_SOLUTION_CATALOG, EDITORIAL_SOLUTION_PRESETS, EDITORIAL_THEME_PRESETS, EDITORIAL_WIDGET_CONVENTION_INPUTS, EDITORIAL_WIDGET_TAG, EMPLOYEE_ONBOARDING_EDITORIAL_SOLUTION, EMPLOYEE_ONBOARDING_EDITORIAL_TEMPLATE, EMPLOYEE_ONBOARDING_GUIDED_EDITORIAL_SOLUTION, EMPLOYEE_ONBOARDING_GUIDED_EDITORIAL_TEMPLATE, EVENT_REGISTRATION_EDITORIAL_SOLUTION, EVENT_REGISTRATION_EDITORIAL_TEMPLATE, EmptyStateCardComponent, ErrorMessageService, FIELD_METADATA_CAPABILITIES, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, FIELD_SELECTOR_REGISTRY_OVERRIDES, FORM_HOOKS, FORM_HOOKS_PRESETS, FORM_HOOKS_WHITELIST, FORM_HOOK_RESOLVERS, FieldControlType, FieldDataType, FieldSelectorRegistry, FormHooksRegistry, GLOBAL_ACTION_CATALOG, GLOBAL_ACTION_HANDLERS, GLOBAL_ACTION_UI_SCHEMAS, GLOBAL_ANALYTICS_SERVICE, GLOBAL_API_CLIENT, GLOBAL_CONFIG, GLOBAL_DIALOG_SERVICE, GLOBAL_ROUTE_GUARD_RESOLVER, GLOBAL_SURFACE_SERVICE, GLOBAL_TOAST_SERVICE, GenericCrudService, GlobalActionService, GlobalConfigService, INLINE_FILTER_ALIAS_TOKENS, INLINE_FILTER_CONTROL_TYPES, INLINE_FILTER_CONTROL_TYPE_SET, INLINE_FILTER_CONTROL_TYPE_VALUES, INLINE_FILTER_TOKEN_TO_BASE_CONTROL_TYPE, INLINE_FILTER_TOKEN_TO_CONTROL_TYPE, IconPickerService, IconPosition, IconSize, LOGGER_LEVEL_BY_ENV, LOGGER_LEVEL_PRIORITY, LoadingOrchestrator, LocalConnectionStorage, LocalStorageAsyncAdapter, LocalStorageCacheAdapter, LocalStorageConfigService, LoggerService, LoggerThrottleTracker, LoggerWarnOnceTracker, MemoryCacheAdapter, NestedPortCatalogService, NestedWidgetConfigAccessor, NumericFormat, OVERLAY_DECIDER_DEBUG, OVERLAY_DECISION_MATRIX, ObservabilityDashboardService, OverlayDeciderService, PRAXIS_COLLECTION_EXPORT_HTTP_OPTIONS, PRAXIS_COLLECTION_EXPORT_PROVIDER, PRAXIS_CORPORATE_SENSITIVE_KEYS, PRAXIS_DEFAULT_EXPORT_SECURITY_POLICY, PRAXIS_DEFAULT_OBSERVABILITY_ALERT_RULES, PRAXIS_DYNAMIC_PAGE_COMPONENT_METADATA, PRAXIS_EXPORT_FORMULA_PREFIXES, PRAXIS_EXPORT_SECURITY_POLICY, PRAXIS_FOOTER_LINKS_METADATA, PRAXIS_GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_CONFIG_BOOTSTRAP_OPTIONS, PRAXIS_GLOBAL_CONFIG_BOOTSTRAP_READY, PRAXIS_GLOBAL_CONFIG_TENANT_RESOLVER, PRAXIS_HERO_BANNER_METADATA, PRAXIS_I18N_CONFIG, PRAXIS_I18N_TRANSLATOR, PRAXIS_JSON_LOGIC_OPERATORS, PRAXIS_LAYER_SCALE_DEFAULTS, PRAXIS_LAYER_SCALE_VARS, PRAXIS_LEGAL_NOTICE_METADATA, PRAXIS_LOADING_CTX, PRAXIS_LOADING_RENDERER, PRAXIS_LOGGER_CONFIG, PRAXIS_LOGGER_SINKS, PRAXIS_OBSERVABILITY_DASHBOARD_OPTIONS, PRAXIS_QUERY_FILTER_EXPRESSION_SCHEMA_VERSION, PRAXIS_RICH_TEXT_BLOCK_METADATA, PRAXIS_TELEMETRY_TRANSPORT, PRAXIS_USER_CONTEXT_SUMMARY_METADATA, PRIVACY_CONSENT_EDITORIAL_SOLUTION, PRIVACY_CONSENT_EDITORIAL_TEMPLATE, PraxisCollectionExportService, PraxisCore, PraxisFooterLinksComponent, PraxisGlobalErrorHandler, PraxisHeroBannerComponent, PraxisHttpCollectionExportProvider, PraxisI18nService, PraxisIconDirective, PraxisIconPickerComponent, PraxisJsonLogicError, PraxisJsonLogicService, PraxisLayerScaleStyleService, PraxisLegalNoticeComponent, PraxisLoadingInterceptor, PraxisRichTextBlockComponent, PraxisSurfaceHostComponent, PraxisUserContextSummaryComponent, RESOURCE_DISCOVERY_I18N_CONFIG, RESOURCE_DISCOVERY_I18N_NAMESPACE, RULE_PROPERTY_SCHEMA, RemoteConfigStorage, ResourceActionOpenAdapterService, ResourceDiscoveryService, ResourceQuickConnectComponent, ResourceSurfaceOpenAdapterService, SCHEMA_VIEWER_CONTEXT, SETTINGS_PANEL_BRIDGE, SETTINGS_PANEL_DATA, STEPPER_CONFIG_EDITOR, SURFACE_DRAWER_BRIDGE, SURFACE_OPEN_I18N_CONFIG, SURFACE_OPEN_I18N_NAMESPACE, SURFACE_OPEN_PRESETS, SchemaMetadataClient, SchemaNormalizerService, SchemaViewerComponent, SurfaceBindingRuntimeService, SurfaceOpenActionEditorComponent, SurfaceOpenMaterializerService, TABLE_CONFIG_EDITOR, TableConfigService, TelemetryLoggerSink, TelemetryService, ValidationPattern, WidgetPageStateRuntimeService, WidgetShellComponent, applyLocalCustomizations$2 as applyLocalCustomizations, applyLocalCustomizations$1 as applyLocalFormCustomizations, assertPraxisCollectionExportArtifact, buildAngularValidators, buildApiUrl, buildBaseColumnFromDef, buildBaseFormField, buildFormConfigFromEditorialTemplate, buildHeaders, buildPageKey, buildPraxisEffectDistinctKey, buildPraxisLayerScaleCss, buildSchemaId, buildSchemaIdStorageKeySegment, buildValidatorsFromValidatorOptions, cancelIfCpfInvalidHook, clampRange, classifyEntityLookupResult, cloneTableConfig, cnpjAlphaValidator, collapseWhitespace, composeHeadersWithVersion, conditionalAsyncValidator, convertFormLayoutToConfig, createCorporateLoggerConfig, createCorporateObservabilityOptions, createCpfCnpjValidator, createDefaultFormConfig, createDefaultTableConfig, createEmptyFormConfig, createEmptyRichContentDocument, createFieldLayoutItem, createPersistedPage, customAsyncValidatorFn, customValidatorFn, debounceAsyncValidator, deepMerge, domainKnowledgeTimelineToRichContentDocument, domainRuleTimelineToRichContentDocument, ensureIds, ensureNoConflictsHookFactory, ensurePageIds, escapePraxisExportCell, extractNormalizedError, fetchWithETag, fileTypeValidator, fillUndefined, generateId, getDefaultFormHints, getEditorialCompliancePresetById, getEditorialFormTemplateById, getEditorialFormTemplateCatalog, getEditorialSolutionById, getEditorialSolutionCatalog, getEditorialSolutionPresetById, getEditorialThemePresetById, getEssentialConfig, getFieldMetadataCapabilities, getFormColumnFieldNames, getFormLayoutFieldNames, getGlobalActionCatalog, getGlobalActionPayloadActualType, getGlobalActionPayloadTypeIssue, getGlobalActionUiSchema, getMissingGlobalActionPayloadKeys, getReferencedFieldMetadata, getRequiredGlobalActionPayloadKeys, getTextTransformer, hasMeaningfulGlobalActionPayloadValue, hasPraxisCollectionExportArtifact, interpolatePraxisTranslation, isAllowedEditorialContentFormat, isAllowedEditorialHref, isCssTextTransform, isEditorialComponentMeta, isEntityLookupMultiplePayloadMode, isEntityLookupPayloadMode, isEntityLookupPayloadModeCompatible, isEntityLookupResultSelectable, isEntityLookupSinglePayloadMode, isFormLayoutItem, isGlobalActionRef, isInlineFilterControlType, isLookupDialogSize, isLookupFilterFieldType, isLookupFilterOperator, isPraxisRuntimeGlobalActionEffect, isRangeValidForFilter, isRequiredGlobalActionParamPayloadMissing, isRequiredGlobalActionPayloadMissing, isTableConfigV2, isValidFormConfig, isValidTableConfig, legacyCnpjValidator, legacyCpfValidator, logOnErrorHook, mapFieldDefinitionToMetadata, mapFieldDefinitionsToMetadata, matchFieldValidator, maxFileSizeValidator, mergeFieldMetadata, mergePraxisI18nConfigs, mergeTableConfigs, migrateFormLayoutRule, migrateLegacyCompositionLink, migrateLegacyCompositionLinks, minWordsValidator, normalizeControlTypeKey, normalizeControlTypeToken, normalizeEditorialLink, normalizeEnd, normalizeFieldConstraints, normalizeFormConfig, normalizeFormLayoutItems, normalizeFormMetadata, normalizeGlobalActionRef$1 as normalizeGlobalActionRef, normalizeLookupFilterRequest, normalizePath, normalizePraxisDataQueryContext, normalizePraxisEffectPolicy, normalizePraxisQueryFilterExpression, normalizePraxisQueryFilterNode, normalizeResourceAvailabilityReasonCode, normalizeStart, normalizeUnknownError, normalizeWidgetEventPath, notifySuccessHook, parseJsonResponseOrEmpty, praxisLoadingInterceptorFn, prefillFromContextHook, provideDefaultFormHooks, provideFieldSelectorRegistryBase, provideFieldSelectorRegistryOverride, provideFieldSelectorRegistryRuntime, provideFormHookPresets, provideFormHooks, provideGlobalActionCatalog, provideGlobalActionHandler, provideGlobalConfig, provideGlobalConfigReady, provideGlobalConfigSeed, provideGlobalConfigTenant, provideHookResolvers, provideHookWhitelist, provideOverlayDecisionMatrix, providePraxisAnalyticsGlobalActions, providePraxisCollectionExportProvider, providePraxisDynamicPageMetadata, providePraxisFooterLinksMetadata, providePraxisGlobalActionCatalog, providePraxisGlobalActions, providePraxisGlobalConfigBootstrap, providePraxisHeroBannerMetadata, providePraxisHttpCollectionExportProvider, providePraxisHttpLoading, providePraxisI18n, providePraxisI18nConfig, providePraxisI18nTranslator, providePraxisIconDefaults, providePraxisJsonLogicOperator, providePraxisJsonLogicOperatorOverride, providePraxisLegalNoticeMetadata, providePraxisLoadingDefaults, providePraxisLogging, providePraxisRichTextBlockMetadata, providePraxisToastGlobalActions, providePraxisUserContextSummaryMetadata, provideRemoteGlobalConfig, readPraxisExportValue, reconcileFilterConfig, reconcileFormConfig, reconcileTableConfig, removeDiacritics, reportTelemetryHookFactory, requiredCheckedValidator, resolveBuiltinPresets, resolveControlTypeAlias, resolveDefaultValuePresentationFormat, resolveEntityLookupPayloadMode, resolveHidden, resolveInlineFilterControlType, resolveInlineFilterControlTypeToBaseControlType, resolveLoggerConfig, resolveObservabilityOptions, resolveOffset, resolveOrder, resolvePraxisCollectionExportItems, resolvePraxisExportFields, resolvePraxisExportScope, resolvePraxisFilterCriteria, resolveResourceAvailabilityReasonKey, resolveSpan, resolveValuePresentation, resolveValuePresentationLocale, serializeEntityLookupValueForPayload, serializeOptionSourceFilterRequest, serializePraxisCollectionToCsv, serializePraxisCollectionToJson, slugify, stripMasksHook, supportsImplicitValuePresentation, syncWithServerMetadata, toCamel, toCapitalize, toKebab, toPascal, toSentenceCase, toSnake, toTitleCase, translateResourceAvailabilityReason, translateResourceDiscoveryText, translateUnavailableWorkflowMessage, trim, uniqueAsyncValidator, urlValidator, validateGlobalActionRef, validateGlobalActionRefs, withMessage, withPraxisHttpLoading };
+export { API_CONFIG_STORAGE_OPTIONS, API_URL, ASYNC_CONFIG_STORAGE, AllowedFileTypes, AnalyticsPresentationResolver, AnalyticsSchemaContractService, AnalyticsStatsRequestBuilderService, ApiConfigStorage, ApiEndpoint, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, BUILTIN_SHELL_PRESETS, CONFIG_STORAGE, CONNECTION_STORAGE, ComponentKeyService, ComponentMetadataRegistry, CompositionRuntimeFacade, ConsoleLoggerSink, CrudOperationResolutionService, DEFAULT_FIELD_SELECTOR_CONTROL_TYPE_MAP, DEFAULT_JSON_LOGIC_OPERATORS, DEFAULT_TABLE_CONFIG, DOMAIN_CATALOG_COMPONENT_CONTEXT_PACK, DOMAIN_CATALOG_CONTEXT_HINT_SCHEMA_VERSION, DYNAMIC_PAGE_AI_CAPABILITIES, DYNAMIC_PAGE_COMPONENT_CONTEXT_PACK, DYNAMIC_PAGE_CONFIG_EDITOR, DYNAMIC_PAGE_SHELL_EDITOR, DefaultLoadingRenderer, DeferredAsyncConfigStorage, DomainCatalogService, DomainKnowledgeService, DomainRuleService, DynamicFormService, DynamicWidgetLoaderDirective, DynamicWidgetPageComponent, EDITORIAL_ALLOWED_CONTENT_FORMATS, EDITORIAL_COMPLIANCE_PRESETS, EDITORIAL_EXTERNAL_LINK_REL, EDITORIAL_FORM_TEMPLATE_CATALOG, EDITORIAL_HTML_ENABLED, EDITORIAL_MARKDOWN_IMAGES_ENABLED, EDITORIAL_SOLUTION_CATALOG, EDITORIAL_SOLUTION_PRESETS, EDITORIAL_THEME_PRESETS, EDITORIAL_WIDGET_CONVENTION_INPUTS, EDITORIAL_WIDGET_TAG, EMPLOYEE_ONBOARDING_EDITORIAL_SOLUTION, EMPLOYEE_ONBOARDING_EDITORIAL_TEMPLATE, EMPLOYEE_ONBOARDING_GUIDED_EDITORIAL_SOLUTION, EMPLOYEE_ONBOARDING_GUIDED_EDITORIAL_TEMPLATE, EVENT_REGISTRATION_EDITORIAL_SOLUTION, EVENT_REGISTRATION_EDITORIAL_TEMPLATE, EmptyStateCardComponent, ErrorMessageService, FIELD_METADATA_CAPABILITIES, FIELD_SELECTOR_REGISTRY_BASE, FIELD_SELECTOR_REGISTRY_DISABLE_DEFAULTS, FIELD_SELECTOR_REGISTRY_OVERRIDES, FORM_HOOKS, FORM_HOOKS_PRESETS, FORM_HOOKS_WHITELIST, FORM_HOOK_RESOLVERS, FieldControlType, FieldDataType, FieldSelectorRegistry, FormHooksRegistry, GLOBAL_ACTION_CATALOG, GLOBAL_ACTION_HANDLERS, GLOBAL_ACTION_UI_SCHEMAS, GLOBAL_ANALYTICS_SERVICE, GLOBAL_API_CLIENT, GLOBAL_CONFIG, GLOBAL_DIALOG_SERVICE, GLOBAL_ROUTE_GUARD_RESOLVER, GLOBAL_SURFACE_SERVICE, GLOBAL_TOAST_SERVICE, GenericCrudService, GlobalActionService, GlobalConfigService, INLINE_FILTER_ALIAS_TOKENS, INLINE_FILTER_CONTROL_TYPES, INLINE_FILTER_CONTROL_TYPE_SET, INLINE_FILTER_CONTROL_TYPE_VALUES, INLINE_FILTER_TOKEN_TO_BASE_CONTROL_TYPE, INLINE_FILTER_TOKEN_TO_CONTROL_TYPE, IconPickerService, IconPosition, IconSize, LOGGER_LEVEL_BY_ENV, LOGGER_LEVEL_PRIORITY, LoadingOrchestrator, LocalConnectionStorage, LocalStorageAsyncAdapter, LocalStorageCacheAdapter, LocalStorageConfigService, LoggerService, LoggerThrottleTracker, LoggerWarnOnceTracker, MemoryCacheAdapter, NestedPortCatalogService, NestedWidgetConfigAccessor, NumericFormat, OVERLAY_DECIDER_DEBUG, OVERLAY_DECISION_MATRIX, ObservabilityDashboardService, OverlayDeciderService, PRAXIS_COLLECTION_EXPORT_HTTP_OPTIONS, PRAXIS_COLLECTION_EXPORT_PROVIDER, PRAXIS_CORPORATE_SENSITIVE_KEYS, PRAXIS_DEFAULT_EXPORT_SECURITY_POLICY, PRAXIS_DEFAULT_OBSERVABILITY_ALERT_RULES, PRAXIS_DYNAMIC_PAGE_COMPONENT_METADATA, PRAXIS_EXPORT_FORMULA_PREFIXES, PRAXIS_EXPORT_SECURITY_POLICY, PRAXIS_FOOTER_LINKS_METADATA, PRAXIS_GLOBAL_ACTION_CATALOG, PRAXIS_GLOBAL_CONFIG_BOOTSTRAP_OPTIONS, PRAXIS_GLOBAL_CONFIG_BOOTSTRAP_READY, PRAXIS_GLOBAL_CONFIG_TENANT_RESOLVER, PRAXIS_HERO_BANNER_METADATA, PRAXIS_I18N_CONFIG, PRAXIS_I18N_TRANSLATOR, PRAXIS_JSON_LOGIC_OPERATORS, PRAXIS_LAYER_SCALE_DEFAULTS, PRAXIS_LAYER_SCALE_VARS, PRAXIS_LEGAL_NOTICE_METADATA, PRAXIS_LOADING_CTX, PRAXIS_LOADING_RENDERER, PRAXIS_LOGGER_CONFIG, PRAXIS_LOGGER_SINKS, PRAXIS_OBSERVABILITY_DASHBOARD_OPTIONS, PRAXIS_QUERY_FILTER_EXPRESSION_SCHEMA_VERSION, PRAXIS_RICH_TEXT_BLOCK_METADATA, PRAXIS_TELEMETRY_TRANSPORT, PRAXIS_USER_CONTEXT_SUMMARY_METADATA, PRIVACY_CONSENT_EDITORIAL_SOLUTION, PRIVACY_CONSENT_EDITORIAL_TEMPLATE, PraxisCollectionExportService, PraxisCore, PraxisFooterLinksComponent, PraxisGlobalErrorHandler, PraxisHeroBannerComponent, PraxisHttpCollectionExportProvider, PraxisI18nService, PraxisIconDirective, PraxisIconPickerComponent, PraxisJsonLogicError, PraxisJsonLogicService, PraxisLayerScaleStyleService, PraxisLegalNoticeComponent, PraxisLoadingInterceptor, PraxisRichTextBlockComponent, PraxisRuntimeComponentObservationRegistryService, PraxisSurfaceHostComponent, PraxisUserContextSummaryComponent, RESOURCE_DISCOVERY_I18N_CONFIG, RESOURCE_DISCOVERY_I18N_NAMESPACE, RULE_PROPERTY_SCHEMA, RemoteConfigStorage, ResourceActionOpenAdapterService, ResourceDiscoveryService, ResourceQuickConnectComponent, ResourceSurfaceOpenAdapterService, SCHEMA_VIEWER_CONTEXT, SETTINGS_PANEL_BRIDGE, SETTINGS_PANEL_DATA, STEPPER_CONFIG_EDITOR, SURFACE_DRAWER_BRIDGE, SURFACE_OPEN_I18N_CONFIG, SURFACE_OPEN_I18N_NAMESPACE, SURFACE_OPEN_PRESETS, SchemaMetadataClient, SchemaNormalizerService, SchemaViewerComponent, SurfaceBindingRuntimeService, SurfaceOpenActionEditorComponent, SurfaceOpenMaterializerService, TABLE_CONFIG_EDITOR, TableConfigService, TelemetryLoggerSink, TelemetryService, ValidationPattern, WidgetPageStateRuntimeService, WidgetShellComponent, applyLocalCustomizations$2 as applyLocalCustomizations, applyLocalCustomizations$1 as applyLocalFormCustomizations, assertPraxisCollectionExportArtifact, assertPraxisRuntimeComponentObservationSerializable, buildAngularValidators, buildApiUrl, buildBaseColumnFromDef, buildBaseFormField, buildFormConfigFromEditorialTemplate, buildHeaders, buildPageKey, buildPraxisEffectDistinctKey, buildPraxisLayerScaleCss, buildSchemaId, buildSchemaIdStorageKeySegment, buildValidatorsFromValidatorOptions, cancelIfCpfInvalidHook, clampRange, classifyEntityLookupResult, clonePraxisRuntimeComponentObservation, cloneTableConfig, cnpjAlphaValidator, collapseWhitespace, composeHeadersWithVersion, conditionalAsyncValidator, convertFormLayoutToConfig, createCorporateLoggerConfig, createCorporateObservabilityOptions, createCpfCnpjValidator, createDefaultFormConfig, createDefaultTableConfig, createEmptyFormConfig, createEmptyRichContentDocument, createFieldLayoutItem, createPersistedPage, customAsyncValidatorFn, customValidatorFn, debounceAsyncValidator, deepMerge, domainKnowledgeTimelineToRichContentDocument, domainRuleTimelineToRichContentDocument, ensureIds, ensureNoConflictsHookFactory, ensurePageIds, escapePraxisExportCell, extractNormalizedError, fetchWithETag, fileTypeValidator, fillUndefined, generateId, getDefaultFormHints, getEditorialCompliancePresetById, getEditorialFormTemplateById, getEditorialFormTemplateCatalog, getEditorialSolutionById, getEditorialSolutionCatalog, getEditorialSolutionPresetById, getEditorialThemePresetById, getEssentialConfig, getFieldMetadataCapabilities, getFormColumnFieldNames, getFormLayoutFieldNames, getGlobalActionCatalog, getGlobalActionPayloadActualType, getGlobalActionPayloadTypeIssue, getGlobalActionUiSchema, getMissingGlobalActionPayloadKeys, getReferencedFieldMetadata, getRequiredGlobalActionPayloadKeys, getTextTransformer, hasMeaningfulGlobalActionPayloadValue, hasPraxisCollectionExportArtifact, interpolatePraxisTranslation, isAllowedEditorialContentFormat, isAllowedEditorialHref, isCssTextTransform, isEditorialComponentMeta, isEntityLookupMultiplePayloadMode, isEntityLookupPayloadMode, isEntityLookupPayloadModeCompatible, isEntityLookupResultSelectable, isEntityLookupSinglePayloadMode, isFormLayoutItem, isGlobalActionRef, isInlineFilterControlType, isLookupDialogSize, isLookupFilterFieldType, isLookupFilterOperator, isPraxisRuntimeGlobalActionEffect, isRangeValidForFilter, isRequiredGlobalActionParamPayloadMissing, isRequiredGlobalActionPayloadMissing, isTableConfigV2, isValidFormConfig, isValidTableConfig, legacyCnpjValidator, legacyCpfValidator, logOnErrorHook, mapFieldDefinitionToMetadata, mapFieldDefinitionsToMetadata, matchFieldValidator, maxFileSizeValidator, mergeFieldMetadata, mergePraxisI18nConfigs, mergeTableConfigs, migrateFormLayoutRule, migrateLegacyCompositionLink, migrateLegacyCompositionLinks, minWordsValidator, normalizeControlTypeKey, normalizeControlTypeToken, normalizeEditorialLink, normalizeEnd, normalizeFieldConstraints, normalizeFormConfig, normalizeFormLayoutItems, normalizeFormMetadata, normalizeGlobalActionRef$1 as normalizeGlobalActionRef, normalizeLookupFilterRequest, normalizePath, normalizePraxisDataQueryContext, normalizePraxisEffectPolicy, normalizePraxisQueryFilterExpression, normalizePraxisQueryFilterNode, normalizeResourceAvailabilityReasonCode, normalizeStart, normalizeUnknownError, normalizeWidgetEventPath, notifySuccessHook, parseJsonResponseOrEmpty, praxisLoadingInterceptorFn, prefillFromContextHook, provideDefaultFormHooks, provideFieldSelectorRegistryBase, provideFieldSelectorRegistryOverride, provideFieldSelectorRegistryRuntime, provideFormHookPresets, provideFormHooks, provideGlobalActionCatalog, provideGlobalActionHandler, provideGlobalConfig, provideGlobalConfigReady, provideGlobalConfigSeed, provideGlobalConfigTenant, provideHookResolvers, provideHookWhitelist, provideOverlayDecisionMatrix, providePraxisAnalyticsGlobalActions, providePraxisCollectionExportProvider, providePraxisDynamicPageMetadata, providePraxisFooterLinksMetadata, providePraxisGlobalActionCatalog, providePraxisGlobalActions, providePraxisGlobalConfigBootstrap, providePraxisHeroBannerMetadata, providePraxisHttpCollectionExportProvider, providePraxisHttpLoading, providePraxisI18n, providePraxisI18nConfig, providePraxisI18nTranslator, providePraxisIconDefaults, providePraxisJsonLogicOperator, providePraxisJsonLogicOperatorOverride, providePraxisLegalNoticeMetadata, providePraxisLoadingDefaults, providePraxisLogging, providePraxisRichTextBlockMetadata, providePraxisToastGlobalActions, providePraxisUserContextSummaryMetadata, provideRemoteGlobalConfig, readPraxisExportValue, reconcileFilterConfig, reconcileFormConfig, reconcileTableConfig, registerPraxisRuntimeComponentObservation, removeDiacritics, reportTelemetryHookFactory, requiredCheckedValidator, requiredPresenceValidator, resolveBuiltinPresets, resolveControlTypeAlias, resolveDefaultValuePresentationFormat, resolveEntityLookupPayloadMode, resolveHidden, resolveInlineFilterControlType, resolveInlineFilterControlTypeToBaseControlType, resolveLoggerConfig, resolveObservabilityOptions, resolveOffset, resolveOrder, resolvePraxisCollectionExportItems, resolvePraxisExportFields, resolvePraxisExportScope, resolvePraxisFilterCriteria, resolveResourceAvailabilityReasonKey, resolveSpan, resolveValuePresentation, resolveValuePresentationLocale, serializeEntityLookupValueForPayload, serializeOptionSourceFilterRequest, serializePraxisCollectionToCsv, serializePraxisCollectionToJson, slugify, stripMasksHook, supportsImplicitValuePresentation, syncWithServerMetadata, toCamel, toCapitalize, toKebab, toPascal, toSentenceCase, toSnake, toTitleCase, translateResourceAvailabilityReason, translateResourceDiscoveryText, translateUnavailableWorkflowMessage, trim, uniqueAsyncValidator, urlValidator, validateGlobalActionRef, validateGlobalActionRefs, withMessage, withPraxisHttpLoading };