@praxisui/crud 9.0.4-rc.27 → 9.0.4-rc.28

package/README.md

@@ -202,6 +202,19 @@ to” and keeps it distinct from the current child record. Both identities stay
 outside dynamic-form inputs and submit payloads; capabilities and HATEOAS remain
 the authority for whether the operation may execute.
 
+When a CRUD component is already materialized inside a runtime surface drawer,
+drawer actions reuse that same session. The launcher calls the active
+`surfaceRuntime.push(...)`, preserves the live parent frame and returns through
+the shell Back action instead of stacking a second overlay. The dynamic form
+registers its dirty-state confirmation through the active frame guard, so Back,
+Escape, backdrop and shell close share one discard policy. This is runtime-only:
+the navigation stack, component references and guards must never be serialized
+into CRUD metadata or `x-ui`.
+
+`SURFACE_DRAWER_REF` and `SURFACE_DRAWER_CONTENT_DATA` are the canonical DI
+boundary for components hosted in a runtime frame. Hosts should not manufacture
+an equivalent local token or pass the drawer reference through form values.
+
 Route mode has a different lifecycle because `@praxisui/crud` does not own the
 destination component. Routed edit hosts must load the entity through the
 canonical read contract and materialize identity from its response schema. Do

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-08-04T23:26:34.977Z",
+  "generatedAt": "2026-08-05T00:44:25.177Z",
   "packageName": "@praxisui/crud",
-  "packageVersion": "9.0.4-rc.27",
+  "packageVersion": "9.0.4-rc.28",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 2,

package/fesm2022/praxisui-crud.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, ChangeDetectorRef, Injector, ViewChild, Output, Input, Inject, ViewEncapsulation, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Injectable, InjectionToken, inject, input, signal, computed, effect, ChangeDetectionStrategy, Component, EventEmitter, DestroyRef, ChangeDetectorRef, Injector, ViewChild, Output, Input, Optional, Inject, ViewEncapsulation, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { firstValueFrom, BehaviorSubject, Subscription } from 'rxjs';
 import * as i2$1 from '@praxisui/core';
-import { ASYNC_CONFIG_STORAGE, GlobalConfigService, CrudOperationResolutionService, fillUndefined, SETTINGS_PANEL_DATA, PraxisI18nService, PraxisIconDirective, providePraxisI18nConfig, createDefaultTableConfig, EnterpriseRuntimeContextService, GLOBAL_SURFACE_SERVICE, SurfaceOutletRegistryService, ComponentKeyService, ResourceDiscoveryService, ResourceActionOpenAdapterService, ResourceSurfaceOpenAdapterService, normalizeSurfaceOperationContext, translateUnavailableWorkflowMessage, EmptyStateCardComponent, RESOURCE_DISCOVERY_I18N_CONFIG, PraxisIconButtonComponent, PraxisResourceIdentityComponent, GenericCrudService, ComponentMetadataRegistry } from '@praxisui/core';
+import { ASYNC_CONFIG_STORAGE, GlobalConfigService, CrudOperationResolutionService, fillUndefined, SETTINGS_PANEL_DATA, PraxisI18nService, PraxisIconDirective, providePraxisI18nConfig, createDefaultTableConfig, EnterpriseRuntimeContextService, GLOBAL_SURFACE_SERVICE, SurfaceOutletRegistryService, ComponentKeyService, ResourceDiscoveryService, ResourceActionOpenAdapterService, ResourceSurfaceOpenAdapterService, normalizeSurfaceOperationContext, translateUnavailableWorkflowMessage, EmptyStateCardComponent, RESOURCE_DISCOVERY_I18N_CONFIG, SURFACE_DRAWER_REF, SURFACE_DRAWER_CONTENT_DATA, PraxisIconButtonComponent, PraxisResourceIdentityComponent, GenericCrudService, ComponentMetadataRegistry } from '@praxisui/core';
 import { SettingsPanelService } from '@praxisui/settings-panel';
 import { PraxisTableInlineAuthoringEditorComponent, PraxisTable } from '@praxisui/table';
 import { ConfirmDialogComponent } from '@praxisui/dynamic-fields';
@@ -104,6 +104,7 @@ class CrudLauncherService {
     global = inject(GlobalConfigService);
     operationResolver = inject(CrudOperationResolutionService);
     dialogHostPromise;
+    nextSurfaceFrameId = 0;
     drawerAdapter = (() => {
         try {
             return inject(CRUD_DRAWER_ADAPTER);
@@ -145,6 +146,31 @@ class CrudLauncherService {
             ? runtime?.resourceIdentity ?? null
             : null;
         const contextIdentity = runtime?.contextIdentity ?? null;
+        const dialogData = {
+            action: actionForLaunch,
+            row,
+            metadata: merged.metadata,
+            inputs,
+            presentation: mode === 'drawer' ? 'drawer' : 'modal',
+            resourceIdentity,
+            contextIdentity,
+        };
+        if (mode === 'drawer' && runtime?.surfaceRuntime?.push) {
+            const frameRef = await runtime.surfaceRuntime.push({
+                id: this.buildSurfaceFrameId(actionForLaunch),
+                title: this.resolveSurfaceFrameTitle(actionForLaunch, merged.metadata),
+                titleIcon: stringOrUndefined$1(actionForLaunch['icon']),
+                subtitle: this.resolveSurfaceFrameSubtitle(actionForLaunch, merged.metadata),
+                content: {
+                    component: await (prefetchedDialogHost ?? this.loadDialogHost()),
+                    inputs: { data: dialogData },
+                },
+            });
+            if (frameRef) {
+                this.bindSurfaceFrameLifecycle(frameRef, drawerCallbacks);
+                return { mode };
+            }
+        }
         if (mode === 'drawer' && this.drawerAdapter) {
             await Promise.resolve(this.drawerAdapter.open({
                 action: actionForLaunch,
@@ -207,14 +233,9 @@ class CrudLauncherService {
             position: dialogPosition,
             ariaLabelledBy: 'crudDialogTitle',
             data: {
-                action: actionForLaunch,
-                row,
-                metadata: merged.metadata,
-                inputs,
+                ...dialogData,
                 presentation: drawerMode ? 'drawer' : 'modal',
                 dialogPosition,
-                resourceIdentity,
-                contextIdentity,
             },
         });
         if (drawerMode) {
@@ -484,6 +505,46 @@ class CrudLauncherService {
             schemaType: 'request',
         };
     }
+    buildSurfaceFrameId(action) {
+        this.nextSurfaceFrameId += 1;
+        return `crud:${action.action}:${action.formId || 'form'}:${this.nextSurfaceFrameId}`;
+    }
+    resolveSurfaceFrameTitle(action, metadata) {
+        return stringOrUndefined$1(action['label'])
+            ?? stringOrUndefined$1(metadata.form?.['title'])
+            ?? stringOrUndefined$1(metadata.table?.['title'])
+            ?? (action.action === 'create'
+                ? 'Adicionar registro'
+                : action.action === 'view'
+                    ? 'Consultar registro'
+                    : 'Editar registro');
+    }
+    resolveSurfaceFrameSubtitle(action, metadata) {
+        return stringOrUndefined$1(action['description'])
+            ?? stringOrUndefined$1(action['tooltip'])
+            ?? stringOrUndefined$1(metadata.form?.['description'])
+            ?? stringOrUndefined$1(metadata.table?.['subtitle']);
+    }
+    bindSurfaceFrameLifecycle(frameRef, callbacks) {
+        let semanticResultHandled = false;
+        const handleResult = (value) => {
+            if (semanticResultHandled)
+                return;
+            const result = toCrudDrawerResult(value);
+            if (!result || result.type === 'close')
+                return;
+            semanticResultHandled = true;
+            callbacks?.onResult?.(result);
+        };
+        frameRef.result$?.pipe(take(1)).subscribe(handleResult);
+        frameRef.closed$.pipe(take(1)).subscribe((value) => {
+            handleResult(value);
+            callbacks?.onClose?.();
+            if (!semanticResultHandled) {
+                callbacks?.onResult?.({ type: 'close' });
+            }
+        });
+    }
     async mergeCrudOverrides(metadata, action, componentKeyId) {
         try {
             if (!componentKeyId)
@@ -565,6 +626,10 @@ function toCrudDrawerResult(value) {
         ? result
         : undefined;
 }
+function stringOrUndefined$1(value) {
+    const text = String(value ?? '').trim();
+    return text || undefined;
+}
 
 const DOCUMENT_KIND = 'praxis.crud.editor';
 const DOCUMENT_VERSION = 1;
@@ -3922,6 +3987,7 @@ class PraxisCrudComponent {
                 links: this.resolveCrudRuntimeLinks(effectiveAction.action, contextualRow),
                 resourceIdentity,
                 contextIdentity,
+                surfaceRuntime: this.resolveSurfaceRuntime(),
             });
             this.afterOpen.emit({ mode, action: effectiveAction.action });
             if (mode === 'drawer') {
@@ -4188,6 +4254,7 @@ class PraxisCrudComponent {
         }, {
             capabilities: this.collectionCapabilities,
             links: this.tableCollectionLinks,
+            surfaceRuntime: this.resolveSurfaceRuntime(),
         });
         this.afterOpen.emit({ mode, action: normalizedAction });
         if (mode !== 'drawer' && ref) {
@@ -4207,6 +4274,14 @@ class PraxisCrudComponent {
         }
         this.table.refetch();
     }
+    resolveSurfaceRuntime() {
+        const candidate = this.context?.['surfaceRuntime'];
+        if (!candidate || typeof candidate !== 'object') {
+            return null;
+        }
+        const runtime = candidate;
+        return typeof runtime.push === 'function' ? runtime : null;
+    }
     tryRefreshMaterializedLocalData() {
         const readUrl = this.resolveMaterializedReadUrl();
         if (!readUrl || this.resolveResourcePath(this.resolvedMetadata)) {
@@ -5408,10 +5483,10 @@ function debugCrudHost(message, data) {
 }
 class DynamicFormDialogHostComponent {
     dialogRef;
-    data;
     dialogService;
     crud;
     configStorage;
+    surfaceRef;
     formComp;
     modal = {};
     presentation = 'modal';
@@ -5421,6 +5496,7 @@ class DynamicFormDialogHostComponent {
     rememberState = false;
     stateKey;
     backDefaults = {};
+    terminalClose = false;
     destroyRef = inject(DestroyRef);
     i18n = inject(PraxisI18nService);
     resourcePath;
@@ -5440,6 +5516,8 @@ class DynamicFormDialogHostComponent {
     mode = 'create';
     backConfig;
     idField = 'id';
+    isSurfaceFrame;
+    data;
     texts = {
         title: 'Formulário',
         close: 'Fechar',
@@ -5454,14 +5532,25 @@ class DynamicFormDialogHostComponent {
         discardConfirm: 'Descartar',
         discardCancel: 'Cancelar',
     };
-    constructor(dialogRef, data, dialogService, crud, configStorage) {
+    constructor(dialogRef, dialogData, dialogService, crud, configStorage, surfaceRef = null, surfaceContentData = null) {
         this.dialogRef = dialogRef;
-        this.data = data;
         this.dialogService = dialogService;
         this.crud = crud;
         this.configStorage = configStorage;
-        this.dialogRef.disableClose = true;
-        this.presentation = this.data.presentation === 'drawer' ? 'drawer' : 'modal';
+        this.surfaceRef = surfaceRef;
+        this.data = dialogData ?? surfaceContentData?.['data'] ?? {};
+        this.isSurfaceFrame = !!this.surfaceRef;
+        if (!this.dialogRef && !this.surfaceRef) {
+            throw new Error('DynamicFormDialogHostComponent requires a MatDialogRef or an active SurfaceDrawerRef.');
+        }
+        if (this.dialogRef) {
+            this.dialogRef.disableClose = true;
+        }
+        this.presentation = this.isSurfaceFrame
+            ? 'surface-frame'
+            : this.data.presentation === 'drawer'
+                ? 'drawer'
+                : 'modal';
         // i18n
         this.texts = {
             ...this.texts,
@@ -5521,14 +5610,14 @@ class DynamicFormDialogHostComponent {
             backConfig: this.backConfig,
         });
         // Esc
-        if (!this.modal.disableCloseOnEsc) {
+        if (this.dialogRef && !this.modal.disableCloseOnEsc) {
             this.dialogRef
                 .keydownEvents()
                 .pipe(filter((e) => e.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
                 .subscribe(() => this.onCancel());
         }
         // Backdrop
-        if (!this.modal.disableCloseOnBackdrop) {
+        if (this.dialogRef && !this.modal.disableCloseOnBackdrop) {
             this.dialogRef
                 .backdropClick()
                 .pipe(takeUntilDestroyed(this.destroyRef))
@@ -5536,7 +5625,7 @@ class DynamicFormDialogHostComponent {
         }
         // Salvar estado ao fechar, se aplicável
         this.dialogRef
-            .afterClosed()
+            ?.afterClosed()
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.saveState());
     }
@@ -5720,6 +5809,13 @@ class DynamicFormDialogHostComponent {
             });
         }
     }
+    ngAfterViewInit() {
+        if (!this.surfaceRef?.setCanLeave) {
+            return;
+        }
+        this.surfaceRef.updateTitle?.(this.dialogTitle);
+        this.surfaceRef.setCanLeave(() => this.canLeaveSurfaceFrame());
+    }
     onSave(result) {
         const stage = getFormSubmitStage(result);
         if (stage === 'before' || stage === 'error') {
@@ -5729,9 +5825,21 @@ class DynamicFormDialogHostComponent {
             this.saveState();
             return;
         }
-        this.dialogRef.close({ type: 'save', data: result });
+        this.terminalClose = true;
+        this.formComp?.form.markAsPristine();
+        if (this.surfaceRef) {
+            this.surfaceRef.emitResult?.({ type: 'save', data: result });
+            this.surfaceRef.close?.({ type: 'save', data: result });
+        }
+        else {
+            this.dialogRef?.close({ type: 'save', data: result });
+        }
     }
     onCancel() {
+        if (this.surfaceRef) {
+            this.surfaceRef.close?.({ type: 'close' });
+            return;
+        }
         const dirty = this.formComp?.form.dirty;
         const backCfg = (this.data.action?.back || this.data.metadata?.defaults?.back) || {};
         const confirm = backCfg.confirmOnDirty ?? true;
@@ -5749,12 +5857,32 @@ class DynamicFormDialogHostComponent {
             ref
                 .afterClosed()
                 .pipe(filter((confirmed) => !!confirmed), takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => this.dialogRef.close({ type: 'close' }));
+                .subscribe(() => this.dialogRef?.close({ type: 'close' }));
         }
         else {
-            this.dialogRef.close({ type: 'close' });
+            this.dialogRef?.close({ type: 'close' });
         }
     }
+    async canLeaveSurfaceFrame() {
+        if (this.terminalClose || !this.formComp?.form.dirty) {
+            return true;
+        }
+        const backCfg = (this.data.action?.back || this.data.metadata?.defaults?.back) || {};
+        if (backCfg.confirmOnDirty === false) {
+            return true;
+        }
+        const ref = this.dialogService.open(ConfirmDialogComponent, {
+            data: {
+                title: this.texts.discardTitle,
+                message: this.texts.discardMessage,
+                confirmText: this.texts.discardConfirm,
+                cancelText: this.texts.discardCancel,
+                type: 'warning',
+            },
+            autoFocus: false,
+        });
+        return !!(await firstValueFrom(ref.afterClosed().pipe(take(1))));
+    }
     toggleMaximize(initial = false) {
         const pane = this.resolveOverlayPane();
         if (!initial && !this.maximized && pane) {
@@ -5768,7 +5896,12 @@ class DynamicFormDialogHostComponent {
         const height = this.maximized
             ? `calc(100dvh - ${2 * (gap ?? 0)}px)`
             : this.initialSize.height;
-        this.dialogRef.updateSize(width, height);
+        if (this.surfaceRef) {
+            this.surfaceRef.updateSize?.(this.maximized ? 'full' : 'default');
+        }
+        else {
+            this.dialogRef?.updateSize(width, height);
+        }
         this.updateHostPosition();
         if (pane && pane.classList.contains('pfx-dialog-pane')) {
             if (this.presentation === 'drawer') {
@@ -5825,6 +5958,9 @@ class DynamicFormDialogHostComponent {
             startMaximized: this.modal.startMaximized,
             fullscreenBreakpoint: this.modal.fullscreenBreakpoint,
         });
+        if (this.surfaceRef) {
+            return;
+        }
         let shouldMax = false;
         if (saved && typeof saved.maximized === 'boolean') {
             shouldMax = !!saved.maximized;
@@ -5839,16 +5975,19 @@ class DynamicFormDialogHostComponent {
             this.toggleMaximize(true);
         }
         else if (this.initialSize.width || this.initialSize.height) {
-            this.dialogRef.updateSize(this.initialSize.width, this.initialSize.height);
+            this.dialogRef?.updateSize(this.initialSize.width, this.initialSize.height);
             this.updateHostPosition();
         }
     }
     updateHostPosition() {
+        if (this.surfaceRef) {
+            return;
+        }
         if (this.presentation !== 'drawer') {
-            this.dialogRef.updatePosition();
+            this.dialogRef?.updatePosition();
             return;
         }
-        this.dialogRef.updatePosition(this.maximized
+        this.dialogRef?.updatePosition(this.maximized
             ? this.resolveMaximizedDrawerPosition()
             : this.initialPosition);
     }
@@ -5863,11 +6002,12 @@ class DynamicFormDialogHostComponent {
             : { top: offset };
         return { ...horizontal, ...vertical };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicFormDialogHostComponent, deps: [{ token: MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: DialogService }, { token: i2$1.GenericCrudService }, { token: ASYNC_CONFIG_STORAGE }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicFormDialogHostComponent, isStandalone: true, selector: "praxis-dynamic-form-dialog-host", host: { properties: { "attr.data-density": "modal.density || \"default\"", "attr.data-presentation": "presentation", "class.praxis-drawer": "presentation === \"drawer\"" }, classAttribute: "praxis-dialog" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicFormDialogHostComponent, deps: [{ token: MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }, { token: DialogService }, { token: i2$1.GenericCrudService }, { token: ASYNC_CONFIG_STORAGE }, { token: SURFACE_DRAWER_REF, optional: true }, { token: SURFACE_DRAWER_CONTENT_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: DynamicFormDialogHostComponent, isStandalone: true, selector: "praxis-dynamic-form-dialog-host", host: { properties: { "attr.data-density": "modal.density || \"default\"", "attr.data-presentation": "presentation", "class.praxis-drawer": "presentation === \"drawer\"", "class.praxis-surface-frame": "isSurfaceFrame" }, classAttribute: "praxis-dialog" }, providers: [
             GenericCrudService,
             providePraxisI18nConfig(PRAXIS_CRUD_RUNTIME_I18N_CONFIG),
         ], viewQueries: [{ propertyName: "formComp", first: true, predicate: PraxisDynamicForm, descendants: true }], ngImport: i0, template: `
+    @if (!isSurfaceFrame) {
     <div mat-dialog-title class="dialog-header">
       @if (dialogIcon; as icon) {
         <span class="dialog-title-icon" aria-hidden="true">
@@ -5903,11 +6043,14 @@ class DynamicFormDialogHostComponent {
         cdkFocusInitial
       ></button>
     </div>
+    }
 
     <mat-dialog-content
       class="dialog-content"
-      aria-labelledby="crudDialogTitle"
-      [attr.aria-describedby]="dialogSubtitle ? 'crudDialogDescription' : null"
+      [attr.aria-labelledby]="isSurfaceFrame ? null : 'crudDialogTitle'"
+      [attr.aria-describedby]="
+        !isSurfaceFrame && dialogSubtitle ? 'crudDialogDescription' : null
+      "
     >
       @if (showContextIdentity || resourceIdentity) {
         <div class="crud-operation-context" data-testid="crud-operation-context">
@@ -5960,7 +6103,7 @@ class DynamicFormDialogHostComponent {
         (formCancel)="onCancel()"
       ></praxis-dynamic-form>
     </mat-dialog-content>
-  `, isInline: true, styles: ["praxis-dynamic-form-dialog-host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}praxis-dynamic-form-dialog-host[data-density=compact]{--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}praxis-dynamic-form-dialog-host .dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);min-height:var(--dlg-header-h);padding:10px var(--dlg-pad);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-heading{display:grid;min-width:0;gap:2px}praxis-dynamic-form-dialog-host .dialog-title-icon{display:inline-grid;flex:0 0 auto;width:36px;height:36px;place-items:center;border-radius:10px;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}praxis-dynamic-form-dialog-host .dialog-title-icon mat-icon{width:22px;height:22px;font-size:22px}praxis-dynamic-form-dialog-host .dialog-subtitle{display:-webkit-box;overflow:hidden;color:var(--md-sys-color-on-surface-variant);font-size:.82rem;font-weight:400;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}praxis-dynamic-form-dialog-host .spacer{flex:1}praxis-dynamic-form-dialog-host .dialog-content{flex:1 1 auto;overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}praxis-dynamic-form-dialog-host .crud-operation-context{position:sticky;top:0;z-index:1;display:grid;gap:.75rem;margin-block-end:var(--dlg-pad);padding-block:.5rem .75rem;background:var(--pfx-form-surface, var(--md-sys-color-surface));border-bottom:1px solid var(--md-sys-color-outline-variant)}praxis-dynamic-form-dialog-host .crud-resource-identity{display:grid;gap:.25rem;min-width:0}praxis-dynamic-form-dialog-host .crud-resource-identity__label{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-label-medium, 500 .75rem/1rem inherit)}praxis-dynamic-form-dialog-host.praxis-drawer{--dlg-header-h: 72px;width:100%;min-width:0;max-width:100vw;height:100dvh;background:var(--pfx-form-surface, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-header{background:color-mix(in srgb,var(--md-sys-color-surface-container-high, var(--md-sys-color-surface)),transparent 4%)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button{color:var(--md-sys-color-on-surface-variant)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button:hover{color:var(--md-sys-color-primary)}praxis-dynamic-form-dialog-host .dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}.pfx-blur-backdrop{background-color:var(--pfx-backdrop, rgba(15, 23, 42, .42))!important;backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%)}.pfx-transparent-backdrop{background-color:transparent!important}.cdk-overlay-pane.pfx-dialog-pane{overflow:hidden;transition:width .2s ease,height .2s ease,margin .2s ease}.cdk-overlay-pane.pfx-dialog-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane .mdc-dialog__surface{display:flex;flex-direction:column;width:100%;min-width:0;height:100%;max-height:inherit;overflow:hidden;background:var(--pfx-form-surface, var(--md-sys-color-surface))!important;border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant))!important}.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mdc-dialog__surface{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cdk-overlay-pane.pfx-drawer-pane{margin:0!important;border-radius:0!important;box-shadow:var(--md-sys-elevation-level3, 0 24px 80px rgba(15, 23, 42, .28)),0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline, #64748b) 24%,transparent)}.cdk-overlay-pane.pfx-drawer-pane.pfx-drawer-maximized{margin:var(--pfx-drawer-edge-gap, 8px)!important}.cdk-overlay-pane.pfx-drawer-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-drawer-pane .mdc-dialog__surface{min-width:0!important;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisResourceIdentityComponent, selector: "praxis-resource-identity", inputs: ["identity", "emptyTitle", "density", "showMetadataLabels", "showKeyLabel", "ariaLabel"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "editorialContext", "mode", "config", "actions", "schemaSource", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "submitIdempotencyKey", "submitCorrelationId", "submitResourceVersion", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange"] }], encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["praxis-dynamic-form-dialog-host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}praxis-dynamic-form-dialog-host[data-density=compact]{--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}praxis-dynamic-form-dialog-host .dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);min-height:var(--dlg-header-h);padding:10px var(--dlg-pad);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-heading{display:grid;min-width:0;gap:2px}praxis-dynamic-form-dialog-host .dialog-title-icon{display:inline-grid;flex:0 0 auto;width:36px;height:36px;place-items:center;border-radius:10px;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}praxis-dynamic-form-dialog-host .dialog-title-icon mat-icon{width:22px;height:22px;font-size:22px}praxis-dynamic-form-dialog-host .dialog-subtitle{display:-webkit-box;overflow:hidden;color:var(--md-sys-color-on-surface-variant);font-size:.82rem;font-weight:400;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}praxis-dynamic-form-dialog-host .spacer{flex:1}praxis-dynamic-form-dialog-host .dialog-content{flex:1 1 auto;overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}praxis-dynamic-form-dialog-host .crud-operation-context{position:sticky;top:0;z-index:1;display:grid;gap:.75rem;margin-block-end:var(--dlg-pad);padding-block:.5rem .75rem;background:var(--pfx-form-surface, var(--md-sys-color-surface));border-bottom:1px solid var(--md-sys-color-outline-variant)}praxis-dynamic-form-dialog-host .crud-resource-identity{display:grid;gap:.25rem;min-width:0}praxis-dynamic-form-dialog-host .crud-resource-identity__label{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-label-medium, 500 .75rem/1rem inherit)}praxis-dynamic-form-dialog-host.praxis-drawer{--dlg-header-h: 72px;width:100%;min-width:0;max-width:100vw;height:100dvh;background:var(--pfx-form-surface, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-header{background:color-mix(in srgb,var(--md-sys-color-surface-container-high, var(--md-sys-color-surface)),transparent 4%)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host.praxis-surface-frame .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button{color:var(--md-sys-color-on-surface-variant)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button:hover{color:var(--md-sys-color-primary)}praxis-dynamic-form-dialog-host .dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}.pfx-blur-backdrop{background-color:var(--pfx-backdrop, rgba(15, 23, 42, .42))!important;backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%)}.pfx-transparent-backdrop{background-color:transparent!important}.cdk-overlay-pane.pfx-dialog-pane{overflow:hidden;transition:width .2s ease,height .2s ease,margin .2s ease}.cdk-overlay-pane.pfx-dialog-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane .mdc-dialog__surface{display:flex;flex-direction:column;width:100%;min-width:0;height:100%;max-height:inherit;overflow:hidden;background:var(--pfx-form-surface, var(--md-sys-color-surface))!important;border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant))!important}.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mdc-dialog__surface{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cdk-overlay-pane.pfx-drawer-pane{margin:0!important;border-radius:0!important;box-shadow:var(--md-sys-elevation-level3, 0 24px 80px rgba(15, 23, 42, .28)),0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline, #64748b) 24%,transparent)}.cdk-overlay-pane.pfx-drawer-pane.pfx-drawer-maximized{margin:var(--pfx-drawer-edge-gap, 8px)!important}.cdk-overlay-pane.pfx-drawer-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-drawer-pane .mdc-dialog__surface{min-width:0!important;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisResourceIdentityComponent, selector: "praxis-resource-identity", inputs: ["identity", "emptyTitle", "density", "showMetadataLabels", "showKeyLabel", "ariaLabel"] }, { kind: "component", type: PraxisDynamicForm, selector: "praxis-dynamic-form", inputs: ["resourcePath", "resourceId", "initialValue", "editorialContext", "mode", "config", "actions", "schemaSource", "schemaUrl", "readUrl", "submitUrl", "submitMethod", "submitIdempotencyKey", "submitCorrelationId", "submitResourceVersion", "responseSchemaUrl", "apiEndpointKey", "apiUrlEntry", "enableCustomization", "showAiAssistant", "formId", "componentInstanceId", "configPersistenceStrategy", "layout", "generatedLayoutPreset", "layoutPolicy", "backConfig", "hooks", "removeEmptyContainersOnSave", "reactiveValidation", "reactiveValidationDebounceMs", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "readonlyModeGlobal", "disabledModeGlobal", "presentationModeGlobal", "visibleGlobal", "fieldIconPolicy", "domainRules", "customEndpoints"], outputs: ["formSubmit", "formCancel", "formReset", "configChange", "configPatchChange", "formReady", "valueChange", "syncCompleted", "initializationError", "loadingStateChange", "enableCustomizationChange", "customAction", "actionConfirmation", "schemaStatusChange", "fieldRenderError", "ruleDiagnosticsChange"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: DynamicFormDialogHostComponent, decorators: [{
             type: Component,
@@ -5979,7 +6122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[attr.data-density]': 'modal.density || "default"',
                         '[attr.data-presentation]': 'presentation',
                         '[class.praxis-drawer]': 'presentation === "drawer"',
+                        '[class.praxis-surface-frame]': 'isSurfaceFrame',
                     }, template: `
+    @if (!isSurfaceFrame) {
     <div mat-dialog-title class="dialog-header">
       @if (dialogIcon; as icon) {
         <span class="dialog-title-icon" aria-hidden="true">
@@ -6015,11 +6160,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         cdkFocusInitial
       ></button>
     </div>
+    }
 
     <mat-dialog-content
       class="dialog-content"
-      aria-labelledby="crudDialogTitle"
-      [attr.aria-describedby]="dialogSubtitle ? 'crudDialogDescription' : null"
+      [attr.aria-labelledby]="isSurfaceFrame ? null : 'crudDialogTitle'"
+      [attr.aria-describedby]="
+        !isSurfaceFrame && dialogSubtitle ? 'crudDialogDescription' : null
+      "
     >
       @if (showContextIdentity || resourceIdentity) {
         <div class="crud-operation-context" data-testid="crud-operation-context">
@@ -6072,16 +6220,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         (formCancel)="onCancel()"
       ></praxis-dynamic-form>
     </mat-dialog-content>
-  `, styles: ["praxis-dynamic-form-dialog-host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}praxis-dynamic-form-dialog-host[data-density=compact]{--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}praxis-dynamic-form-dialog-host .dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);min-height:var(--dlg-header-h);padding:10px var(--dlg-pad);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-heading{display:grid;min-width:0;gap:2px}praxis-dynamic-form-dialog-host .dialog-title-icon{display:inline-grid;flex:0 0 auto;width:36px;height:36px;place-items:center;border-radius:10px;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}praxis-dynamic-form-dialog-host .dialog-title-icon mat-icon{width:22px;height:22px;font-size:22px}praxis-dynamic-form-dialog-host .dialog-subtitle{display:-webkit-box;overflow:hidden;color:var(--md-sys-color-on-surface-variant);font-size:.82rem;font-weight:400;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}praxis-dynamic-form-dialog-host .spacer{flex:1}praxis-dynamic-form-dialog-host .dialog-content{flex:1 1 auto;overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}praxis-dynamic-form-dialog-host .crud-operation-context{position:sticky;top:0;z-index:1;display:grid;gap:.75rem;margin-block-end:var(--dlg-pad);padding-block:.5rem .75rem;background:var(--pfx-form-surface, var(--md-sys-color-surface));border-bottom:1px solid var(--md-sys-color-outline-variant)}praxis-dynamic-form-dialog-host .crud-resource-identity{display:grid;gap:.25rem;min-width:0}praxis-dynamic-form-dialog-host .crud-resource-identity__label{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-label-medium, 500 .75rem/1rem inherit)}praxis-dynamic-form-dialog-host.praxis-drawer{--dlg-header-h: 72px;width:100%;min-width:0;max-width:100vw;height:100dvh;background:var(--pfx-form-surface, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-header{background:color-mix(in srgb,var(--md-sys-color-surface-container-high, var(--md-sys-color-surface)),transparent 4%)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button{color:var(--md-sys-color-on-surface-variant)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button:hover{color:var(--md-sys-color-primary)}praxis-dynamic-form-dialog-host .dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}.pfx-blur-backdrop{background-color:var(--pfx-backdrop, rgba(15, 23, 42, .42))!important;backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%)}.pfx-transparent-backdrop{background-color:transparent!important}.cdk-overlay-pane.pfx-dialog-pane{overflow:hidden;transition:width .2s ease,height .2s ease,margin .2s ease}.cdk-overlay-pane.pfx-dialog-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane .mdc-dialog__surface{display:flex;flex-direction:column;width:100%;min-width:0;height:100%;max-height:inherit;overflow:hidden;background:var(--pfx-form-surface, var(--md-sys-color-surface))!important;border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant))!important}.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mdc-dialog__surface{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cdk-overlay-pane.pfx-drawer-pane{margin:0!important;border-radius:0!important;box-shadow:var(--md-sys-elevation-level3, 0 24px 80px rgba(15, 23, 42, .28)),0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline, #64748b) 24%,transparent)}.cdk-overlay-pane.pfx-drawer-pane.pfx-drawer-maximized{margin:var(--pfx-drawer-edge-gap, 8px)!important}.cdk-overlay-pane.pfx-drawer-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-drawer-pane .mdc-dialog__surface{min-width:0!important;border-radius:0!important}\n"] }]
+  `, styles: ["praxis-dynamic-form-dialog-host{--dlg-header-h: 56px;--dlg-footer-h: 56px;--dlg-pad: 16px;display:flex;flex-direction:column;height:100%;overflow:hidden}praxis-dynamic-form-dialog-host[data-density=compact]{--dlg-header-h: 44px;--dlg-footer-h: 44px;--dlg-pad: 12px}praxis-dynamic-form-dialog-host .dialog-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--dlg-pad);min-height:var(--dlg-header-h);padding:10px var(--dlg-pad);margin:0;background:var(--md-sys-color-surface-container-high);border-bottom:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-title{margin:0;font:inherit;font-weight:600;color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host .dialog-heading{display:grid;min-width:0;gap:2px}praxis-dynamic-form-dialog-host .dialog-title-icon{display:inline-grid;flex:0 0 auto;width:36px;height:36px;place-items:center;border-radius:10px;color:var(--md-sys-color-primary);background:color-mix(in srgb,var(--md-sys-color-primary) 12%,transparent)}praxis-dynamic-form-dialog-host .dialog-title-icon mat-icon{width:22px;height:22px;font-size:22px}praxis-dynamic-form-dialog-host .dialog-subtitle{display:-webkit-box;overflow:hidden;color:var(--md-sys-color-on-surface-variant);font-size:.82rem;font-weight:400;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}praxis-dynamic-form-dialog-host .spacer{flex:1}praxis-dynamic-form-dialog-host .dialog-content{flex:1 1 auto;overflow:auto;padding:var(--dlg-pad);max-height:calc(100svh - var(--dlg-header-h) - 32px)}praxis-dynamic-form-dialog-host .crud-operation-context{position:sticky;top:0;z-index:1;display:grid;gap:.75rem;margin-block-end:var(--dlg-pad);padding-block:.5rem .75rem;background:var(--pfx-form-surface, var(--md-sys-color-surface));border-bottom:1px solid var(--md-sys-color-outline-variant)}praxis-dynamic-form-dialog-host .crud-resource-identity{display:grid;gap:.25rem;min-width:0}praxis-dynamic-form-dialog-host .crud-resource-identity__label{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-label-medium, 500 .75rem/1rem inherit)}praxis-dynamic-form-dialog-host.praxis-drawer{--dlg-header-h: 72px;width:100%;min-width:0;max-width:100vw;height:100dvh;background:var(--pfx-form-surface, var(--md-sys-color-surface));color:var(--md-sys-color-on-surface)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-header{background:color-mix(in srgb,var(--md-sys-color-surface-container-high, var(--md-sys-color-surface)),transparent 4%)}praxis-dynamic-form-dialog-host.praxis-drawer .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host.praxis-surface-frame .dialog-content{max-height:none;min-height:0;padding:clamp(12px,2.4vw,24px)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button{color:var(--md-sys-color-on-surface-variant)}praxis-dynamic-form-dialog-host .dialog-header button.praxis-icon-button:hover{color:var(--md-sys-color-primary)}praxis-dynamic-form-dialog-host .dialog-footer{position:sticky;bottom:0;z-index:1;padding:var(--dlg-pad)}.pfx-blur-backdrop{background-color:var(--pfx-backdrop, rgba(15, 23, 42, .42))!important;backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%);-webkit-backdrop-filter:blur(var(--pfx-backdrop-blur, 10px)) saturate(110%)}.pfx-transparent-backdrop{background-color:transparent!important}.cdk-overlay-pane.pfx-dialog-pane{overflow:hidden;transition:width .2s ease,height .2s ease,margin .2s ease}.cdk-overlay-pane.pfx-dialog-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane .mdc-dialog__surface{display:flex;flex-direction:column;width:100%;min-width:0;height:100%;max-height:inherit;overflow:hidden;background:var(--pfx-form-surface, var(--md-sys-color-surface))!important;border:1px solid var(--pfx-form-stroke, var(--md-sys-color-outline-variant))!important}.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-dialog-pane.pfx-dialog-frosted .mdc-dialog__surface{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.cdk-overlay-pane.pfx-drawer-pane{margin:0!important;border-radius:0!important;box-shadow:var(--md-sys-elevation-level3, 0 24px 80px rgba(15, 23, 42, .28)),0 0 0 1px color-mix(in srgb,var(--md-sys-color-outline, #64748b) 24%,transparent)}.cdk-overlay-pane.pfx-drawer-pane.pfx-drawer-maximized{margin:var(--pfx-drawer-edge-gap, 8px)!important}.cdk-overlay-pane.pfx-drawer-pane .mat-mdc-dialog-surface,.cdk-overlay-pane.pfx-drawer-pane .mdc-dialog__surface{min-width:0!important;border-radius:0!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [MatDialogRef]
                 }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: DialogService }, { type: i2$1.GenericCrudService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ASYNC_CONFIG_STORAGE]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SURFACE_DRAWER_REF]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SURFACE_DRAWER_CONTENT_DATA]
                 }] }], propDecorators: { formComp: [{
                 type: ViewChild,
                 args: [PraxisDynamicForm]

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@praxisui/crud",
-  "version": "9.0.4-rc.27",
+  "version": "9.0.4-rc.28",
   "description": "CRUD building blocks for Praxis UI: integrates dynamic forms and tables with unified configuration and services.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/dynamic-form": "^9.0.4-rc.27",
-    "@praxisui/table": "^9.0.4-rc.27",
-    "@praxisui/core": "^9.0.4-rc.27",
-    "@praxisui/dynamic-fields": "^9.0.4-rc.27",
-    "@praxisui/settings-panel": "^9.0.4-rc.27",
+    "@praxisui/dynamic-form": "^9.0.4-rc.28",
+    "@praxisui/table": "^9.0.4-rc.28",
+    "@praxisui/core": "^9.0.4-rc.28",
+    "@praxisui/dynamic-fields": "^9.0.4-rc.28",
+    "@praxisui/settings-panel": "^9.0.4-rc.28",
     "@angular/cdk": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.4-rc.27",
+    "@praxisui/ai": "^9.0.4-rc.28",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-crud.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { NgZone, OnChanges, EventEmitter, SimpleChanges, OnInit, Provider, AfterViewInit, OnDestroy } from '@angular/core';
+import { NgZone, OnChanges, EventEmitter, SimpleChanges, OnInit, AfterViewInit, Provider, OnDestroy } from '@angular/core';
 import * as _praxisui_core from '@praxisui/core';
-import { RowAction, ToolbarAction, ApiEndpoint, ApiUrlEntry, DynamicFormLayoutPolicy, BackConfig, TableConfig, PraxisDataQueryContext, FormConfig, ResourceActionCatalogItem, ResourceSurfaceCatalogItem, MaterializedResourceIdentity, LoadingState, RestApiLinks, ResourceCapabilitySnapshot, GenericCrudService, AsyncConfigStorage, ComponentDocMeta, AiCapabilityCatalog, AiCapability, AiCapabilityCategory, AiValueKind, ComponentAuthoringManifest, SettingsValueProvider } from '@praxisui/core';
+import { RowAction, ToolbarAction, ApiEndpoint, ApiUrlEntry, DynamicFormLayoutPolicy, BackConfig, TableConfig, PraxisDataQueryContext, FormConfig, ResourceActionCatalogItem, ResourceSurfaceCatalogItem, MaterializedResourceIdentity, LoadingState, RestApiLinks, ResourceCapabilitySnapshot, SurfaceDrawerRef, GenericCrudService, AsyncConfigStorage, ComponentDocMeta, AiCapabilityCatalog, AiCapability, AiCapabilityCategory, AiValueKind, ComponentAuthoringManifest, SettingsValueProvider } from '@praxisui/core';
 export { BackConfig } from '@praxisui/core';
 import { TableConfigPersistenceStrategy } from '@praxisui/table';
 import { MatDialogConfig, MatDialogRef, MatDialog } from '@angular/material/dialog';
@@ -267,6 +267,7 @@ declare class PraxisCrudComponent implements OnChanges {
     private tryHandleCanonicalDeleteAction;
     private tryHandleCanonicalDuplicateDraftAction;
     private refreshTable;
+    private resolveSurfaceRuntime;
     private tryRefreshMaterializedLocalData;
     private isCurrentMaterializedRefresh;
     private resolveMaterializedReadUrl;
@@ -345,6 +346,14 @@ interface CrudDrawerResult {
     data?: Record<string, unknown>;
 }
 
+interface CrudLaunchRuntime {
+    capabilities?: ResourceCapabilitySnapshot | null;
+    links?: RestApiLinks | null;
+    resourceIdentity?: MaterializedResourceIdentity | null;
+    contextIdentity?: MaterializedResourceIdentity | null;
+    /** Active runtime drawer session. It is never persisted in CRUD metadata. */
+    surfaceRuntime?: SurfaceDrawerRef | null;
+}
 declare class CrudLauncherService {
     private readonly router;
     private readonly dialog;
@@ -352,16 +361,12 @@ declare class CrudLauncherService {
     private readonly global;
     private readonly operationResolver;
     private dialogHostPromise?;
+    private nextSurfaceFrameId;
     private readonly drawerAdapter;
     launch(action: CrudAction, row: Record<string, unknown> | undefined, metadata: CrudMetadata, componentKeyId?: string | null, drawerCallbacks?: {
         onClose?: () => void;
         onResult?: (result: CrudDrawerResult) => void;
-    }, runtime?: {
-        capabilities?: ResourceCapabilitySnapshot | null;
-        links?: RestApiLinks | null;
-        resourceIdentity?: MaterializedResourceIdentity | null;
-        contextIdentity?: MaterializedResourceIdentity | null;
-    }): Promise<{
+    }, runtime?: CrudLaunchRuntime): Promise<{
         mode: FormOpenMode;
         ref?: DialogRef<any>;
     }>;
@@ -390,26 +395,31 @@ declare class CrudLauncherService {
     private normalizeCrudOperationName;
     private isExplicitCrudAction;
     private defaultInferredLayoutPolicy;
+    private buildSurfaceFrameId;
+    private resolveSurfaceFrameTitle;
+    private resolveSurfaceFrameSubtitle;
+    private bindSurfaceFrameLifecycle;
     private mergeCrudOverrides;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CrudLauncherService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<CrudLauncherService>;
 }
 
-declare class DynamicFormDialogHostComponent implements OnInit {
-    dialogRef: DialogRef<DynamicFormDialogHostComponent>;
-    data: any;
+declare class DynamicFormDialogHostComponent implements OnInit, AfterViewInit {
+    dialogRef: DialogRef<DynamicFormDialogHostComponent> | null;
     private dialogService;
     private crud;
     private configStorage;
+    private readonly surfaceRef;
     formComp?: PraxisDynamicForm;
     modal: any;
-    presentation: 'modal' | 'drawer';
+    presentation: 'modal' | 'drawer' | 'surface-frame';
     maximized: boolean;
     private initialSize;
     private readonly initialPosition?;
     private rememberState;
     private stateKey?;
     private backDefaults;
+    private terminalClose;
     private destroyRef;
     private readonly i18n;
     resourcePath?: string;
@@ -429,8 +439,10 @@ declare class DynamicFormDialogHostComponent implements OnInit {
     mode: 'create' | 'edit' | 'view';
     backConfig?: BackConfig;
     private idField;
+    readonly isSurfaceFrame: boolean;
+    readonly data: any;
     texts: Record<string, string>;
-    constructor(dialogRef: DialogRef<DynamicFormDialogHostComponent>, data: any, dialogService: DialogService, crud: GenericCrudService<any>, configStorage: AsyncConfigStorage);
+    constructor(dialogRef: DialogRef<DynamicFormDialogHostComponent> | null, dialogData: any, dialogService: DialogService, crud: GenericCrudService<any>, configStorage: AsyncConfigStorage, surfaceRef?: SurfaceDrawerRef | null, surfaceContentData?: Readonly<Record<string, unknown>> | null);
     get resourceIdentityLabel(): string;
     get showContextIdentity(): boolean;
     private sameIdentity;
@@ -446,8 +458,10 @@ declare class DynamicFormDialogHostComponent implements OnInit {
     private resolveLayoutPolicy;
     private resolveSubmitLabel;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     onSave(result: unknown): void;
     onCancel(): void;
+    private canLeaveSurfaceFrame;
     toggleMaximize(initial?: boolean): void;
     private resolveOverlayPane;
     private captureRenderedInitialSize;
@@ -455,7 +469,7 @@ declare class DynamicFormDialogHostComponent implements OnInit {
     private applySavedState;
     private updateHostPosition;
     private resolveMaximizedDrawerPosition;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicFormDialogHostComponent, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DynamicFormDialogHostComponent, [{ optional: true; }, { optional: true; }, null, null, null, { optional: true; }, { optional: true; }]>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DynamicFormDialogHostComponent, "praxis-dynamic-form-dialog-host", never, {}, {}, never, never, true, never>;
 }