@praxisui/charts 3.0.0-beta.7 → 3.0.0-beta.8

package/fesm2022/praxisui-charts.mjs

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1$2 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, DynamicGridPageComponent, providePraxisI18n, SETTINGS_PANEL_DATA } from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, providePraxisI18n, SETTINGS_PANEL_DATA } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -254,6 +254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const PRAXIS_CHART_DEFAULT_PALETTE = ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'];
 class PraxisChartOptionBuilderService {
     transformer;
     constructor(transformer) {
@@ -261,7 +262,7 @@ class PraxisChartOptionBuilderService {
     }
     build(config, rows) {
         const transformed = this.transformer.transform(config, rows);
-        const palette = config.theme?.palette;
+        const palette = config.theme?.palette?.length ? config.theme.palette : PRAXIS_CHART_DEFAULT_PALETTE;
         const tooltipEnabled = config.theme?.tooltip?.enabled ?? true;
         const legendVisible = config.theme?.legend?.visible ?? true;
         if (transformed.mode === 'pie') {
@@ -2011,6 +2012,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
   `, styles: [":host{display:block}.probe-shell{display:grid;gap:12px;min-height:220px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#0b111ff5,#0b111fe0),radial-gradient(circle at top right,rgba(18,99,180,.32),transparent 35%);color:#d7e6ff}.probe-header h3,.probe-eyebrow{margin:0}.probe-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#d7e6ffb3}.probe-empty{color:#d7e6ffc7}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.45}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
+const PRAXIS_CHART_PHASE1_PORTS = [
+    {
+        id: 'queryContext',
+        label: 'Query Context',
+        direction: 'input',
+        semanticKind: 'query-context',
+        description: 'Primary semantic query contract for declarative orchestration and connected filters.',
+        schema: {
+            id: 'PraxisDataQueryContext',
+            kind: 'ts-type',
+            ref: 'PraxisDataQueryContext',
+        },
+        compatibility: {
+            acceptsSemanticKinds: ['query-context'],
+            schemaMode: 'structural',
+        },
+        exposure: { public: true, group: 'data' },
+    },
+    {
+        id: 'chartDocument',
+        label: 'Chart Document',
+        direction: 'input',
+        semanticKind: 'config-fragment',
+        description: 'Canonical x-ui.chart document used as the authoring source of truth.',
+        schema: {
+            id: 'PraxisXUiChartContract',
+            kind: 'ts-type',
+            ref: 'PraxisXUiChartContract',
+        },
+        exposure: { public: true, group: 'config' },
+    },
+    {
+        id: 'config',
+        label: 'Chart Config',
+        direction: 'input',
+        semanticKind: 'config-fragment',
+        description: 'Declarative chart configuration consumed directly by the runtime.',
+        schema: {
+            id: 'PraxisChartConfig',
+            kind: 'ts-type',
+            ref: 'PraxisChartConfig',
+        },
+        exposure: { public: true, group: 'config' },
+    },
+    {
+        id: 'pointClick',
+        label: 'Point Click',
+        direction: 'output',
+        semanticKind: 'event',
+        description: 'Interaction event emitted when a point or series is clicked.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartPointEvent',
+            kind: 'ts-type',
+            ref: 'PraxisChartPointEvent',
+        },
+        exposure: { public: true, group: 'interaction' },
+    },
+    {
+        id: 'queryRequest',
+        label: 'Query Request',
+        direction: 'output',
+        semanticKind: 'diagnostic',
+        description: 'Outgoing remote query request emitted before datasource resolution.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartQueryRequestEvent',
+            kind: 'ts-type',
+            ref: 'PraxisChartQueryRequestEvent',
+        },
+        exposure: { public: true, group: 'diagnostics' },
+    },
+    {
+        id: 'loadStateChange',
+        label: 'Load State',
+        direction: 'output',
+        semanticKind: 'status',
+        description: 'Operational state signal for loading, ready and error transitions.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartLoadState',
+            kind: 'ts-type',
+            ref: 'PraxisChartLoadState',
+        },
+        exposure: { public: true, group: 'status' },
+    },
+];
 const PRAXIS_CHART_COMPONENT_METADATA = {
     id: 'praxis-chart',
     componentType: 'praxis-chart',
@@ -2110,6 +2198,7 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
             scope: 'toolbar',
         },
     ],
+    ports: PRAXIS_CHART_PHASE1_PORTS,
 };
 function providePraxisChartsMetadata() {
     return {
@@ -2330,7 +2419,7 @@ class PraxisChartShowcaseWidgetComponent {
         (rowClick)="handleRowClick($event)"
       ></praxis-table>
     }
-  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "editModeEnabled", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "filterCriteria", "queryContext", "enableCustomization", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
             type: Component,
@@ -2591,7 +2680,7 @@ class PraxisChartSchemaMapperService {
             key,
             className: schema.className,
             shell: schema.shell,
-            layout: schema.layout ?? defaults?.layout,
+            canvasItem: schema.canvasItem ?? defaults?.canvasItem,
             definition: this.toWidgetDefinition(schema),
         };
     }
@@ -2616,16 +2705,6 @@ class PraxisChartSchemaMapperService {
             shell: resolved.shell,
         };
     }
-    toGridWidgetInstance(input, defaults) {
-        const resolved = this.resolve(input, defaults);
-        return {
-            key: resolved.key,
-            definition: resolved.definition,
-            layout: resolved.layout ?? defaults.layout,
-            className: resolved.className,
-            shell: resolved.shell,
-        };
-    }
     normalize(input) {
         if (this.isCanonicalChartContract(input)) {
             return {
@@ -2653,7 +2732,7 @@ class PraxisChartSchemaMapperService {
                 || 'outputs' in input
                 || 'bindingOrder' in input
                 || 'shell' in input
-                || 'layout' in input
+                || 'canvasItem' in input
                 || 'data' in input);
     }
     isCanonicalChartContract(input) {
@@ -2728,33 +2807,8 @@ class PraxisChartBackendPayloadAdapterService {
             },
         };
     }
-    toGridWidgetInstance(payload) {
-        const layout = payload.widget.layout ?? { col: 1, row: 1, colSpan: 6, rowSpan: 4 };
-        const widget = this.chartSchemaMapper.toGridWidgetInstance({
-            kind: payload.widget.kind ?? 'x-ui.chart',
-            key: payload.widget.key,
-            className: payload.widget.className,
-            shell: payload.widget.shell,
-            bindingOrder: payload.widget.bindingOrder,
-            outputs: payload.widget.outputs,
-            layout,
-            chart: payload.widget.chart,
-            data: payload.data,
-        }, {
-            key: payload.widget.key,
-            layout,
-        });
-        return {
-            ...widget,
-            definition: {
-                ...widget.definition,
-                inputs: {
-                    ...(widget.definition.inputs || {}),
-                    config: this.toChartConfig(payload),
-                    chartDocument: payload.widget.chart ?? null,
-                },
-            },
-        };
+    toCanvasItem(payload, fallback = { col: 1, row: 1, colSpan: 6, rowSpan: 4 }) {
+        return payload.widget.canvasItem ?? fallback;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, deps: [{ token: PraxisChartSchemaMapperService }, { token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, providedIn: 'root' });
@@ -2777,7 +2831,7 @@ const PRAXIS_CHART_BACKEND_MOCK_BAR = {
         kind: 'x-ui.chart',
         key: 'monthly-revenue-chart',
         className: 'analytics-widget analytics-widget-revenue',
-        layout: { col: 1, row: 1, colSpan: 6, rowSpan: 4 },
+        canvasItem: { col: 1, row: 1, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Heroes por universo',
             subtitle: 'Group-by real consumindo praxis.stats publicado',
@@ -2858,7 +2912,7 @@ const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
     widget: {
         kind: 'x-ui.chart',
         key: 'incident-timeseries-chart',
-        layout: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
+        canvasItem: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Incidentes por mes',
             subtitle: 'Time series real consumindo praxis.stats publicado',
@@ -2914,7 +2968,7 @@ const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
     widget: {
         kind: 'x-ui.chart',
         key: 'ticket-status-chart',
-        layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
+        canvasItem: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Severidade de incidentes',
             subtitle: 'Distribution real consumindo praxis.stats publicado',
@@ -2970,7 +3024,7 @@ const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
     widget: {
         kind: 'x-ui.chart',
         key: 'payroll-department-horizontal-bar',
-        layout: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
+        canvasItem: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Massa salarial por departamento',
             subtitle: 'Ranking horizontal em payroll analytics',
@@ -3032,7 +3086,7 @@ const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
     widget: {
         kind: 'x-ui.chart',
         key: 'payroll-net-stacked-area',
-        layout: { col: 1, row: 9, colSpan: 12, rowSpan: 4 },
+        canvasItem: { col: 1, row: 9, colSpan: 12, rowSpan: 4 },
         shell: {
             title: 'Composicao temporal da folha',
             subtitle: 'Stacked area inicial sobre timeseries published',
@@ -3088,7 +3142,7 @@ const PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR = {
     widget: {
         kind: 'x-ui.chart',
         key: 'payroll-multi-metric-bar',
-        layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
+        canvasItem: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
         shell: {
             title: 'Comparativo por departamento',
             subtitle: 'Bar chart multi-metrico sobre praxis.stats group-by',
@@ -3154,7 +3208,7 @@ const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
     widget: {
         kind: 'x-ui.chart',
         key: 'payroll-net-vs-discount-scatter',
-        layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
+        canvasItem: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
         shell: {
             title: 'Liquido x desconto medio',
             subtitle: 'Dispersao inicial sobre payroll analytics',
@@ -3210,7 +3264,7 @@ const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
     widget: {
         kind: 'x-ui.chart',
         key: 'payroll-combo-variance',
-        layout: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
+        canvasItem: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
         shell: {
             title: 'Folha liquida e desconto medio',
             subtitle: 'Combo remoto sobre praxis.stats multi-metrica',
@@ -3285,24 +3339,21 @@ function buildPraxisChartMockWidgetPage(adapter) {
         },
     };
 }
-function buildPraxisChartMockGridPage(adapter) {
-    return {
-        widgets: [
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
-        ],
-        options: {
-            cols: 12,
-            rowHeight: 88,
-            gap: 16,
-        },
-    };
+function buildPraxisChartMockCanvasPage(adapter) {
+    const payloads = [
+        PRAXIS_CHART_BACKEND_MOCK_BAR,
+        PRAXIS_CHART_BACKEND_MOCK_TIMESERIES,
+        PRAXIS_CHART_BACKEND_MOCK_DONUT,
+        PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR,
+        PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA,
+        PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR,
+        PRAXIS_CHART_BACKEND_MOCK_SCATTER,
+        PRAXIS_CHART_BACKEND_MOCK_COMBO,
+    ];
+    return buildCanvasPage(payloads.map((payload) => ({
+        widget: withShowcaseViewToggle(adapter.toWidgetInstance(payload)),
+        canvasItem: adapter.toCanvasItem(payload),
+    })));
 }
 function buildPraxisChartInteractiveWidgetPage(adapter) {
     return {
@@ -3361,80 +3412,73 @@ function buildPraxisChartInteractiveWidgetPage(adapter) {
         },
     };
 }
-function buildPraxisChartInteractiveGridPage(adapter) {
+function buildPraxisChartInteractiveCanvasPage(adapter) {
+    return buildCanvasPage([
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
+            canvasItem: adapter.toCanvasItem(PRAXIS_CHART_BACKEND_MOCK_BAR),
+        },
+        {
+            widget: buildDrilldownWidget(),
+            canvasItem: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
+            canvasItem: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
+        },
+        {
+            widget: buildProbeWidget(),
+            canvasItem: { col: 7, row: 9, colSpan: 6, rowSpan: 3 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+            canvasItem: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR)),
+            canvasItem: { col: 1, row: 9, colSpan: 6, rowSpan: 4 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA)),
+            canvasItem: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR)),
+            canvasItem: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_SCATTER)),
+            canvasItem: { col: 1, row: 21, colSpan: 12, rowSpan: 4 },
+        },
+        {
+            widget: withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_COMBO)),
+            canvasItem: { col: 1, row: 25, colSpan: 12, rowSpan: 4 },
+        },
+    ], [
+        {
+            from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
+            to: { widget: 'chart-event-probe', input: 'value' },
+        },
+        {
+            from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
+            to: { widget: 'chart-drilldown-panel', input: 'selection' },
+        },
+    ]);
+}
+function buildCanvasPage(entries, connections) {
     return {
-        widgets: [
-            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
-            buildDrilldownGridWidget(),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_TIMESERIES,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_TIMESERIES.widget,
-                    layout: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
-                },
-            })),
-            buildProbeGridWidget(),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_DONUT,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_DONUT.widget,
-                    layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
-                },
-            })),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR.widget,
-                    layout: { col: 1, row: 9, colSpan: 6, rowSpan: 4 },
-                },
-            })),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA.widget,
-                    layout: { col: 1, row: 13, colSpan: 12, rowSpan: 4 },
-                },
-            })),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR.widget,
-                    layout: { col: 1, row: 17, colSpan: 12, rowSpan: 4 },
-                },
-            })),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_SCATTER,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_SCATTER.widget,
-                    layout: { col: 1, row: 21, colSpan: 12, rowSpan: 4 },
-                },
-            })),
-            withShowcaseViewToggle(adapter.toGridWidgetInstance({
-                ...PRAXIS_CHART_BACKEND_MOCK_COMBO,
-                widget: {
-                    ...PRAXIS_CHART_BACKEND_MOCK_COMBO.widget,
-                    layout: { col: 1, row: 25, colSpan: 12, rowSpan: 4 },
-                },
-            })),
-        ],
-        connections: [
-            {
-                from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
-                to: { widget: 'chart-event-probe', input: 'value' },
-            },
-            {
-                from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
-                to: { widget: 'chart-drilldown-panel', input: 'selection' },
-            },
-        ],
-        options: {
-            cols: 12,
-            rowHeight: 88,
-            gap: 16,
+        widgets: entries.map((entry) => entry.widget),
+        connections,
+        canvas: {
+            mode: 'grid',
+            columns: 12,
+            rowUnit: '88px',
+            gap: '16px',
+            items: Object.fromEntries(entries.map((entry) => [entry.widget.key, entry.canvasItem])),
         },
     };
 }
-function buildDrilldownGridWidget() {
+function buildDrilldownWidget() {
     return {
         key: 'chart-drilldown-panel',
         definition: {
@@ -3444,14 +3488,13 @@ function buildDrilldownGridWidget() {
                 selection: null,
             },
         },
-        layout: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
         shell: {
             title: 'Local Drill-down',
             subtitle: 'Filtrado por pointClick do chart principal',
         },
     };
 }
-function buildProbeGridWidget() {
+function buildProbeWidget() {
     return {
         key: 'chart-event-probe',
         definition: {
@@ -3461,7 +3504,6 @@ function buildProbeGridWidget() {
                 value: 'Clique em uma barra para inspecionar o payload emitido.',
             },
         },
-        layout: { col: 7, row: 9, colSpan: 6, rowSpan: 3 },
         shell: {
             title: 'Runtime Probe',
             subtitle: 'Conectado via WidgetDefinition.connections',
@@ -3577,63 +3619,43 @@ class PraxisChartCompositionShowcaseComponent {
                 return buildPraxisChartMockWidgetPage(this.backendPayloadAdapter);
         }
     }, ...(ngDevMode ? [{ debugName: "widgetPage" }] : []));
-    gridPage = computed(() => {
+    canvasPage = computed(() => {
         switch (this.scenarioMode()) {
             case 'interactive':
-                return buildPraxisChartInteractiveGridPage(this.backendPayloadAdapter);
+                return buildPraxisChartInteractiveCanvasPage(this.backendPayloadAdapter);
             case 'empty':
-                return {
-                    ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
-                    widgets: [
-                        this.backendPayloadAdapter.toGridWidgetInstance({
-                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
-                            data: [],
-                        }),
-                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
-                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
-                    ],
-                };
+                return this.buildScenarioCanvasPage({
+                    ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                    data: [],
+                });
             case 'loading':
-                return {
-                    ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
-                    widgets: [
-                        this.backendPayloadAdapter.toGridWidgetInstance({
-                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
-                            data: [],
-                            widget: {
-                                ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
-                                runtime: {
-                                    preferredLoadState: 'loading',
-                                },
-                            },
-                        }),
-                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
-                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
-                    ],
-                };
+                return this.buildScenarioCanvasPage({
+                    ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                    data: [],
+                    widget: {
+                        ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
+                        runtime: {
+                            preferredLoadState: 'loading',
+                        },
+                    },
+                });
             case 'error':
-                return {
-                    ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
-                    widgets: [
-                        this.backendPayloadAdapter.toGridWidgetInstance({
-                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
-                            data: [],
-                            widget: {
-                                ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
-                                runtime: {
-                                    preferredLoadState: 'error',
-                                },
-                            },
-                        }),
-                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
-                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
-                    ],
-                };
+                return this.buildScenarioCanvasPage({
+                    ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                    data: [],
+                    widget: {
+                        ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
+                        runtime: {
+                            preferredLoadState: 'error',
+                        },
+                    },
+                });
             case 'baseline':
             default:
-                return buildPraxisChartMockGridPage(this.backendPayloadAdapter);
+                return buildPraxisChartMockCanvasPage(this.backendPayloadAdapter);
         }
-    }, ...(ngDevMode ? [{ debugName: "gridPage" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "canvasPage" }] : []));
+    resolvedPage = computed(() => (this.layoutMode() === 'canvas' ? this.canvasPage() : this.widgetPage()), ...(ngDevMode ? [{ debugName: "resolvedPage" }] : []));
     payloadTitle = computed(() => {
         switch (this.payloadMode()) {
             case 'timeseries':
@@ -3677,8 +3699,28 @@ class PraxisChartCompositionShowcaseComponent {
                 return PRAXIS_CHART_BACKEND_MOCK_BAR;
         }
     }, ...(ngDevMode ? [{ debugName: "selectedPayload" }] : []));
+    buildScenarioCanvasPage(primaryPayload) {
+        const base = buildPraxisChartMockCanvasPage(this.backendPayloadAdapter);
+        const widgets = [
+            this.backendPayloadAdapter.toWidgetInstance(primaryPayload),
+            this.backendPayloadAdapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
+            this.backendPayloadAdapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
+        ];
+        return {
+            ...base,
+            widgets,
+            canvas: {
+                ...base.canvas,
+                items: {
+                    [widgets[0].key]: this.backendPayloadAdapter.toCanvasItem(primaryPayload),
+                    [widgets[1].key]: this.backendPayloadAdapter.toCanvasItem(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
+                    [widgets[2].key]: this.backendPayloadAdapter.toCanvasItem(PRAXIS_CHART_BACKEND_MOCK_DONUT),
+                },
+            },
+        };
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePraxisCharts()], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.17", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePraxisCharts()], ngImport: i0, template: `
     <section class="showcase-shell">
       <header class="showcase-hero">
         <div class="showcase-copy">
@@ -3698,10 +3740,10 @@ class PraxisChartCompositionShowcaseComponent {
             <span>Layout</span>
             <div class="control-buttons">
               <button type="button" [class.active]="layoutMode() === 'widget'" (click)="layoutMode.set('widget')">
-                Widget Page
+                Widget Layout
               </button>
-              <button type="button" [class.active]="layoutMode() === 'grid'" (click)="layoutMode.set('grid')">
-                Grid Page
+              <button type="button" [class.active]="layoutMode() === 'canvas'" (click)="layoutMode.set('canvas')">
+                Canvas Layout
               </button>
             </div>
           </div>
@@ -3764,23 +3806,16 @@ class PraxisChartCompositionShowcaseComponent {
           <div class="panel-header">
             <div>
               <p class="panel-kicker">Runtime</p>
-              <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
+              <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage / Layout' : 'DynamicWidgetPage / Canvas' }}</h3>
             </div>
             <span class="panel-chip">{{ layoutMode() }} / {{ scenarioMode() }}</span>
           </div>
 
-          @if (layoutMode() === 'widget') {
-            <praxis-dynamic-page
-              [page]="widgetPage()"
-              [context]="runtimeContext()"
-              [autoPersist]="false"
-            ></praxis-dynamic-page>
-          } @else {
-            <praxis-dynamic-grid-page
-              [page]="gridPage()"
-              [context]="runtimeContext()"
-            ></praxis-dynamic-grid-page>
-          }
+          <praxis-dynamic-page
+            [page]="resolvedPage()"
+            [context]="runtimeContext()"
+            [autoPersist]="false"
+          ></praxis-dynamic-page>
         </article>
 
         <article class="payload-panel">
@@ -3797,11 +3832,11 @@ class PraxisChartCompositionShowcaseComponent {
         </article>
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange"] }, { kind: "component", type: DynamicGridPageComponent, selector: "praxis-dynamic-grid-page", inputs: ["page", "context", "strictValidation", "gridOptions", "enableCustomization"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [CommonModule, DynamicWidgetPageComponent, DynamicGridPageComponent], providers: [providePraxisCharts()], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [CommonModule, DynamicWidgetPageComponent], providers: [providePraxisCharts()], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <section class="showcase-shell">
       <header class="showcase-hero">
         <div class="showcase-copy">
@@ -3821,10 +3856,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             <span>Layout</span>
             <div class="control-buttons">
               <button type="button" [class.active]="layoutMode() === 'widget'" (click)="layoutMode.set('widget')">
-                Widget Page
+                Widget Layout
               </button>
-              <button type="button" [class.active]="layoutMode() === 'grid'" (click)="layoutMode.set('grid')">
-                Grid Page
+              <button type="button" [class.active]="layoutMode() === 'canvas'" (click)="layoutMode.set('canvas')">
+                Canvas Layout
               </button>
             </div>
           </div>
@@ -3887,23 +3922,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <div class="panel-header">
             <div>
               <p class="panel-kicker">Runtime</p>
-              <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
+              <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage / Layout' : 'DynamicWidgetPage / Canvas' }}</h3>
             </div>
             <span class="panel-chip">{{ layoutMode() }} / {{ scenarioMode() }}</span>
           </div>
 
-          @if (layoutMode() === 'widget') {
-            <praxis-dynamic-page
-              [page]="widgetPage()"
-              [context]="runtimeContext()"
-              [autoPersist]="false"
-            ></praxis-dynamic-page>
-          } @else {
-            <praxis-dynamic-grid-page
-              [page]="gridPage()"
-              [context]="runtimeContext()"
-            ></praxis-dynamic-grid-page>
-          }
+          <praxis-dynamic-page
+            [page]="resolvedPage()"
+            [context]="runtimeContext()"
+            [autoPersist]="false"
+          ></praxis-dynamic-page>
         </article>
 
         <article class="payload-panel">
@@ -4971,5 +4999,5 @@ var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveGridPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockGridPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartsText };
+export { ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartsText };
 //# sourceMappingURL=praxisui-charts.mjs.map