@praxisui/page-builder 9.0.35 → 9.0.36

package/fesm2022/praxisui-page-builder.mjs

@@ -7,7 +7,7 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$2 from '@praxisui/core';
-import { PraxisIconDirective, providePraxisI18n, BUILTIN_SHELL_PRESETS, PraxisIconButtonComponent, PraxisI18nService, GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SurfaceOpenActionEditorComponent, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, NestedWidgetConfigAccessor, deepMerge, generateId, ComponentMetadataRegistry, ObservabilityDashboardService, PraxisRuntimeComponentObservationRegistryService, domainKnowledgeTimelineToRichContentDocument, DomainRuleService, DomainKnowledgeService, SETTINGS_PANEL_BRIDGE, DynamicWidgetPageComponent, DYNAMIC_PAGE_SHELL_EDITOR } from '@praxisui/core';
+import { PraxisIconDirective, providePraxisI18n, BUILTIN_SHELL_PRESETS, PraxisIconButtonComponent, PraxisI18nService, GLOBAL_ACTION_CATALOG, getGlobalActionCatalog, PRAXIS_GLOBAL_ACTION_CATALOG, SurfaceOpenActionEditorComponent, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, SETTINGS_PANEL_DATA as SETTINGS_PANEL_DATA$1, NestedWidgetConfigAccessor, CompositionValidatorService, deepMerge, generateId, ComponentMetadataRegistry, ObservabilityDashboardService, PraxisRuntimeComponentObservationRegistryService, domainKnowledgeTimelineToRichContentDocument, DomainRuleService, DomainKnowledgeService, SETTINGS_PANEL_BRIDGE, DynamicWidgetPageComponent, DYNAMIC_PAGE_SHELL_EDITOR } from '@praxisui/core';
 import * as i3 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$1 from '@angular/material/form-field';
@@ -4043,10 +4043,10 @@ function buildConnectionsViewerModel(page) {
         const fromWidgetId = link.from.kind === 'component-port' ? link.from.ref.widget : null;
         const toWidgetId = link.to.kind === 'component-port' ? link.to.ref.widget : null;
         const fromNestedPath = link.from.kind === 'component-port' && link.from.ref.nestedPath?.length
-            ? clone$2(link.from.ref.nestedPath)
+            ? clone$3(link.from.ref.nestedPath)
             : null;
         const toNestedPath = link.to.kind === 'component-port' && link.to.ref.nestedPath?.length
-            ? clone$2(link.to.ref.nestedPath)
+            ? clone$3(link.to.ref.nestedPath)
             : null;
         const toStatePath = link.to.kind === 'state' ? link.to.ref.path : null;
         const diagnosticReasons = [];
@@ -4131,7 +4131,7 @@ function formatPathSegment$1(segment) {
         segment.id || segment.key || segment.index,
     ].filter((part) => part !== undefined && part !== '').join(':');
 }
-function clone$2(value) {
+function clone$3(value) {
     if (value == null || typeof value !== 'object')
         return value;
     return JSON.parse(JSON.stringify(value));
@@ -4443,8 +4443,8 @@ function buildCompositionLinkFromPorts(source, target, links) {
     const transform = inferCanonicalTransform(source, target);
     return {
         id: uniqueConnectionLinkId(source, target, links),
-        from: clone$1(source.endpoint),
-        to: clone$1(target.endpoint),
+        from: clone$2(source.endpoint),
+        to: clone$2(target.endpoint),
         intent: inferConnectionIntent(source, target),
         ...(transform ? { transform } : {}),
         metadata: {
@@ -4585,7 +4585,7 @@ function componentPort(widgetId, port, direction, componentType, nestedPath, lab
             port,
             direction,
             ...(componentType ? { componentType } : {}),
-            ...(nestedPath?.length ? { nestedPath: clone$1(nestedPath) } : {}),
+            ...(nestedPath?.length ? { nestedPath: clone$2(nestedPath) } : {}),
         },
     };
     return {
@@ -4599,7 +4599,7 @@ function componentPort(widgetId, port, direction, componentType, nestedPath, lab
         label,
         kind: direction,
         endpoint,
-        ...(nestedPath?.length ? { nestedPath: clone$1(nestedPath) } : {}),
+        ...(nestedPath?.length ? { nestedPath: clone$2(nestedPath) } : {}),
     };
 }
 function statePort(path) {
@@ -4867,7 +4867,7 @@ function readArray(value) {
 function readString(value) {
     return typeof value === 'string' && value.trim() ? value : undefined;
 }
-function clone$1(value) {
+function clone$2(value) {
     if (value == null || typeof value !== 'object')
         return value;
     return JSON.parse(JSON.stringify(value));
@@ -7343,7 +7343,7 @@ class ConnectionEditorComponent {
             ...(current ?? {}),
             debounceMs: 150,
             distinct: true,
-            delivery: 'microtask',
+            delivery: 'sync',
         };
     }
     applyNodeRotation(node) {
@@ -11382,9 +11382,10 @@ class PageConfigEditorComponent {
         this.patchDeviceLayoutForm(this.deviceMobileForm, deviceLayouts?.mobile);
     }
     buildDeviceLayouts() {
-        const desktop = this.buildDeviceLayoutVariant(this.deviceDesktopForm);
-        const tablet = this.buildDeviceLayoutVariant(this.deviceTabletForm);
-        const mobile = this.buildDeviceLayoutVariant(this.deviceMobileForm);
+        const current = this.currentPageInput()?.deviceLayouts;
+        const desktop = this.buildDeviceLayoutVariant(this.deviceDesktopForm, current?.desktop);
+        const tablet = this.buildDeviceLayoutVariant(this.deviceTabletForm, current?.tablet);
+        const mobile = this.buildDeviceLayoutVariant(this.deviceMobileForm, current?.mobile);
         if (desktop === null || tablet === null || mobile === null)
             return null;
         const deviceLayouts = {};
@@ -11419,7 +11420,7 @@ class PageConfigEditorComponent {
             widgetOverridesJson: variant?.widgetOverrides ? JSON.stringify(variant.widgetOverrides, null, 2) : '',
         }, { emitEvent: false });
     }
-    buildDeviceLayoutVariant(form) {
+    buildDeviceLayoutVariant(form, current) {
         const breakpoints = this.parseJson(form.controls.breakpointsJson.value, {});
         const groupingOverrides = this.parseJson(form.controls.groupingOverridesJson.value, []);
         const widgetOverrides = this.parseJson(form.controls.widgetOverridesJson.value, {});
@@ -11434,13 +11435,19 @@ class PageConfigEditorComponent {
             layout.gap = form.controls.gap.value.trim();
         if (Object.keys(breakpoints).length)
             layout.breakpoints = breakpoints;
-        const variant = {};
+        const variant = this.clone(current || {});
         if (Object.keys(layout).length)
             variant.layout = layout;
+        else
+            delete variant.layout;
         if (groupingOverrides.length)
             variant.groupingOverrides = groupingOverrides;
+        else
+            delete variant.groupingOverrides;
         if (Object.keys(widgetOverrides).length)
             variant.widgetOverrides = widgetOverrides;
+        else
+            delete variant.widgetOverrides;
         return variant;
     }
     hydrateStateEditor(state) {
@@ -13077,6 +13084,7 @@ const PAGE_BUILDER_AI_CAPABILITIES = {
         { path: 'uiCompositionPlan.widgets', category: 'widgets', valueKind: 'array', description: 'Widgets planejados antes da compilacao para page.widgets.' },
         { path: 'uiCompositionPlan.widgets[].key', category: 'widgets', valueKind: 'string', description: 'ID estavel do widget planejado.', critical: true },
         { path: 'uiCompositionPlan.widgets[].componentId', category: 'widgets', valueKind: 'string', description: 'Componente registrado que sera compilado para definition.id.', critical: true },
+        { path: 'uiCompositionPlan.widgets[].role', category: 'layout', valueKind: 'string', description: 'Papel semantico explicito usado na materializacao de layout; master-detail aceita master, detail, filters, actions, supporting e os slots detail-* do preset oficial.' },
         { path: 'uiCompositionPlan.widgets[].shell', category: 'widgets', valueKind: 'object', description: 'Moldura governada do widget, compilada para page.widgets[].shell sem enriquecimento do host.' },
         { path: 'uiCompositionPlan.widgets[].inputs', category: 'widgets', valueKind: 'object', description: 'Inputs canonicos do componente, compilados para definition.inputs.' },
         { path: 'uiCompositionPlan.widgets[].bindingOrder', category: 'widgets', valueKind: 'array', description: 'Ordem declarativa de binding, compilada para definition.bindingOrder.' },
@@ -14310,14 +14318,14 @@ const PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST = {
             target: { kind: 'agenticPreview', resolver: 'agentic-preview-result', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['previewId'], properties: { previewId: { type: 'string' }, compiledFormPatch: { type: 'object' } } },
             effects: [{ kind: 'compile-domain-patch', handler: 'page-builder-preview-apply', handlerContract: {
-                        reads: ['PageBuilderAiAdapter.applyCompiledFormPatch', 'compiledFormPatch.patch.page', 'PraxisAssistantTurnViewState'],
+                        reads: ['UiCompositionPlan', 'PageBuilderAiAdapter.applyUiCompositionPlan', 'ComponentMetadataRegistry', 'CompositionValidatorService.validatePage', 'compiledFormPatch.patch.page', 'PraxisAssistantTurnViewState'],
                         writes: ['DynamicPageBuilderComponent.page', 'pageChange'],
                         identityKeys: ['previewId'],
-                        failureModes: ['preview-result-invalid', 'patch-page-missing', 'runtime-page-invalid', 'patch-envelope-persistence-attempted'],
-                        description: 'Applies only compiledFormPatch.patch.page to the local runtime page; the backend envelope remains diagnostic data.',
+                        failureModes: ['preview-result-invalid', 'target-registry-missing', 'component-not-registered', 'component-not-materializable', 'port-not-registered', 'port-contract-incompatible', 'patch-page-missing', 'runtime-page-invalid', 'patch-envelope-persistence-attempted'],
+                        description: 'Preflights UiCompositionPlan against the target runtime registry and canonical Core composition validator before applying the attested WidgetPageDefinition locally.',
                     } }],
-            validators: ['preview-result-valid', 'compiled-page-patch-present', 'no-envelope-runtime-persistence', 'runtime-page-valid'],
-            affectedPaths: ['compiledFormPatch.patch.page', 'page'],
+            validators: ['preview-result-valid', 'ui-composition-target-registry-available', 'ui-composition-components-materializable', 'composition-endpoints-resolve', 'compiled-page-patch-present', 'no-envelope-runtime-persistence', 'runtime-page-valid'],
+            affectedPaths: ['uiCompositionPlan', 'compiledFormPatch.patch.page', 'page'],
             submissionImpact: 'visual-only',
             preconditions: ['agentic-preview-loaded'],
         },
@@ -14398,6 +14406,8 @@ const PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST = {
         { validatorId: 'state-json-valid', level: 'error', code: 'PAGE_BUILDER_STATE_JSON', description: 'State values must be JSON-serializable.' },
         { validatorId: 'composition-state-links-still-valid', level: 'error', code: 'PAGE_BUILDER_STATE_LINKS', description: 'State edits must not break composition links.' },
         { validatorId: 'preview-result-valid', level: 'error', code: 'PAGE_BUILDER_PREVIEW_VALID', description: 'Agentic preview result must be structurally valid.' },
+        { validatorId: 'ui-composition-target-registry-available', level: 'error', code: 'PAGE_BUILDER_UI_PLAN_TARGET_REGISTRY', description: 'UiCompositionPlan apply requires the ComponentMetadataRegistry of the target host.' },
+        { validatorId: 'ui-composition-components-materializable', level: 'error', code: 'PAGE_BUILDER_UI_PLAN_COMPONENTS_MATERIALIZABLE', description: 'Every planned component must resolve materializable metadata in the target registry.' },
         { validatorId: 'compiled-page-patch-present', level: 'error', code: 'PAGE_BUILDER_PATCH_PAGE_PRESENT', description: 'Preview envelope must include compiledFormPatch.patch.page.' },
         { validatorId: 'no-envelope-runtime-persistence', level: 'error', code: 'PAGE_BUILDER_NO_ENVELOPE_PERSISTENCE', description: 'Runtime persistence cannot save the full preview envelope.' },
         { validatorId: 'runtime-page-valid', level: 'error', code: 'PAGE_BUILDER_RUNTIME_PAGE_VALID', description: 'Runtime page must remain renderable by praxis-dynamic-page.' },
@@ -14418,7 +14428,7 @@ const PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST = {
         'Persisted wiring uses page.composition.links and must not write legacy connections.',
         'Nested component ports use component-port refs with nestedPath ending in a stable widget key.',
         'Child widget definition.inputs edits delegate to the child manifest or ComponentDocMeta.configEditor.',
-        'Agentic preview applies only compiledFormPatch.patch.page to runtime; the full patch envelope is diagnostics/audit data.',
+        'Agentic preview preflights UiCompositionPlan against the target registry and applies the attested WidgetPageDefinition; persistence rebuilds patch.page from that page while the surrounding envelope remains diagnostics/audit data.',
         'Save uses pageIdentity and ETag policy from praxis-config-starter; pageIdentity is not persisted inside WidgetPageDefinition.',
         'Settings panel apply/save/reset/reopen must preserve page settings and widget shell config without hidden normalization drift.',
     ],
@@ -14545,6 +14555,358 @@ const PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST = {
     ],
 };
 
+const MASTER_DETAIL_PRESET_ID = 'master-detail-dashboard';
+const MASTER_DETAIL_DETAIL_SLOTS = [
+    'detail-table',
+    'detail-chart-a',
+    'detail-chart-b',
+    'detail-kpis',
+];
+const MASTER_DETAIL_SLOT_REGIONS = {
+    master: 'master',
+    'detail-table': 'detail',
+    'detail-chart-a': 'detail',
+    'detail-chart-b': 'detail',
+    'detail-kpis': 'detail',
+};
+const MASTER_DETAIL_ROLE_REGIONS = {
+    master: 'master',
+    detail: 'detail',
+    filters: 'filters',
+    actions: 'actions',
+    supporting: 'supporting',
+};
+function materializeUiCompositionPlanLayout(plan) {
+    if (!isMasterDetailPlan(plan)) {
+        return {
+            layoutPresetOptions: clone$1(plan.layoutPresetOptions),
+            canvas: resolveNeutralCanvas(plan),
+            deviceLayouts: clone$1(plan.deviceLayouts),
+            slotAssignments: clone$1(plan.slotAssignments),
+            diagnostics: [],
+        };
+    }
+    const analysis = analyzeMasterDetailPlan(plan);
+    const canvas = plan.canvas
+        ? clone$1(plan.canvas)
+        : masterDetailCanvas(analysis.widgets, 12, 'desktop');
+    const deviceLayouts = plan.deviceLayouts
+        ? clone$1(plan.deviceLayouts)
+        : materializeMasterDetailDeviceLayouts(analysis.widgets, canvas);
+    return {
+        layoutPresetOptions: materializeMasterDetailPresetOptions(plan),
+        canvas,
+        deviceLayouts,
+        slotAssignments: Object.keys(analysis.slotAssignments).length
+            ? analysis.slotAssignments
+            : undefined,
+        diagnostics: analysis.diagnostics,
+    };
+}
+function validateUiCompositionPlanLayout(plan) {
+    return isMasterDetailPlan(plan) ? analyzeMasterDetailPlan(plan).errors : [];
+}
+function isMasterDetailPlan(plan) {
+    const preset = resolvePlanLayoutPreset(plan);
+    const assignedRegions = Object.values(plan.slotAssignments ?? {})
+        .map((slot) => MASTER_DETAIL_SLOT_REGIONS[String(slot || '').trim()])
+        .filter((region) => !!region);
+    const explicitRoles = (plan.widgets ?? [])
+        .map((widget) => roleRegion(widget.role))
+        .filter((region) => !!region);
+    const regions = [...assignedRegions, ...explicitRoles];
+    return (preset?.category === 'master-detail' ||
+        (regions.includes('master') && regions.includes('detail')));
+}
+function roleRegion(role) {
+    const semanticRole = String(role || '').trim();
+    return (MASTER_DETAIL_ROLE_REGIONS[semanticRole] ??
+        MASTER_DETAIL_SLOT_REGIONS[semanticRole]);
+}
+function resolvePlanLayoutPreset(plan) {
+    const layoutPreset = String(plan.layoutPreset || '').trim();
+    if (layoutPreset && BUILTIN_PAGE_LAYOUT_PRESETS[layoutPreset]) {
+        return BUILTIN_PAGE_LAYOUT_PRESETS[layoutPreset];
+    }
+    const presetFamily = typeof plan.layoutPresetOptions?.['presetFamily'] === 'string'
+        ? plan.layoutPresetOptions['presetFamily'].trim()
+        : '';
+    return presetFamily ? BUILTIN_PAGE_LAYOUT_PRESETS[presetFamily] : undefined;
+}
+function materializeMasterDetailPresetOptions(plan) {
+    const options = clone$1(plan.layoutPresetOptions) ?? {};
+    if (!resolvePlanLayoutPreset(plan) &&
+        typeof options['presetFamily'] !== 'string') {
+        options['presetFamily'] = MASTER_DETAIL_PRESET_ID;
+    }
+    return Object.keys(options).length ? options : undefined;
+}
+function analyzeMasterDetailPlan(plan) {
+    const diagnostics = [];
+    const errors = [];
+    const explicitAssignments = clone$1(plan.slotAssignments) ?? {};
+    const slotAssignments = { ...explicitAssignments };
+    const resolvedPreset = resolvePlanLayoutPreset(plan);
+    const layoutPreset = String(plan.layoutPreset || '').trim();
+    const presetFamily = typeof plan.layoutPresetOptions?.['presetFamily'] === 'string'
+        ? plan.layoutPresetOptions['presetFamily'].trim()
+        : '';
+    if (!BUILTIN_PAGE_LAYOUT_PRESETS[layoutPreset] &&
+        presetFamily &&
+        !BUILTIN_PAGE_LAYOUT_PRESETS[presetFamily]) {
+        errors.push({
+            code: 'master-detail-preset-family-unknown',
+            message: `Preset family "${presetFamily}" is not declared by the layout preset catalog.`,
+            path: 'layoutPresetOptions.presetFamily',
+        });
+    }
+    const preset = resolvedPreset ?? BUILTIN_PAGE_LAYOUT_PRESETS[MASTER_DETAIL_PRESET_ID];
+    const knownSlots = new Set(preset?.slotModel.map((slot) => slot.id) ?? []);
+    const occupiedSlots = new Map();
+    const widgets = [];
+    for (const [index, widget] of (plan.widgets ?? []).entries()) {
+        const explicitSlot = String(explicitAssignments[widget.key] || '').trim();
+        const semanticRoleRegion = roleRegion(widget.role);
+        const slotRegion = MASTER_DETAIL_SLOT_REGIONS[explicitSlot];
+        if (explicitSlot && knownSlots.size && !knownSlots.has(explicitSlot)) {
+            errors.push({
+                code: 'master-detail-slot-unknown',
+                message: `Slot "${explicitSlot}" is not declared by the resolved master-detail preset.`,
+                path: `slotAssignments.${widget.key}`,
+            });
+        }
+        if (semanticRoleRegion && slotRegion && semanticRoleRegion !== slotRegion) {
+            errors.push({
+                code: 'master-detail-role-slot-conflict',
+                message: `Widget "${widget.key}" has conflicting semantic role and slot assignment.`,
+                path: `slotAssignments.${widget.key}`,
+            });
+        }
+        const region = slotRegion ?? semanticRoleRegion ?? 'supporting';
+        if (!slotRegion && !semanticRoleRegion) {
+            diagnostics.push({
+                code: 'master-detail-widget-role-fallback',
+                message: `Widget "${widget.key}" has no recognized semantic role or preset slot and was placed in supporting content.`,
+                path: `widgets.${index}.role`,
+            });
+        }
+        widgets.push({ widget, index, region, slot: explicitSlot || undefined });
+    }
+    if (resolvedPreset && resolvedPreset.category !== 'master-detail') {
+        errors.push({
+            code: 'master-detail-preset-conflict',
+            message: 'Master and detail semantic roles require a master-detail layout preset family.',
+            path: typeof plan.layoutPresetOptions?.['presetFamily'] === 'string'
+                ? 'layoutPresetOptions.presetFamily'
+                : 'layoutPreset',
+        });
+    }
+    const masters = widgets.filter((item) => item.region === 'master');
+    const details = widgets.filter((item) => item.region === 'detail');
+    if (!masters.length) {
+        errors.push({
+            code: 'master-detail-master-required',
+            message: 'A master-detail plan must declare exactly one master widget through role or slot assignment.',
+            path: 'widgets',
+        });
+    }
+    else if (masters.length > 1) {
+        errors.push({
+            code: 'master-detail-master-ambiguous',
+            message: 'A master-detail plan cannot declare more than one master widget.',
+            path: 'widgets',
+        });
+    }
+    if (!details.length) {
+        errors.push({
+            code: 'master-detail-detail-required',
+            message: 'A master-detail plan must declare at least one detail widget through role or slot assignment.',
+            path: 'widgets',
+        });
+    }
+    for (const item of widgets) {
+        if (!item.slot)
+            continue;
+        const occupants = occupiedSlots.get(item.slot) ?? [];
+        occupiedSlots.set(item.slot, [...occupants, item.widget.key]);
+    }
+    for (const slot of preset?.slotModel ?? []) {
+        const occupants = occupiedSlots.get(slot.id) ?? [];
+        if (slot.maxItems != null && occupants.length > slot.maxItems) {
+            errors.push({
+                code: 'master-detail-slot-cardinality-exceeded',
+                message: `Slot "${slot.id}" accepts at most ${slot.maxItems} widget(s).`,
+                path: 'slotAssignments',
+            });
+        }
+    }
+    const availableDetailSlots = MASTER_DETAIL_DETAIL_SLOTS.filter((slot) => knownSlots.has(slot) && !occupiedSlots.has(slot));
+    for (const item of widgets) {
+        if (item.slot || item.region !== 'detail')
+            continue;
+        const preferredRoleSlot = exactDetailSlot(item.widget.role, knownSlots);
+        const slot = preferredRoleSlot && !occupiedSlots.has(preferredRoleSlot)
+            ? preferredRoleSlot
+            : availableDetailSlots.find((candidate) => !occupiedSlots.has(candidate));
+        if (!slot) {
+            diagnostics.push({
+                code: 'master-detail-detail-slot-fallback',
+                message: `Widget "${item.widget.key}" exceeded the available detail slots and remains deterministic supporting content for grouping.`,
+                path: `widgets.${item.index}.role`,
+            });
+            continue;
+        }
+        slotAssignments[item.widget.key] = slot;
+        item.slot = slot;
+        occupiedSlots.set(slot, [item.widget.key]);
+    }
+    const master = masters[0];
+    if (master && !master.slot && knownSlots.has('master')) {
+        slotAssignments[master.widget.key] = 'master';
+        master.slot = 'master';
+    }
+    return { widgets, slotAssignments, diagnostics, errors };
+}
+function exactDetailSlot(role, knownSlots) {
+    const candidate = String(role || '').trim();
+    return MASTER_DETAIL_SLOT_REGIONS[candidate] === 'detail' &&
+        knownSlots.has(candidate)
+        ? candidate
+        : undefined;
+}
+function resolveNeutralCanvas(plan) {
+    if (plan.canvas)
+        return clone$1(plan.canvas);
+    if (!plan.widgets?.length)
+        return undefined;
+    if (plan.layout && !plan.layoutPreset?.trim())
+        return undefined;
+    const items = {};
+    let row = 1;
+    for (const widget of plan.widgets ?? []) {
+        items[widget.key] = { col: 1, row, colSpan: 12, rowSpan: 4 };
+        row += 4;
+    }
+    return defaultCanvas(items, 12, 'desktop');
+}
+function masterDetailCanvas(semantics, columns, device) {
+    const items = {};
+    const filters = semantics.filter((item) => item.region === 'filters');
+    const actions = semantics.filter((item) => item.region === 'actions');
+    const masters = semantics.filter((item) => item.region === 'master');
+    const details = semantics.filter((item) => item.region === 'detail');
+    const supporting = semantics.filter((item) => item.region === 'supporting');
+    let row = 1;
+    if (device === 'desktop' && filters.length && actions.length) {
+        const filterEnd = placeHorizontal(items, filters, row, 1, 8, 'filters');
+        const actionEnd = placeHorizontal(items, actions, row, 9, 4, 'actions');
+        row = Math.max(filterEnd, actionEnd);
+    }
+    else {
+        row = placeStacked(items, filters, row, columns, device);
+        row = placeStacked(items, actions, row, columns, device);
+    }
+    if (device === 'desktop') {
+        const contentRow = row;
+        let detailRow = contentRow;
+        for (const item of details) {
+            const rowSpan = preferredRowSpan(item, device);
+            items[item.widget.key] = { col: 5, row: detailRow, colSpan: 8, rowSpan };
+            detailRow += rowSpan;
+        }
+        const contentHeight = Math.max(8, detailRow - contentRow);
+        for (const item of masters) {
+            items[item.widget.key] = {
+                col: 1,
+                row: contentRow,
+                colSpan: 4,
+                rowSpan: contentHeight,
+            };
+        }
+        row = contentRow + contentHeight;
+    }
+    else {
+        row = placeStacked(items, masters, row, columns, device);
+        row = placeStacked(items, details, row, columns, device);
+    }
+    placeStacked(items, supporting, row, columns, device);
+    return defaultCanvas(items, columns, device);
+}
+function placeHorizontal(items, semantics, row, col, colSpan, region) {
+    let nextRow = row;
+    for (const item of semantics) {
+        const rowSpan = preferredRowSpan({ ...item, region }, 'desktop');
+        items[item.widget.key] = { col, row: nextRow, colSpan, rowSpan };
+        nextRow += rowSpan;
+    }
+    return nextRow;
+}
+function placeStacked(items, semantics, row, columns, device) {
+    let nextRow = row;
+    for (const item of semantics) {
+        const rowSpan = preferredRowSpan(item, device);
+        items[item.widget.key] = {
+            col: 1,
+            row: nextRow,
+            colSpan: columns,
+            rowSpan,
+        };
+        nextRow += rowSpan;
+    }
+    return nextRow;
+}
+function materializeMasterDetailDeviceLayouts(semantics, desktopCanvas) {
+    const tablet = masterDetailCanvas(semantics, 6, 'tablet');
+    const mobile = masterDetailCanvas(semantics, 1, 'mobile');
+    return {
+        desktop: { canvas: canvasVariant(desktopCanvas) },
+        tablet: { canvas: canvasVariant(tablet) },
+        mobile: { canvas: canvasVariant(mobile) },
+    };
+}
+function canvasVariant(canvas) {
+    return {
+        columns: canvas.columns,
+        rowUnit: canvas.rowUnit,
+        gap: canvas.gap,
+        autoRows: canvas.autoRows,
+        ...(canvas.collisionPolicy
+            ? { collisionPolicy: canvas.collisionPolicy }
+            : {}),
+        items: clone$1(canvas.items),
+    };
+}
+function defaultCanvas(items, columns, device) {
+    return {
+        mode: 'grid',
+        columns,
+        rowUnit: device === 'desktop' ? '80px' : device === 'tablet' ? '72px' : '64px',
+        gap: device === 'desktop' ? '16px' : '12px',
+        autoRows: 'fixed',
+        items,
+    };
+}
+function preferredRowSpan(item, device) {
+    if (item.region === 'filters' || item.region === 'actions')
+        return 2;
+    if (item.region === 'master')
+        return device === 'desktop' ? 8 : 6;
+    if (item.slot === 'detail-kpis')
+        return 2;
+    if (item.slot === 'detail-chart-a' || item.slot === 'detail-chart-b')
+        return 5;
+    if (item.slot === 'detail-table')
+        return device === 'mobile' ? 6 : 7;
+    if (item.region === 'detail')
+        return device === 'mobile' ? 6 : 7;
+    return 4;
+}
+function clone$1(value) {
+    if (value === undefined || value === null)
+        return value;
+    return JSON.parse(JSON.stringify(value));
+}
+
 /**
  * Pure, fail-closed normalization for an exact template reference.
  *
@@ -14606,16 +14968,17 @@ function compileUiCompositionPlan(plan) {
     }
     const bindings = expandedBindings(plan);
     const widgets = materializeContextScopeInputs(plan, plan.widgets.map((widget) => toWidgetInstance(widget, bindings)));
+    const layoutMaterialization = materializeUiCompositionPlanLayout(plan);
     const page = {
         i18n: clone(plan.i18n),
         context: clone(plan.context),
         layout: clone(plan.layout),
         layoutPreset: plan.layoutPreset,
-        layoutPresetOptions: clone(plan.layoutPresetOptions),
-        canvas: resolveCanvas(plan),
-        deviceLayouts: clone(plan.deviceLayouts),
+        layoutPresetOptions: layoutMaterialization.layoutPresetOptions,
+        canvas: layoutMaterialization.canvas,
+        deviceLayouts: layoutMaterialization.deviceLayouts,
         grouping: clone(plan.grouping),
-        slotAssignments: clone(plan.slotAssignments),
+        slotAssignments: layoutMaterialization.slotAssignments,
         state: clone(plan.state),
         themePreset: plan.themePreset,
         widgets,
@@ -14627,7 +14990,7 @@ function compileUiCompositionPlan(plan) {
     return {
         valid: true,
         page: materializeLocalizedFallbacks(page),
-        diagnostics: [],
+        diagnostics: layoutMaterialization.diagnostics,
     };
 }
 const SHA_256_PATTERN = /^[0-9a-f]{64}$/;
@@ -14714,95 +15077,6 @@ function materializeLocalizedFallbacks(page) {
     visit(materialized);
     return materialized;
 }
-function resolveCanvas(plan) {
-    if (plan.canvas) {
-        return clone(plan.canvas);
-    }
-    if (!plan.widgets?.length) {
-        return undefined;
-    }
-    // An explicitly authored flow/grid layout is already a complete spatial
-    // decision. Synthesizing a canvas here would silently take precedence over
-    // that layout in the runtime. Preset- or role-driven plans still opt into
-    // automatic canvas materialization below.
-    if (plan.layout && !plan.layoutPreset?.trim() && !isMasterDetailPlan(plan)) {
-        return undefined;
-    }
-    if (isMasterDetailPlan(plan)) {
-        return masterDetailCanvas(plan.widgets);
-    }
-    return stackedCanvas(plan.widgets);
-}
-function isMasterDetailPlan(plan) {
-    const preset = (plan.layoutPreset ?? '').toLocaleLowerCase('en-US');
-    const hasPreset = preset.includes('master-detail') || preset.includes('master detail');
-    const hasSemanticRoles = plan.widgets.some((widget) => widget.role === 'master')
-        && plan.widgets.some((widget) => widget.role === 'detail');
-    return hasPreset || hasSemanticRoles;
-}
-function masterDetailCanvas(widgets) {
-    const master = widgets.find((widget) => widget.role === 'master') ?? widgets[0];
-    const details = widgets.filter((widget) => widget.key !== master.key);
-    const items = {};
-    let row = 1;
-    items[master.key] = {
-        col: 1,
-        row,
-        colSpan: 12,
-        rowSpan: preferredRowSpan(master),
-    };
-    row += items[master.key].rowSpan;
-    for (const widget of details) {
-        const rowSpan = preferredRowSpan(widget);
-        items[widget.key] = {
-            col: 1,
-            row,
-            colSpan: 12,
-            rowSpan,
-        };
-        row += rowSpan;
-    }
-    return defaultCanvas(items);
-}
-function stackedCanvas(widgets) {
-    const items = {};
-    let row = 1;
-    for (const widget of widgets) {
-        const rowSpan = preferredRowSpan(widget);
-        items[widget.key] = {
-            col: 1,
-            row,
-            colSpan: 12,
-            rowSpan,
-        };
-        row += rowSpan;
-    }
-    return defaultCanvas(items);
-}
-function defaultCanvas(items) {
-    return {
-        mode: 'grid',
-        columns: 12,
-        rowUnit: '80px',
-        gap: '16px',
-        autoRows: 'fixed',
-        items,
-    };
-}
-function preferredRowSpan(widget) {
-    const componentId = widget.componentId.toLocaleLowerCase('en-US');
-    if (componentId.includes('dynamic-form') || widget.role === 'detail')
-        return 8;
-    if (componentId.includes('table') || componentId.includes('list'))
-        return 7;
-    if (componentId.includes('chart'))
-        return 5;
-    if (componentId.includes('kpi') || componentId.includes('filter'))
-        return 2;
-    if (componentId.includes('rich-content'))
-        return 3;
-    return 4;
-}
 function validateUiCompositionPlan(plan) {
     const diagnostics = [];
     const widgetKeys = new Set();
@@ -14866,6 +15140,7 @@ function validateUiCompositionPlan(plan) {
     validateGrouping(plan.grouping, widgetKeys, diagnostics);
     validateDeviceLayouts(plan.deviceLayouts, widgetKeys, diagnostics);
     validateSlotAssignments(plan.slotAssignments, widgetKeys, diagnostics);
+    diagnostics.push(...validateUiCompositionPlanLayout(plan));
     return diagnostics;
 }
 function validateSelectionSync(selectionSync, widgetKeys, diagnostics, path) {
@@ -15529,6 +15804,67 @@ function clone(value) {
     }
 }
 
+/**
+ * Fail-closed pre-apply attestation against the registry that will materialize the page.
+ * It does not render widgets, execute links, call HTTP endpoints or persist configuration.
+ */
+function preflightUiCompositionPlan(plan, registry, validator = new CompositionValidatorService()) {
+    const compiled = compileUiCompositionPlan(plan);
+    const compilerDiagnostics = compiled.diagnostics.map((diagnostic, index) => fromCompilerDiagnostic(diagnostic, index, !compiled.valid));
+    if (!compiled.valid) {
+        return {
+            valid: false,
+            page: null,
+            diagnostics: compilerDiagnostics,
+        };
+    }
+    if (!registry) {
+        return {
+            valid: false,
+            page: null,
+            diagnostics: [
+                ...compilerDiagnostics,
+                createAuthoringDiagnostic('ui-composition-plan:target-registry-required', 'UI_COMPOSITION_TARGET_REGISTRY_REQUIRED', 'The target ComponentMetadataRegistry is required before applying a UiCompositionPlan.', undefined, true, 'target-registry'),
+            ],
+        };
+    }
+    const links = (compiled.page.composition?.links || []);
+    const semanticDiagnostics = validator.validatePage(compiled.page, {
+        registry,
+        links,
+    });
+    const diagnostics = [...compilerDiagnostics, ...semanticDiagnostics];
+    const blocking = diagnostics.some((diagnostic) => diagnostic.blocking !== false
+        && (diagnostic.severity === 'error' || diagnostic.severity === 'fatal'));
+    return blocking
+        ? { valid: false, page: null, diagnostics }
+        : { valid: true, page: compiled.page, diagnostics };
+}
+function fromCompilerDiagnostic(diagnostic, index, blocking) {
+    return createAuthoringDiagnostic(`ui-composition-plan:compiler:${index}:${diagnostic.code}:${diagnostic.path || 'page'}`, diagnostic.code, diagnostic.message, diagnostic.path, blocking, blocking ? 'document-validation' : 'layout-materialization');
+}
+function createAuthoringDiagnostic(id, code, message, path, blocking, stage) {
+    return {
+        id,
+        code,
+        severity: blocking ? 'error' : 'warning',
+        phase: 'page-lint',
+        message,
+        summary: message,
+        subject: {
+            kind: 'page',
+            path,
+        },
+        details: {
+            provenance: 'ui-composition-plan-preflight',
+            stage,
+        },
+        source: 'authoring',
+        blocking,
+        createdAt: new Date().toISOString(),
+    };
+}
+
 const RUNTIME_AUTHORING_METADATA_INPUTS = [
     'schemaVerification',
     'schemaEvidenceSource',
@@ -15685,25 +16021,32 @@ class PageBuilderAiAdapter {
         return this.applyPatch({ page: materializedPage }, 'agentic-authoring.compiled-form-patch');
     }
     async applyUiCompositionPlan(plan) {
-        const compiled = compileUiCompositionPlan(plan);
-        if (!compiled.valid) {
+        const preflight = preflightUiCompositionPlan(plan, this.registry);
+        if (!preflight.valid) {
             return {
                 success: false,
-                error: compiled.diagnostics.map((diagnostic) => diagnostic.message).join('\n'),
-                warnings: compiled.diagnostics.map((diagnostic) => diagnostic.path
-                    ? `${diagnostic.code} at ${diagnostic.path}`
+                error: preflight.diagnostics.map((diagnostic) => diagnostic.subject.path
+                    ? `${diagnostic.code} at ${diagnostic.subject.path}: ${diagnostic.message}`
+                    : `${diagnostic.code}: ${diagnostic.message}`).join('\n'),
+                warnings: preflight.diagnostics.map((diagnostic) => diagnostic.subject.path
+                    ? `${diagnostic.code} at ${diagnostic.subject.path}`
                     : diagnostic.code),
+                diagnostics: preflight.diagnostics,
             };
         }
         try {
-            const warnings = [];
+            const warnings = preflight.diagnostics.map((diagnostic) => diagnostic.subject.path
+                ? `${diagnostic.code} at ${diagnostic.subject.path}`
+                : diagnostic.code);
             const current = this.getCurrentConfig();
             const next = this.normalizeConfigForRuntime({
                 ...current,
-                page: this.clone(compiled.page),
+                page: this.clone(preflight.page),
             }, warnings);
             this.applyConfig(next);
-            return warnings.length ? { success: true, warnings } : { success: true };
+            return warnings.length
+                ? { success: true, warnings, diagnostics: preflight.diagnostics }
+                : { success: true, diagnostics: preflight.diagnostics };
         }
         catch (error) {
             const message = error instanceof Error ? error.message : 'Unknown error applying UI composition plan';
@@ -24178,11 +24521,20 @@ class DynamicPageBuilderComponent {
     async applyAgenticPreviewLocally(result) {
         const adapter = new PageBuilderAiAdapter(this.createAdapterHost(), this.componentMetadata);
         const snapshot = adapter.createSnapshot();
-        const applied = await (result.compiledFormPatch?.patch?.page
-            ? adapter.applyCompiledFormPatch(result.compiledFormPatch)
-            : result.uiCompositionPlan
-                ? adapter.applyUiCompositionPlan(result.uiCompositionPlan)
-                : adapter.applyCompiledFormPatch(result.compiledFormPatch));
+        const applied = await (result.uiCompositionPlan
+            ? adapter.applyUiCompositionPlan(result.uiCompositionPlan)
+            : adapter.applyCompiledFormPatch(result.compiledFormPatch));
+        if (applied.warnings?.length) {
+            result.warnings = Array.from(new Set([...(result.warnings || []), ...applied.warnings]));
+        }
+        if (!applied.success && applied.diagnostics?.length) {
+            result.failureCodes = Array.from(new Set([
+                ...(result.failureCodes || []),
+                ...applied.diagnostics
+                    .filter((diagnostic) => diagnostic.blocking !== false)
+                    .map((diagnostic) => diagnostic.code),
+            ]));
+        }
         if (!applied.success && this.isAgenticTableContractError(applied.error)) {
             await adapter.restoreSnapshot(snapshot);
             return {
@@ -24844,9 +25196,6 @@ class DynamicPageBuilderComponent {
         return value;
     }
     resolvePreviewCompiledFormPatch(preview) {
-        if (preview.compiledFormPatch?.patch?.page) {
-            return preview.compiledFormPatch;
-        }
         if (preview.uiCompositionPlan) {
             const planDiagnostics = this.toRecord(this.toRecord(preview.uiCompositionPlan)?.['diagnostics']);
             return {
@@ -24858,6 +25207,9 @@ class DynamicPageBuilderComponent {
                 },
             };
         }
+        if (preview.compiledFormPatch?.patch?.page) {
+            return preview.compiledFormPatch;
+        }
         return preview.compiledFormPatch;
     }
     focusCanvasWidget(widgetKey) {
@@ -26395,4 +26747,4 @@ function providePraxisPageBuilderMetadata() {
  * Generated bundle index. Do not edit.
  */
 
-export { ComponentPaletteDialogComponent, ConfirmDialogComponent, ConnectionEditorComponent, DynamicPageBuilderComponent, DynamicPageConfigEditorComponent, FloatingToolbarComponent, PAGE_BUILDER_AGENTIC_AUTHORING_OPTIONS, PAGE_BUILDER_AI_CAPABILITIES, PAGE_BUILDER_COMPONENT_CONTEXT_PACK, PAGE_BUILDER_WIDGET_AI_CATALOGS, PLACEHOLDER, PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST, PRAXIS_PAGE_BUILDER_COMPONENT_METADATA, PageBuilderAgenticAuthoringService, PageConfigEditorComponent, TileToolbarComponent, WidgetShellEditorComponent, clearWidgetAiCatalogs, compileUiCompositionPlan, getPageAiCatalog, getWidgetAiCapabilities, providePageBuilderWidgetAiCatalogs, providePraxisPageBuilderMetadata, registerWidgetAiCatalog, registerWidgetAiCatalogs, resolveUiCompositionPlanTemplate, validateUiCompositionPlan };
+export { ComponentPaletteDialogComponent, ConfirmDialogComponent, ConnectionEditorComponent, DynamicPageBuilderComponent, DynamicPageConfigEditorComponent, FloatingToolbarComponent, PAGE_BUILDER_AGENTIC_AUTHORING_OPTIONS, PAGE_BUILDER_AI_CAPABILITIES, PAGE_BUILDER_COMPONENT_CONTEXT_PACK, PAGE_BUILDER_WIDGET_AI_CATALOGS, PLACEHOLDER, PRAXIS_PAGE_BUILDER_AUTHORING_MANIFEST, PRAXIS_PAGE_BUILDER_COMPONENT_METADATA, PageBuilderAgenticAuthoringService, PageConfigEditorComponent, TileToolbarComponent, WidgetShellEditorComponent, clearWidgetAiCatalogs, compileUiCompositionPlan, getPageAiCatalog, getWidgetAiCapabilities, preflightUiCompositionPlan, providePageBuilderWidgetAiCatalogs, providePraxisPageBuilderMetadata, registerWidgetAiCatalog, registerWidgetAiCatalogs, resolveUiCompositionPlanTemplate, validateUiCompositionPlan };