@praxisui/page-builder 9.0.0-beta.10 → 9.0.0-beta.11

package/fesm2022/praxisui-page-builder.mjs

@@ -12999,7 +12999,7 @@ function compileUiCompositionPlan(plan) {
         page: {
             layoutPreset: plan.layoutPreset,
             layoutPresetOptions: clone(plan.layoutPresetOptions),
-            canvas: clone(plan.canvas),
+            canvas: resolveCanvas(plan),
             deviceLayouts: clone(plan.deviceLayouts),
             grouping: clone(plan.grouping),
             slotAssignments: clone(plan.slotAssignments),
@@ -13014,6 +13014,88 @@ function compileUiCompositionPlan(plan) {
         diagnostics: [],
     };
 }
+function resolveCanvas(plan) {
+    if (plan.canvas) {
+        return clone(plan.canvas);
+    }
+    if (!plan.widgets?.length) {
+        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();
@@ -14165,6 +14247,7 @@ class PageBuilderAgenticAuthoringTurnFlow {
                     diagnostics: this.buildTurnDiagnostics(intentResolution, preview),
                 };
             }
+            this.normalizeDashboardPreviewPresentation(intentResolution, preview);
             const applied = await this.context.applyLocalPreview(preview);
             if (!applied.success) {
                 const message = applied.error || this.context.tx('agentic.errors.applyLocal', 'Preview could not be applied.');
@@ -14326,6 +14409,7 @@ class PageBuilderAgenticAuthoringTurnFlow {
         return this.completeExecutableStreamPreview(request, prompt, intentResolution, undefined);
     }
     async applyDashboardRepairPreview(preview, intentResolution) {
+        this.normalizeDashboardPreviewPresentation(intentResolution, preview);
         const applied = await this.context.applyLocalPreview(preview);
         if (!applied.success) {
             const message = applied.error || this.context.tx('agentic.errors.applyLocal', 'Preview could not be applied.');
@@ -15543,6 +15627,7 @@ class PageBuilderAgenticAuthoringTurnFlow {
                     diagnostics: this.buildTurnDiagnostics(intentResolution, preview),
                 };
             }
+            this.normalizeDashboardPreviewPresentation(intentResolution, preview);
             const applied = await this.context.applyLocalPreview(preview);
             if (!applied.success) {
                 const message = applied.error || this.context.tx('agentic.errors.applyLocal', 'Preview could not be applied.');
@@ -15692,6 +15777,139 @@ class PageBuilderAgenticAuthoringTurnFlow {
             validation,
         };
     }
+    normalizeDashboardPreviewPresentation(intentResolution, preview) {
+        if (!this.isDashboardQualityPreview(intentResolution, preview)) {
+            return;
+        }
+        const patch = this.toJsonObject(preview.compiledFormPatch)?.['patch'];
+        const page = this.toJsonObject(this.toJsonObject(patch)?.['page']);
+        if (page) {
+            this.normalizeDashboardPagePresentation(intentResolution, page);
+        }
+        const plan = this.toJsonObject(preview.uiCompositionPlan);
+        if (plan) {
+            this.normalizeDashboardPagePresentation(intentResolution, plan);
+            for (const widget of this.arrayFromUnknown(plan['widgets'])) {
+                const normalizedWidget = this.toJsonObject(widget);
+                if (normalizedWidget) {
+                    this.normalizeDashboardWidgetPresentation(intentResolution, normalizedWidget);
+                }
+            }
+        }
+    }
+    normalizeDashboardPagePresentation(intentResolution, page) {
+        for (const widget of this.dashboardPageWidgets(page)) {
+            this.normalizeDashboardWidgetPresentation(intentResolution, widget);
+        }
+    }
+    normalizeDashboardWidgetPresentation(intentResolution, widget) {
+        const resourcePath = this.dashboardWidgetResourcePath(widget)
+            ?? this.intentResourcePath(intentResolution);
+        const businessTitle = this.dashboardBusinessTitle(resourcePath);
+        if (!businessTitle) {
+            return;
+        }
+        const shell = this.toJsonObject(widget['shell']);
+        if (shell) {
+            if (this.isTechnicalDashboardResourceTitle(this.readString(shell, 'title'), resourcePath)) {
+                shell['title'] = businessTitle;
+            }
+            const subtitle = this.readString(shell, 'subtitle');
+            if (subtitle && this.containsTechnicalDashboardResourceLabel(subtitle, resourcePath)) {
+                shell['subtitle'] = this.dashboardBusinessSubtitle(businessTitle);
+            }
+            widget['shell'] = shell;
+        }
+        const inputs = this.dashboardWidgetInputs(widget);
+        let inputsChanged = false;
+        if (this.isTechnicalDashboardResourceTitle(this.readString(inputs, 'title'), resourcePath)) {
+            inputs['title'] = businessTitle;
+            inputsChanged = true;
+        }
+        const inputSubtitle = this.readString(inputs, 'subtitle');
+        if (inputSubtitle && this.containsTechnicalDashboardResourceLabel(inputSubtitle, resourcePath)) {
+            inputs['subtitle'] = this.dashboardBusinessSubtitle(businessTitle);
+            inputsChanged = true;
+        }
+        if (inputsChanged) {
+            this.setDashboardWidgetInputs(widget, inputs);
+        }
+    }
+    dashboardWidgetResourcePath(widget) {
+        const inputs = this.dashboardWidgetInputs(widget);
+        const source = this.toJsonObject(inputs['source']);
+        return this.readString(inputs, 'resourcePath')
+            ?? this.readString(source ?? {}, 'resource')
+            ?? this.readString(source ?? {}, 'resourcePath')
+            ?? null;
+    }
+    intentResourcePath(intentResolution) {
+        const selectedCandidate = this.toJsonObject(intentResolution.selectedCandidate);
+        const target = this.toJsonObject(intentResolution.target);
+        const contextHints = this.toJsonObject(intentResolution.contextHints);
+        return this.readString(selectedCandidate ?? {}, 'resourcePath')
+            ?? this.readString(target ?? {}, 'resourcePath')
+            ?? this.readString(contextHints ?? {}, 'resourcePath')
+            ?? null;
+    }
+    isTechnicalDashboardResourceTitle(value, resourcePath) {
+        const normalized = this.normalizeText(value ?? '');
+        if (!normalized) {
+            return false;
+        }
+        if (normalized.includes('/api/')) {
+            return true;
+        }
+        const resourceLabel = this.normalizeText(this.resourceLabelFromPath(resourcePath));
+        if (resourceLabel && normalized === resourceLabel) {
+            return true;
+        }
+        return /\b(vw|view|analytics|analytic|indicadores)\b/.test(normalized);
+    }
+    containsTechnicalDashboardResourceLabel(value, resourcePath) {
+        const normalized = this.normalizeText(value);
+        if (normalized.includes('/api/') || /\b(vw|view)\b/.test(normalized)) {
+            return true;
+        }
+        const resourceLabel = this.normalizeText(this.resourceLabelFromPath(resourcePath));
+        return !!resourceLabel && normalized.includes(resourceLabel);
+    }
+    dashboardBusinessTitle(resourcePath) {
+        const subject = this.dashboardBusinessSubject(resourcePath);
+        return subject ? `Dashboard de ${subject}` : null;
+    }
+    dashboardBusinessSubtitle(title) {
+        return `Visao executiva orientada a decisao para ${title.replace(/^Dashboard de\s+/i, '')}.`;
+    }
+    dashboardBusinessSubject(resourcePath) {
+        const label = this.resourceLabelFromPath(resourcePath);
+        if (!label) {
+            return null;
+        }
+        const words = label
+            .replace(/\b(vw|view|analytics|analytic|indicadores|dashboard|resource)\b/gi, ' ')
+            .replace(/[_-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim()
+            .toLowerCase();
+        if (!words) {
+            return null;
+        }
+        return words;
+    }
+    resourceLabelFromPath(resourcePath) {
+        if (!resourcePath) {
+            return '';
+        }
+        return resourcePath
+            .split('?')[0]
+            .split('/')
+            .filter(Boolean)
+            .pop()
+            ?.replace(/[_-]+/g, ' ')
+            .replace(/\s+/g, ' ')
+            .trim() ?? '';
+    }
     extractDashboardPlannerDiagnostics(plan) {
         const diagnostics = this.toJsonObject(plan?.['diagnostics']);
         if (!diagnostics) {
@@ -18127,6 +18345,7 @@ class DynamicPageBuilderComponent {
         margin: 24,
     }), ...(ngDevMode ? [{ debugName: "agenticAuthoringPanelLayout" }] : /* istanbul ignore next */ []));
     previewMode = false;
+    runtimePreviewPageCache;
     agenticComponentCapabilities;
     agenticComponentCapabilitiesPromise;
     agenticTurnController;
@@ -18164,6 +18383,18 @@ class DynamicPageBuilderComponent {
     isPreviewMode() {
         return this.previewMode;
     }
+    runtimePage() {
+        const page = this.currentPage();
+        if (!this.previewMode) {
+            return page;
+        }
+        if (this.runtimePreviewPageCache?.source === page) {
+            return this.runtimePreviewPageCache.value;
+        }
+        const value = this.toPresentationRuntimePage(page);
+        this.runtimePreviewPageCache = { source: page, value };
+        return value;
+    }
     builderModeLabel() {
         if (this.previewMode) {
             return this.tx('builderMode.preview', 'Prévia');
@@ -18219,11 +18450,7 @@ class DynamicPageBuilderComponent {
     togglePreview() {
         this.previewMode = !this.previewMode;
         if (this.previewMode) {
-            this.connectionsViewerOpen.set(false);
-            this.agenticAuthoringLlmDiagnostics.set(null);
-            this.sharedRuleCockpitCollapsed.set(true);
-            this.projectKnowledgeCockpitCollapsed.set(true);
-            this.selectedWidgetKey.set(null);
+            this.enterPreviewMode();
         }
     }
     toggleAgenticAuthoringLlmDiagnostics() {
@@ -18560,12 +18787,19 @@ class DynamicPageBuilderComponent {
         this.agenticAuthoringPanelLayout.set(layout);
     }
     agenticAuthoringReviewRailActive() {
-        return this.showSettings()
-            && this.enableAgenticAuthoring
-            && this.agenticAuthoringOpen()
+        return this.showAgenticAuthoringPanel()
             && !!this.agenticAuthoringPreviewResult()?.valid
             && !this.agenticAuthoringPanelLayoutTouched;
     }
+    showAgenticAuthoringPanel() {
+        if (!this.enableAgenticAuthoring || !this.agenticAuthoringOpen()) {
+            return false;
+        }
+        if (this.showSettings()) {
+            return true;
+        }
+        return this.previewMode && this.hasAgenticAuthoringSession();
+    }
     showAgenticAuthoringDock() {
         return this.showSettings()
             && this.enableAgenticAuthoring
@@ -19147,7 +19381,7 @@ class DynamicPageBuilderComponent {
                 id: 'semantic-decision-resource',
                 kind: 'custom',
                 label: this.tx('agentic.context.semanticDecisionResource', 'Fonte'),
-                value: this.humanizeAgenticResourcePath(resourcePath),
+                value: this.agenticSemanticResourceLabel(selectedResource) ?? this.humanizeAgenticResourcePath(resourcePath),
                 icon: 'dataset',
             });
         }
@@ -19202,6 +19436,15 @@ class DynamicPageBuilderComponent {
             .replace(/[-_]+/g, ' ')
             .replace(/\b\w/g, (char) => char.toUpperCase());
     }
+    agenticSemanticResourceLabel(resource) {
+        return this.trimmedString(resource?.['selectedResourceLabel'])
+            ?? this.trimmedString(resource?.['resourceLabel'])
+            ?? this.trimmedString(resource?.['publicLabel'])
+            ?? this.trimmedString(resource?.['displayName'])
+            ?? this.trimmedString(resource?.['title'])
+            ?? this.trimmedString(resource?.['label'])
+            ?? this.trimmedString(resource?.['name']);
+    }
     humanizeAgenticDecisionSummary(operationKind, artifactKind, changeKind) {
         const operation = this.humanizeAgenticOperationKind(operationKind);
         const artifact = this.humanizeAgenticArtifactKind(artifactKind);
@@ -20479,8 +20722,41 @@ class DynamicPageBuilderComponent {
                 error: this.tx('agentic.errors.invalidTableContract', 'Encontrei a fonte de dados, mas a tabela proposta usa informações que esse componente não aceita. Vou ajustar para usar apenas campos compatíveis.'),
             };
         }
+        if (applied.success && this.enableCustomization) {
+            this.enterPreviewMode();
+        }
         return applied;
     }
+    enterPreviewMode() {
+        this.previewMode = true;
+        this.runtimePreviewPageCache = undefined;
+        this.connectionsViewerOpen.set(false);
+        this.agenticAuthoringLlmDiagnostics.set(null);
+        this.sharedRuleCockpitCollapsed.set(true);
+        this.projectKnowledgeCockpitCollapsed.set(true);
+        this.selectedWidgetKey.set(null);
+    }
+    toPresentationRuntimePage(page) {
+        const cloned = this.clonePage(page);
+        cloned.widgets = (cloned.widgets || []).map((widget) => this.toPresentationRuntimeWidget(widget));
+        return cloned;
+    }
+    toPresentationRuntimeWidget(widget) {
+        const inputs = widget.definition?.inputs;
+        if (!inputs || inputs['enableCustomization'] !== true) {
+            return widget;
+        }
+        return {
+            ...widget,
+            definition: {
+                ...widget.definition,
+                inputs: {
+                    ...inputs,
+                    enableCustomization: false,
+                },
+            },
+        };
+    }
     async applyAgenticTurnState(state) {
         const preview = state.preview ?? null;
         const handoff = this.resolveAgenticSharedRuleHandoff(state);
@@ -20789,7 +21065,32 @@ class DynamicPageBuilderComponent {
     resolveAgenticSemanticDecision(diagnostics) {
         const intentResolution = this.toRecord(diagnostics?.['intentResolution']);
         const semanticDecision = this.toRecord(intentResolution?.['semanticDecision']);
-        return semanticDecision ? semanticDecision : null;
+        if (!semanticDecision) {
+            return null;
+        }
+        const selectedResource = this.toRecord(semanticDecision['selectedResource']);
+        if (!selectedResource) {
+            return semanticDecision;
+        }
+        const selectedResourceLabel = this.agenticSemanticResourceLabel(selectedResource);
+        if (selectedResourceLabel) {
+            return semanticDecision;
+        }
+        const selectedCandidate = this.toRecord(intentResolution?.['selectedCandidate']);
+        const contextHints = this.toRecord(intentResolution?.['contextHints']);
+        const label = this.agenticSemanticResourceLabel(semanticDecision)
+            ?? this.agenticSemanticResourceLabel(selectedCandidate)
+            ?? this.agenticSemanticResourceLabel(contextHints);
+        if (!label) {
+            return semanticDecision;
+        }
+        return {
+            ...semanticDecision,
+            selectedResource: {
+                ...selectedResource,
+                label,
+            },
+        };
     }
     cloneAgenticContextHints(contextHints) {
         if (!contextHints || typeof contextHints !== 'object' || Array.isArray(contextHints)) {
@@ -21126,7 +21427,7 @@ class DynamicPageBuilderComponent {
 
       <praxis-dynamic-page
         #runtime
-        [page]="currentPage()"
+        [page]="runtimePage()"
         [context]="context"
         [strictValidation]="strictValidation"
         [autoPersist]="false"
@@ -21135,7 +21436,7 @@ class DynamicPageBuilderComponent {
         [pageIdentity]="pageIdentity"
         [componentInstanceId]="componentInstanceId"
         [pageEditorComponent]="pageEditorComponent"
-        [showWidgetAssistantButton]="enableAgenticAuthoring"
+        [showWidgetAssistantButton]="showSettings() && enableAgenticAuthoring"
         (pageChange)="onRuntimePageChange($event)"
         (widgetEvent)="onRuntimeWidgetEvent($event)"
         (widgetSelectionChange)="onRuntimeWidgetSelectionChange($event)"
@@ -21151,7 +21452,7 @@ class DynamicPageBuilderComponent {
         (close)="connectionsViewerOpen.set(false)"
         />
     
-      @if (showSettings() && enableAgenticAuthoring && agenticAuthoringOpen()) {
+      @if (showAgenticAuthoringPanel()) {
         <praxis-ai-assistant-shell
           panelTestId="page-builder-agentic-authoring-panel"
           testIdPrefix="page-builder-agentic"
@@ -21617,7 +21918,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
 
       <praxis-dynamic-page
         #runtime
-        [page]="currentPage()"
+        [page]="runtimePage()"
         [context]="context"
         [strictValidation]="strictValidation"
         [autoPersist]="false"
@@ -21626,7 +21927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [pageIdentity]="pageIdentity"
         [componentInstanceId]="componentInstanceId"
         [pageEditorComponent]="pageEditorComponent"
-        [showWidgetAssistantButton]="enableAgenticAuthoring"
+        [showWidgetAssistantButton]="showSettings() && enableAgenticAuthoring"
         (pageChange)="onRuntimePageChange($event)"
         (widgetEvent)="onRuntimeWidgetEvent($event)"
         (widgetSelectionChange)="onRuntimeWidgetSelectionChange($event)"
@@ -21642,7 +21943,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         (close)="connectionsViewerOpen.set(false)"
         />
     
-      @if (showSettings() && enableAgenticAuthoring && agenticAuthoringOpen()) {
+      @if (showAgenticAuthoringPanel()) {
         <praxis-ai-assistant-shell
           panelTestId="page-builder-agentic-authoring-panel"
           testIdPrefix="page-builder-agentic"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/page-builder",
-  "version": "9.0.0-beta.10",
+  "version": "9.0.0-beta.11",
   "description": "Page and widget builder utilities for Praxis UI (grid, dynamic widgets, editors).",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -8,9 +8,9 @@
     "@angular/forms": "^21.0.0",
     "@angular/cdk": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/ai": "^9.0.0-beta.10",
-    "@praxisui/core": "^9.0.0-beta.10",
-    "@praxisui/settings-panel": "^9.0.0-beta.10",
+    "@praxisui/ai": "^9.0.0-beta.11",
+    "@praxisui/core": "^9.0.0-beta.11",
+    "@praxisui/settings-panel": "^9.0.0-beta.11",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-page-builder.d.ts

@@ -1728,6 +1728,7 @@ declare class DynamicPageBuilderComponent implements OnChanges, OnDestroy {
     readonly agenticAuthoringWidgetContextKey: _angular_core.WritableSignal<string | null>;
     readonly agenticAuthoringPanelLayout: _angular_core.WritableSignal<PraxisAssistantShellLayout>;
     private previewMode;
+    private runtimePreviewPageCache?;
     private agenticComponentCapabilities?;
     private agenticComponentCapabilitiesPromise?;
     private agenticTurnController?;
@@ -1741,6 +1742,7 @@ declare class DynamicPageBuilderComponent implements OnChanges, OnDestroy {
     ngOnDestroy(): void;
     showSettings(): boolean;
     isPreviewMode(): boolean;
+    runtimePage(): WidgetPageDefinition;
     builderModeLabel(): string;
     onRuntimePageChange(next: WidgetPageDefinition): void;
     onRuntimeWidgetEvent(event: WidgetEventEnvelope): void;
@@ -1774,6 +1776,7 @@ declare class DynamicPageBuilderComponent implements OnChanges, OnDestroy {
     minimizeAgenticAuthoring(): void;
     onAgenticAuthoringLayoutChange(layout: AgenticAuthoringPanelLayout): void;
     agenticAuthoringReviewRailActive(): boolean;
+    showAgenticAuthoringPanel(): boolean;
     showAgenticAuthoringDock(): boolean;
     agenticAuthoringMinimized(): boolean;
     agenticAuthoringToggleLabel(): string;
@@ -1811,6 +1814,7 @@ declare class DynamicPageBuilderComponent implements OnChanges, OnDestroy {
     private agenticAuthoringSemanticDecisionContextItems;
     private shouldHideSemanticDecisionContextItems;
     private humanizeAgenticResourcePath;
+    private agenticSemanticResourceLabel;
     private humanizeAgenticDecisionSummary;
     private humanizeAgenticOperationKind;
     private humanizeAgenticArtifactKind;
@@ -1896,6 +1900,9 @@ declare class DynamicPageBuilderComponent implements OnChanges, OnDestroy {
     private collectRuntimeComponentObservationsForAgenticTurn;
     private ensureAgenticTurnController;
     private applyAgenticPreviewLocally;
+    private enterPreviewMode;
+    private toPresentationRuntimePage;
+    private toPresentationRuntimeWidget;
     private applyAgenticTurnState;
     private primeSharedRuleHandoff;
     private moveAgenticAuthoringPanelToReviewSidecar;