@praxisui/charts 9.0.25 → 9.0.26

package/fesm2022/praxisui-charts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Optional, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, Injector, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, normalizePraxisPresentationVisualization, providePraxisI18n, ComponentMetadataRegistry, ResourceDiscoveryService, SETTINGS_PANEL_DATA, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, normalizePraxisPresentationVisualization, AnalyticsStatsRequestBuilderService, providePraxisI18n, AnalyticsPresentationResolver, ComponentMetadataRegistry, ResourceDiscoveryService, SETTINGS_PANEL_DATA, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { throwError, map, of, isObservable, from, firstValueFrom, timeout, BehaviorSubject, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/material/tooltip';
@@ -9,8 +9,9 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$1 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
+import { AnalyticsTableConfigAdapterService, AnalyticsTableStatsApiService, PraxisTable } from '@praxisui/table';
 import { use, init } from 'echarts/core';
-import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
+import { BarChart, FunnelChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
 import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i1$3 from '@angular/forms';
@@ -27,7 +28,6 @@ import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { PraxisTable } from '@praxisui/table';
 
 const PRAXIS_CHART_PALETTE_TOKENS = {
     'brand-primary': ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'],
@@ -79,7 +79,10 @@ const PRAXIS_CHART_THEME_VARIANTS = {
 class PraxisChartDataTransformerService {
     transform(config, rows) {
         if (config.type === 'pie' || config.type === 'donut') {
-            return this.transformPie(config, rows);
+            return this.transformCategorySlices(config, rows, 'pie');
+        }
+        if (config.type === 'funnel' || config.type === 'pyramid') {
+            return this.transformCategorySlices(config, rows, 'funnel');
         }
         if (config.type === 'scatter') {
             return this.transformScatter(config, rows);
@@ -109,12 +112,12 @@ class PraxisChartDataTransformerService {
             hasData: categories.length > 0 && series.some((item) => item.points.some((point) => this.hasPointValue(point))),
         };
     }
-    transformPie(config, rows) {
+    transformCategorySlices(config, rows, mode) {
         const seriesConfig = config.series[0];
         const categoryField = seriesConfig?.categoryField ?? config.axes?.x?.field;
         if (!seriesConfig || !categoryField || !rows.length) {
             return {
-                mode: 'pie',
+                mode,
                 categories: [],
                 series: [],
                 slices: [],
@@ -122,18 +125,18 @@ class PraxisChartDataTransformerService {
             };
         }
         const slices = this.buildCategoryBuckets(config, rows, categoryField)
-            .map((bucket) => {
+            .flatMap((bucket) => {
             const value = bucket.rows.reduce((sum, row) => sum + this.extractMetricValue(row, seriesConfig), 0);
-            return {
-                id: `${seriesConfig.id}:${bucket.identity}`,
-                name: bucket.label,
-                value,
-                color: seriesConfig.color,
-                data: this.buildPointData(bucket.rows[0], value),
-            };
+            return value < 0 ? [] : [{
+                    id: `${seriesConfig.id}:${bucket.identity}`,
+                    name: bucket.label,
+                    value,
+                    color: seriesConfig.color,
+                    data: this.buildPointData(bucket.rows[0], value),
+                }];
         });
         return {
-            mode: 'pie',
+            mode,
             categories: slices.map((slice) => slice.name),
             series: [],
             slices,
@@ -491,7 +494,7 @@ class ChartContractNormalizerService {
                 })),
             };
         }
-        if ((document.kind === 'pie' || document.kind === 'donut' || this.isDistribution(document)) && document.metrics?.length) {
+        if ((this.isSingleMetricCategoryChart(document) || this.isDistribution(document)) && document.metrics?.length) {
             nextDocument = {
                 ...nextDocument,
                 metrics: document.metrics.slice(0, 1),
@@ -538,6 +541,12 @@ class ChartContractNormalizerService {
     isDistribution(document) {
         return document.source.kind === 'praxis.stats' && document.source.operation === 'distribution';
     }
+    isSingleMetricCategoryChart(document) {
+        return document.kind === 'pie'
+            || document.kind === 'donut'
+            || document.kind === 'funnel'
+            || document.kind === 'pyramid';
+    }
     normalizeCssSizeValue(value) {
         if (typeof value !== 'string') {
             return value;
@@ -721,19 +730,20 @@ class ChartContractValidationService {
     }
     validateKinds(document, issues) {
         const metricCount = document.metrics?.length ?? 0;
+        const categorySliceChart = this.isCategorySliceChart(document.kind);
         document.dimensions?.forEach((dimension, index) => {
             if (!dimension.field?.trim()) {
                 issues.push(this.error('dimension-field-required', `dimensions[${index}].field`, 'x-ui.chart dimension.field is required.'));
             }
         });
-        if (document.kind !== 'pie' && document.kind !== 'donut' && !document.dimensions?.length) {
+        if (!categorySliceChart && !document.dimensions?.length) {
             issues.push(this.error('missing-dimension', 'dimensions', 'x-ui.chart cartesian charts require at least one dimension.'));
         }
-        if ((document.kind === 'pie' || document.kind === 'donut') && !document.dimensions?.[0]?.field) {
-            issues.push(this.error('pie-missing-dimension', 'dimensions[0].field', 'x-ui.chart pie/donut charts require a first dimension for category mapping.'));
+        if (categorySliceChart && !document.dimensions?.[0]?.field) {
+            issues.push(this.error('category-slice-missing-dimension', 'dimensions[0].field', 'x-ui.chart pie, donut, funnel and pyramid charts require a first dimension for category mapping.'));
         }
-        if ((document.kind === 'pie' || document.kind === 'donut') && metricCount > 1) {
-            issues.push(this.error('pie-multi-metric', 'metrics', 'x-ui.chart pie/donut charts support a single metric in @praxisui/charts.'));
+        if (categorySliceChart && metricCount !== 1) {
+            issues.push(this.error('category-slice-single-metric', 'metrics', 'x-ui.chart pie, donut, funnel and pyramid charts require exactly one metric in @praxisui/charts.'));
         }
         if (document.kind === 'combo' && metricCount < 2) {
             issues.push(this.error('combo-min-metrics', 'metrics', 'x-ui.chart combo charts require at least two metrics.'));
@@ -758,6 +768,9 @@ class ChartContractValidationService {
             issues.push(this.error('combo-operation-unsupported', 'source.operation', 'x-ui.chart combo charts over praxis.stats support only group-by or timeseries operations in @praxisui/charts.'));
         }
     }
+    isCategorySliceChart(kind) {
+        return kind === 'pie' || kind === 'donut' || kind === 'funnel' || kind === 'pyramid';
+    }
     validateDistribution(document, issues) {
         if (document.source.kind !== 'praxis.stats'
             || document.source.operation !== 'distribution') {
@@ -928,7 +941,7 @@ class PraxisChartCanonicalContractMapperService {
         const secondaryMetric = contract.metrics?.find((metric) => metric.axis === 'secondary');
         const metricCount = (contract.metrics?.length ?? 0)
             * (contract.source.kind === 'praxis.stats' && contract.source.operation === 'comparison' ? 2 : 1);
-        if (contract.kind === 'pie' || contract.kind === 'donut') {
+        if (this.isCategorySliceChart(contract.kind)) {
             return {
                 x: {
                     field: firstDimension?.field,
@@ -984,7 +997,7 @@ class PraxisChartCanonicalContractMapperService {
                 name: period ? `${baseName} (${this.comparisonPeriodLabel(period)})` : baseName,
                 type: this.resolveSeriesType(contract.kind, metric.seriesKind, index),
                 axis: metric.axis ?? 'primary',
-                categoryField: comparison || contract.kind === 'pie' || contract.kind === 'donut'
+                categoryField: comparison || this.isCategorySliceChart(contract.kind)
                     ? firstDimension?.field
                     : undefined,
                 metric: {
@@ -1078,7 +1091,7 @@ class PraxisChartCanonicalContractMapperService {
             tooltip: {
                 ...(variantTheme?.tooltip ?? {}),
                 enabled: this.resolveToggle(contract.tooltip, true),
-                trigger: contract.kind === 'pie' || contract.kind === 'donut' || contract.kind === 'scatter' ? 'item' : 'axis',
+                trigger: this.isCategorySliceChart(contract.kind) || contract.kind === 'scatter' ? 'item' : 'axis',
             },
             surface,
             backgroundColor: surface?.background ?? variantTheme?.backgroundColor,
@@ -1148,6 +1161,9 @@ class PraxisChartCanonicalContractMapperService {
         }
         return contract.orientation;
     }
+    isCategorySliceChart(kind) {
+        return kind === 'pie' || kind === 'donut' || kind === 'funnel' || kind === 'pyramid';
+    }
     resolveSeriesType(chartKind, seriesKind, index) {
         if (chartKind === 'combo') {
             return seriesKind ?? (index === 0 ? 'bar' : 'line');
@@ -1767,6 +1783,7 @@ class PraxisChartComponent {
     surfaceBorderColor = computed(() => this.effectiveConfig().theme?.surface?.borderColor ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderColor" }] : /* istanbul ignore next */ []));
     surfaceBorderWidth = computed(() => this.toCssSize(this.effectiveConfig().theme?.surface?.borderWidth) ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderWidth" }] : /* istanbul ignore next */ []));
     surfaceBorderRadius = computed(() => this.toCssSize(this.effectiveConfig().theme?.surface?.borderRadius) ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderRadius" }] : /* istanbul ignore next */ []));
+    surfaceTextColor = computed(() => this.effectiveConfig().theme?.textColor ?? null, ...(ngDevMode ? [{ debugName: "surfaceTextColor" }] : /* istanbul ignore next */ []));
     renderConfig = computed(() => {
         const config = this.effectiveConfig();
         const explicitData = this.data();
@@ -2436,6 +2453,7 @@ class PraxisChartComponent {
       [style.--praxis-chart-config-surface-border]="surfaceBorderColor()"
       [style.--praxis-chart-config-surface-border-width]="surfaceBorderWidth()"
       [style.--praxis-chart-config-surface-radius]="surfaceBorderRadius()"
+      [style.--praxis-chart-config-text-color]="surfaceTextColor()"
     >
       @if (canOpenConfigEditor()) {
         <button
@@ -2496,7 +2514,7 @@ class PraxisChartComponent {
         <div #chartHost class="praxis-chart-host"></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
@@ -2516,6 +2534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       [style.--praxis-chart-config-surface-border]="surfaceBorderColor()"
       [style.--praxis-chart-config-surface-border-width]="surfaceBorderWidth()"
       [style.--praxis-chart-config-surface-radius]="surfaceBorderRadius()"
+      [style.--praxis-chart-config-text-color]="surfaceTextColor()"
     >
       @if (canOpenConfigEditor()) {
         <button
@@ -2576,7 +2595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <div #chartHost class="praxis-chart-host"></div>
       }
     </section>
-  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
@@ -3684,830 +3703,196 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", 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_DEFAULT_PALETTE = ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'];
-const TITLE_TOP = 18;
-const TITLE_LEFT = 24;
-const CARTESIAN_GRID_TOP_WITH_TITLE = 96;
-const CARTESIAN_GRID_TOP_WITHOUT_TITLE = 48;
-const CARTESIAN_GRID_BOTTOM_WITH_LEGEND = 64;
-const CARTESIAN_GRID_BOTTOM_WITHOUT_LEGEND = 40;
-const DEFAULT_VALUE_LOCALE = 'pt-BR';
-class EChartsOptionBuilderService {
-    transformer;
-    constructor(transformer) {
-        this.transformer = transformer;
+class AnalyticsChartConfigAdapterService {
+    i18n;
+    statsBuilder = new AnalyticsStatsRequestBuilderService();
+    constructor(i18n) {
+        this.i18n = i18n;
     }
-    build(config, rows) {
-        const transformed = this.transformer.transform(config, rows);
-        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;
-        const textColor = this.resolveTextColor(config);
-        if (transformed.mode === 'pie') {
-            const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
-            const labelsVisible = config.series[0]?.labels?.visible ?? transformed.slices.length <= 4;
-            const pieSeries = {
-                type: 'pie',
-                radius: config.type === 'donut'
-                    ? labelsVisible ? ['32%', '52%'] : ['42%', '64%']
-                    : labelsVisible ? '54%' : '66%',
-                center: ['50%', hasChartTitle ? '54%' : '50%'],
-                avoidLabelOverlap: true,
-                label: {
-                    show: labelsVisible,
-                    color: textColor,
-                    overflow: 'truncate',
-                    width: 120,
-                    formatter: labelsVisible
-                        ? (params) => {
-                            const formatted = this.formatValue(params.value, config.series[0]?.labels?.format);
-                            return params.name ? `${params.name}: ${formatted}` : formatted;
-                        }
-                        : undefined,
-                },
-                labelLine: labelsVisible ? { length: 14, length2: 12, lineStyle: { color: textColor } } : undefined,
-                data: transformed.slices.map((slice) => ({
-                    ...(slice.data || {}),
-                    name: slice.name,
-                    value: slice.value,
-                    itemStyle: slice.color ? { color: slice.color } : undefined,
-                })),
-            };
-            return {
-                backgroundColor: config.theme?.backgroundColor,
-                color: palette,
-                title: this.buildTitle(config, 'center', textColor),
-                tooltip: tooltipEnabled
-                    ? {
-                        trigger: 'item',
-                        valueFormatter: (value) => this.formatValue(value, config.series[0]?.labels?.format),
-                    }
-                    : undefined,
-                legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
-                series: [pieSeries],
-            };
+    toPraxisChartConfig(projection, options) {
+        const chartType = this.resolveChartType(projection);
+        const orientation = chartType === 'horizontal-bar' ? 'horizontal' : undefined;
+        const dimension = projection.bindings.primaryDimension;
+        const metrics = projection.bindings.primaryMetrics ?? [];
+        if (!dimension?.field) {
+            throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension for projection "${projection.id}".`);
         }
-        if (transformed.mode === 'scatter') {
-            const scatterSeries = transformed.series.map((series) => ({
-                id: series.id,
-                name: series.name,
-                type: 'scatter',
-                label: {
-                    show: series.labelsVisible,
-                    color: textColor,
-                    formatter: series.labelsVisible
-                        ? (params) => this.formatValue(params.value, this.seriesLabelFormat(config, series.id))
-                        : undefined,
-                },
-                itemStyle: series.color ? { color: series.color } : undefined,
-                data: series.points,
-            }));
-            return {
-                backgroundColor: config.theme?.backgroundColor,
-                color: palette,
-                title: this.buildTitle(config, 'left', textColor),
-                tooltip: tooltipEnabled
+        if (!metrics.length) {
+            throw new Error(`AnalyticsChartConfigAdapterService requires at least one metric for projection "${projection.id}".`);
+        }
+        const crossFilter = Boolean(projection.interactions?.crossFilter);
+        const keyFilterField = dimension.keyFilterField?.trim();
+        if (crossFilter && !keyFilterField) {
+            throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension.keyFilterField when crossFilter is enabled for projection "${projection.id}".`);
+        }
+        return {
+            id: projection.id,
+            type: chartType,
+            orientation,
+            title: options?.title,
+            subtitle: options?.subtitle,
+            height: options?.height,
+            axes: this.buildAxes(projection, chartType),
+            series: this.buildSeries(projection, chartType),
+            dataSource: this.buildDataSource(projection),
+            interactions: {
+                pointClick: Boolean(projection.interactions?.pointSelection || projection.interactions?.drillDown),
+                drillDown: Boolean(projection.interactions?.drillDown),
+                selection: Boolean(projection.interactions?.pointSelection),
+                crossFilter,
+                ...(crossFilter
                     ? {
-                        trigger: 'item',
-                        valueFormatter: (value) => this.formatValue(value, config.axes?.y?.labels?.format),
+                        eventActions: {
+                            crossFilter: {
+                                action: 'emit',
+                                mapping: { key: keyFilterField },
+                            },
+                        },
                     }
-                    : undefined,
-                legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
-                grid: this.buildGrid(config, { legendVisible }),
-                xAxis: {
-                    type: config.axes?.x?.type ?? 'value',
-                    name: config.axes?.x?.label,
-                    nameLocation: 'middle',
-                    nameGap: 32,
-                    axisLabel: {
-                        show: config.axes?.x?.labels?.visible ?? true,
-                        color: textColor,
-                        rotate: config.axes?.x?.labels?.rotate ?? 0,
-                        hideOverlap: true,
-                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
-                    },
-                },
-                yAxis: {
-                    type: config.axes?.y?.type ?? 'value',
-                    name: config.axes?.y?.label,
-                    nameLocation: 'middle',
-                    nameGap: 40,
-                    min: config.axes?.y?.min,
-                    max: config.axes?.y?.max,
-                    axisLabel: {
-                        show: config.axes?.y?.labels?.visible ?? true,
-                        color: textColor,
-                        hideOverlap: true,
-                        formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
-                    },
+                    : {}),
+            },
+        };
+    }
+    buildAxes(projection, chartType) {
+        const dimension = projection.bindings.primaryDimension;
+        const metrics = this.getDisplayMetrics(projection);
+        const firstMetric = metrics[0];
+        if (this.isCategorySliceChart(chartType)) {
+            return {
+                x: {
+                    field: dimension.field,
+                    label: dimension.label ?? undefined,
                 },
-                series: scatterSeries,
             };
         }
-        const horizontal = config.orientation === 'horizontal' || config.type === 'horizontal-bar';
-        const xAxisType = this.usesCanonicalStatsTime(config)
-            ? 'time'
-            : config.axes?.x?.type ?? 'category';
         return {
-            backgroundColor: config.theme?.backgroundColor,
-            color: palette,
-            title: this.buildTitle(config, 'left', textColor),
-            tooltip: tooltipEnabled ? this.buildCartesianTooltip(config) : undefined,
-            legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
-            grid: this.buildGrid(config, { horizontal, legendVisible }),
-            xAxis: horizontal
-                ? {
-                    type: config.axes?.y?.type ?? 'value',
-                    name: config.axes?.y?.label,
-                    nameLocation: 'middle',
-                    nameGap: 32,
-                    min: config.axes?.y?.min,
-                    max: config.axes?.y?.max,
-                    axisLabel: {
-                        show: config.axes?.y?.labels?.visible ?? true,
-                        color: textColor,
-                        hideOverlap: true,
-                        formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
-                    },
-                }
-                : {
-                    type: xAxisType,
-                    name: config.axes?.x?.label,
-                    data: xAxisType === 'time' ? undefined : transformed.categories,
-                    nameLocation: 'middle',
-                    nameGap: 18,
-                    axisLabel: {
-                        show: config.axes?.x?.labels?.visible ?? true,
-                        color: textColor,
-                        rotate: config.axes?.x?.labels?.rotate ?? 0,
-                        hideOverlap: true,
-                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
+            x: {
+                field: dimension.field,
+                label: dimension.label ?? undefined,
+                type: dimension.role === 'time' ? 'time' : 'category',
+            },
+            y: {
+                label: metrics.length === 1
+                    ? firstMetric?.label ?? firstMetric?.field
+                    : undefined,
+                type: 'value',
+            },
+        };
+    }
+    buildSeries(projection, chartType) {
+        const dimension = projection.bindings.primaryDimension;
+        const comparison = projection.source.operation === 'comparison';
+        return this.getDisplayMetrics(projection).flatMap((metric, index) => comparison
+            ? ['current', 'previous'].map((period) => ({
+                id: `${projection.id}.${metric.field}.${period}`,
+                name: `${metric.label ?? metric.field} (${this.comparisonPeriodLabel(period)})`,
+                type: chartType,
+                categoryField: dimension.field,
+                metric: { field: this.comparisonMetricField(metric.field, period), aggregation: this.mapAggregation(metric.aggregation) },
+            }))
+            : [{
+                    id: `${projection.id}.${metric.field}.${index + 1}`,
+                    name: metric.label ?? metric.field,
+                    type: chartType,
+                    categoryField: this.isCategorySliceChart(chartType) ? dimension.field : undefined,
+                    metric: {
+                        field: metric.field,
+                        aggregation: this.mapAggregation(metric.aggregation),
+                        label: metric.label ?? undefined,
                     },
-                },
-            yAxis: horizontal
-                ? {
-                    type: config.axes?.x?.type ?? 'category',
-                    name: config.axes?.x?.label,
-                    data: transformed.categories,
-                    axisLabel: {
-                        show: config.axes?.x?.labels?.visible ?? true,
-                        color: textColor,
-                        rotate: config.axes?.x?.labels?.rotate ?? 0,
-                        hideOverlap: true,
-                        overflow: 'truncate',
-                        width: 160,
-                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
-                    },
-                }
-                : this.buildCartesianYAxis(config),
-            series: transformed.series.map((series) => ({
-                id: series.id,
-                name: series.name,
-                type: series.type,
-                yAxisIndex: series.axis === 'secondary' ? 1 : 0,
-                stack: series.stack,
-                smooth: series.smooth,
-                areaStyle: series.area ? {} : undefined,
-                label: {
-                    show: series.labelsVisible,
-                    color: textColor,
-                    formatter: series.labelsVisible
-                        ? (params) => this.formatValue(params.value, this.seriesLabelFormat(config, series.id))
-                        : undefined,
-                },
-                itemStyle: series.color ? { color: series.color } : undefined,
-                data: series.points,
-            })),
-        };
-    }
-    resolveText(value) {
-        if (!value)
-            return undefined;
-        if (typeof value === 'string')
-            return value;
-        if (typeof value === 'object' && value && 'text' in value) {
-            const text = value.text;
-            return text || undefined;
-        }
-        if (typeof value === 'object' && value && 'fallback' in value) {
-            const fallback = value.fallback;
-            return fallback || undefined;
-        }
-        return undefined;
-    }
-    resolveTextColor(config) {
-        return config.theme?.textColor ?? '#4b5563';
-    }
-    hasText(value) {
-        const text = this.resolveText(value);
-        return !!text && text.trim().length > 0;
+                    smooth: chartType === 'line' || chartType === 'area',
+                }]);
     }
-    buildTitle(config, align, textColor = this.resolveTextColor(config)) {
-        const title = this.resolveText(config.title);
-        const subtitle = this.resolveText(config.subtitle);
-        const hasTitle = !!title || !!subtitle;
+    buildDataSource(projection) {
+        const executionPlan = this.statsBuilder.buildExecutionPlan(projection);
         return {
-            show: hasTitle,
-            text: title,
-            subtext: subtitle,
-            top: TITLE_TOP,
-            left: align === 'center' ? 'center' : TITLE_LEFT,
-            right: TITLE_LEFT,
-            textStyle: {
-                fontSize: 18,
-                fontWeight: 600,
-                lineHeight: 24,
-                color: textColor,
-                overflow: 'truncate',
-            },
-            subtextStyle: {
-                fontSize: 12,
-                lineHeight: 18,
-                color: textColor,
-                overflow: 'truncate',
+            kind: 'remote',
+            resourcePath: executionPlan.resourcePath,
+            schemaId: executionPlan.resourcePath,
+            query: {
+                sourceKind: 'praxis.stats',
+                statsOperation: executionPlan.operation,
+                statsPath: executionPlan.statsPath,
+                statsRequest: executionPlan.statsRequest,
+                dimensions: executionPlan.dimensions,
+                metrics: projection.source.operation === 'comparison'
+                    ? this.getDisplayMetrics(projection).flatMap((metric) => ['current', 'previous'].map((period) => ({
+                        field: this.comparisonMetricField(metric.field, period),
+                        aggregation: this.mapAggregation(metric.aggregation),
+                        alias: this.comparisonMetricField(metric.field, period),
+                    })))
+                    : this.mapExecutionMetrics(executionPlan),
+                sort: executionPlan.sort,
+                limit: executionPlan.limit,
             },
         };
     }
-    buildLegend(config, visible, fallbackPosition, textColor = this.resolveTextColor(config)) {
-        if (!visible) {
-            return { show: false };
+    resolveChartType(projection) {
+        if (projection.intent === 'trend' && projection.source.operation === 'timeseries') {
+            return 'line';
         }
-        const position = config.theme?.legend?.position ?? fallbackPosition;
-        const base = {
-            show: true,
-            type: 'scroll',
-            pageIconSize: 10,
-            itemWidth: 18,
-            itemHeight: 10,
-            textStyle: {
-                color: textColor,
-            },
-            formatter: (name) => truncateLegendText(name),
-        };
-        if (position === 'top') {
-            return {
-                ...base,
-                orient: 'horizontal',
-                top: this.hasText(config.title) || this.hasText(config.subtitle) ? 70 : 12,
-                left: 'center',
-                right: TITLE_LEFT,
-            };
+        if (projection.intent === 'ranking' && projection.source.operation === 'group-by') {
+            return 'horizontal-bar';
         }
-        if (position === 'left' || position === 'right') {
-            return {
-                ...base,
-                orient: 'vertical',
-                top: 88,
-                bottom: 28,
-                [position]: 10,
-            };
+        if (projection.intent === 'composition') {
+            return 'pie';
         }
-        return {
-            ...base,
-            orient: 'horizontal',
-            bottom: 16,
-            left: TITLE_LEFT,
-            right: TITLE_LEFT,
-        };
+        if (projection.intent === 'distribution') {
+            return 'bar';
+        }
+        return 'bar';
     }
-    buildGrid(config, options = {}) {
-        const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
-        const legendPosition = config.theme?.legend?.position ?? 'bottom';
-        const sideLegend = options.legendVisible && (legendPosition === 'left' || legendPosition === 'right');
-        return {
-            top: hasChartTitle ? CARTESIAN_GRID_TOP_WITH_TITLE : CARTESIAN_GRID_TOP_WITHOUT_TITLE,
-            right: sideLegend && legendPosition === 'right' ? 160 : 32,
-            bottom: options.legendVisible && legendPosition === 'bottom'
-                ? CARTESIAN_GRID_BOTTOM_WITH_LEGEND
-                : CARTESIAN_GRID_BOTTOM_WITHOUT_LEGEND,
-            left: sideLegend && legendPosition === 'left'
-                ? 168
-                : options.horizontal ? 136 : 56,
-            // ECharts deprecou containLabel; esta combinacao preserva o mesmo comportamento
-            // sem depender da feature legacy de grid.
-            outerBoundsMode: 'same',
-            outerBoundsContain: 'axisLabel',
-        };
+    isCategorySliceChart(chartType) {
+        return chartType === 'pie' || chartType === 'donut' || chartType === 'funnel' || chartType === 'pyramid';
     }
-    buildCartesianYAxis(config) {
-        const textColor = this.resolveTextColor(config);
-        const primaryAxis = {
-            type: config.axes?.y?.type ?? 'value',
-            name: config.axes?.y?.label,
-            nameLocation: 'middle',
-            nameGap: 40,
-            min: config.axes?.y?.min,
-            max: config.axes?.y?.max,
-            axisLabel: {
-                show: config.axes?.y?.labels?.visible ?? true,
-                color: textColor,
-                hideOverlap: true,
-                formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
-            },
-        };
-        if (!config.axes?.ySecondary) {
-            return primaryAxis;
+    mapAggregation(aggregation) {
+        const normalizedAggregation = (aggregation ?? '').toLowerCase();
+        switch (normalizedAggregation) {
+            case 'avg':
+            case 'min':
+            case 'max':
+            case 'count':
+            case 'distinct-count':
+            case 'sum':
+                return normalizedAggregation;
+            case '':
+                return undefined;
+            default:
+                throw new Error(`Analytics aggregation "${aggregation}" is not supported in @praxisui/charts.`);
         }
+    }
+    mapExecutionMetrics(executionPlan) {
+        return executionPlan.metrics.map((metric) => ({
+            field: metric.field,
+            aggregation: this.mapAggregation(metric.aggregation),
+            alias: metric.alias,
+        }));
+    }
+    getDisplayMetrics(projection) {
         return [
-            primaryAxis,
-            {
-                type: config.axes.ySecondary.type ?? 'value',
-                name: config.axes.ySecondary.label,
-                nameLocation: 'middle',
-                nameGap: 40,
-                min: config.axes.ySecondary.min,
-                max: config.axes.ySecondary.max,
-                position: config.axes.ySecondary.position ?? 'right',
-                axisLabel: {
-                    show: config.axes.ySecondary.labels?.visible ?? true,
-                    color: textColor,
-                    hideOverlap: true,
-                    formatter: this.axisLabelFormatter(config.axes.ySecondary.labels?.format),
-                },
-            },
+            ...(projection.bindings.primaryMetrics ?? []),
+            ...(projection.bindings.secondaryMetrics ?? []),
         ];
     }
-    primaryValueFormat(config) {
-        return config.series.find((series) => series.axis !== 'secondary')?.labels?.format
-            ?? config.axes?.y?.labels?.format
-            ?? config.series[0]?.labels?.format;
-    }
-    buildCartesianTooltip(config) {
-        const tooltip = {
-            trigger: config.theme?.tooltip?.trigger ?? 'axis',
-            confine: true,
-            appendToBody: false,
-            valueFormatter: (value) => this.formatValue(value, this.primaryValueFormat(config)),
-        };
-        return this.usesCanonicalStatsTime(config)
-            ? {
-                ...tooltip,
-                formatter: (params) => this.formatCanonicalTimeTooltip(params, config),
-            }
-            : tooltip;
+    comparisonMetricField(metricField, period) {
+        return `__praxisComparison_${metricField}_${period}`;
     }
-    usesCanonicalStatsTime(config) {
-        if (config.dataSource?.kind !== 'remote'
-            || config.dataSource.query?.sourceKind !== 'praxis.stats') {
-            return false;
-        }
-        return config.axes?.x?.type === 'time'
-            || config.dataSource.query.statsOperation === 'timeseries';
+    comparisonPeriodLabel(period) {
+        const key = period === 'current'
+            ? 'praxis.charts.runtime.comparisonCurrent'
+            : 'praxis.charts.runtime.comparisonPrevious';
+        const fallback = period === 'current' ? 'Current' : 'Previous';
+        return this.i18n?.t(key, undefined, fallback, 'charts') ?? fallback;
     }
-    formatCanonicalTimeTooltip(params, config) {
-        const items = (Array.isArray(params) ? params : [params])
-            .filter((item) => !!item && typeof item === 'object');
-        if (!items.length) {
-            return '';
-        }
-        const first = items[0];
-        const data = this.tooltipPointData(first['data']);
-        const header = this.formatCanonicalTimeTooltipHeader(first, data, config);
-        const lines = items.map((item) => {
-            const itemData = this.tooltipPointData(item['data']);
-            const seriesId = item['seriesId'] === null || item['seriesId'] === undefined
-                ? undefined
-                : String(item['seriesId']);
-            const format = seriesId
-                ? this.seriesLabelFormat(config, seriesId) ?? this.primaryValueFormat(config)
-                : this.primaryValueFormat(config);
-            const value = this.formatValue(item['value'] ?? itemData['value'], format);
-            const seriesName = item['seriesName'] === null || item['seriesName'] === undefined
-                ? ''
-                : String(item['seriesName']);
-            return seriesName
-                ? `${escapeTooltipHtml(seriesName)}: ${escapeTooltipHtml(value)}`
-                : escapeTooltipHtml(value);
-        });
-        return [escapeTooltipHtml(header), ...lines]
-            .filter((part) => part.length > 0)
-            .join('<br/>');
-    }
-    formatCanonicalTimeTooltipHeader(params, data, config) {
-        const dateFormat = config.axes?.x?.labels?.format;
-        const label = this.nonEmptyText(data['label']);
-        const start = this.nonEmptyText(data['start']);
-        const end = this.nonEmptyText(data['end']);
-        const formattedStart = start ? this.formatValue(start, dateFormat) : '';
-        const formattedEnd = end ? this.formatValue(end, dateFormat) : '';
-        const interval = formattedStart && formattedEnd && formattedStart !== formattedEnd
-            ? `${formattedStart} – ${formattedEnd}`
-            : formattedStart || formattedEnd;
-        const fallback = this.nonEmptyText(params['axisValueLabel'])
-            ?? this.nonEmptyText(params['name'])
-            ?? '';
-        if (label && interval && label !== formattedStart && label !== interval) {
-            return `${label} · ${interval}`;
-        }
-        return interval || label || fallback;
-    }
-    tooltipPointData(value) {
-        return value && typeof value === 'object' && !Array.isArray(value)
-            ? value
-            : {};
-    }
-    nonEmptyText(value) {
-        if (value === null || value === undefined) {
-            return undefined;
-        }
-        const text = String(value).trim();
-        return text || undefined;
-    }
-    seriesLabelFormat(config, seriesId) {
-        return config.series.find((series) => series.id === seriesId)?.labels?.format;
-    }
-    axisLabelFormatter(format) {
-        return format ? (value) => this.formatValue(value, format) : undefined;
-    }
-    formatValue(value, format) {
-        const normalizedValue = Array.isArray(value) ? value[value.length - 1] : value;
-        if (normalizedValue === null || normalizedValue === undefined || normalizedValue === '') {
-            return '';
-        }
-        if (!format) {
-            return String(normalizedValue);
-        }
-        const formattedDate = this.formatDateValue(normalizedValue, format);
-        if (formattedDate !== null) {
-            return formattedDate;
-        }
-        const numeric = typeof normalizedValue === 'number'
-            ? normalizedValue
-            : Number(String(normalizedValue).replace(',', '.'));
-        if (!Number.isFinite(numeric)) {
-            return String(normalizedValue);
-        }
-        const currency = this.parseCurrencyFormat(format);
-        if (currency) {
-            return new Intl.NumberFormat(DEFAULT_VALUE_LOCALE, {
-                style: 'currency',
-                currency: currency.code,
-                currencyDisplay: currency.display,
-                minimumFractionDigits: currency.decimals,
-                maximumFractionDigits: currency.decimals,
-                useGrouping: currency.useGrouping,
-            }).format(numeric);
-        }
-        const number = this.parseNumberFormat(format);
-        if (number) {
-            return new Intl.NumberFormat(DEFAULT_VALUE_LOCALE, {
-                minimumFractionDigits: number.minimumFractionDigits,
-                maximumFractionDigits: number.maximumFractionDigits,
-                useGrouping: number.useGrouping,
-            }).format(numeric);
-        }
-        return String(normalizedValue);
-    }
-    formatDateValue(value, format) {
-        if (!this.isDateFormat(format)) {
-            return null;
-        }
-        const parts = this.readDateParts(value);
-        if (!parts) {
-            return null;
-        }
-        const day = String(parts.day);
-        const day2 = day.padStart(2, '0');
-        const month = String(parts.month);
-        const month2 = month.padStart(2, '0');
-        const year = String(parts.year);
-        const year2 = year.slice(-2);
-        const date = new Date(parts.year, parts.month - 1, parts.day);
-        const monthShort = new Intl.DateTimeFormat(DEFAULT_VALUE_LOCALE, { month: 'short' }).format(date);
-        const monthLong = new Intl.DateTimeFormat(DEFAULT_VALUE_LOCALE, { month: 'long' }).format(date);
-        return format
-            .replace(/yyyy/g, year)
-            .replace(/yy/g, year2)
-            .replace(/MMMM/g, monthLong)
-            .replace(/MMM/g, monthShort)
-            .replace(/MM/g, month2)
-            .replace(/M/g, month)
-            .replace(/dd/g, day2)
-            .replace(/d/g, day);
-    }
-    isDateFormat(format) {
-        return /(^|[^A-Za-z])(d{1,2}|M{1,4}|y{2,4})(?=$|[^A-Za-z])/.test(format);
-    }
-    readDateParts(value) {
-        if (value instanceof Date) {
-            return Number.isNaN(value.getTime())
-                ? null
-                : { year: value.getFullYear(), month: value.getMonth() + 1, day: value.getDate() };
-        }
-        if (typeof value === 'number') {
-            const date = new Date(value);
-            return Number.isNaN(date.getTime())
-                ? null
-                : { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
-        }
-        const raw = String(value).trim();
-        const isoDate = /^(\d{4})-(\d{2})-(\d{2})(?:[T\s].*)?$/.exec(raw);
-        if (isoDate) {
-            return {
-                year: Number(isoDate[1]),
-                month: Number(isoDate[2]),
-                day: Number(isoDate[3]),
-            };
-        }
-        const brazilianDate = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(raw);
-        if (brazilianDate) {
-            return {
-                year: Number(brazilianDate[3]),
-                month: Number(brazilianDate[2]),
-                day: Number(brazilianDate[1]),
-            };
-        }
-        const parsed = new Date(raw);
-        return Number.isNaN(parsed.getTime())
-            ? null
-            : { year: parsed.getFullYear(), month: parsed.getMonth() + 1, day: parsed.getDate() };
-    }
-    parseCurrencyFormat(format) {
-        const parts = format.split('|').map((part) => part.trim()).filter(Boolean);
-        const code = parts[0]?.toUpperCase();
-        if (!code || !/^[A-Z]{3}$/.test(code)) {
-            return null;
-        }
-        const display = this.normalizeCurrencyDisplay(parts[1]);
-        const decimals = this.clampDecimals(Number.parseInt(parts[2] ?? '2', 10), 2);
-        return {
-            code,
-            display,
-            decimals,
-            useGrouping: !parts.some((part) => part.toLowerCase() === 'nosep'),
-        };
-    }
-    normalizeCurrencyDisplay(value) {
-        if (value === 'code' || value === 'name' || value === 'narrowSymbol') {
-            return value;
-        }
-        return 'symbol';
-    }
-    parseNumberFormat(format) {
-        const [pattern, ...modifiers] = format.split('|').map((part) => part.trim());
-        const match = /^(\d+)\.(\d+)-(\d+)$/.exec(pattern);
-        if (!match) {
-            return null;
-        }
-        return {
-            minimumFractionDigits: this.clampDecimals(Number.parseInt(match[2], 10), 0),
-            maximumFractionDigits: this.clampDecimals(Number.parseInt(match[3], 10), 0),
-            useGrouping: !modifiers.some((part) => part.toLowerCase() === 'nosep'),
-        };
-    }
-    clampDecimals(value, fallback) {
-        if (!Number.isFinite(value)) {
-            return fallback;
-        }
-        return Math.min(Math.max(value, 0), 20);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsOptionBuilderService, deps: [{ token: PraxisChartDataTransformerService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsOptionBuilderService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, deps: [{ token: i1.PraxisI18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsOptionBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: PraxisChartDataTransformerService }] });
-function truncateLegendText(name) {
-    const value = String(name ?? '').trim();
-    if (value.length <= 28) {
-        return value;
-    }
-    return `${value.slice(0, 25)}...`;
-}
-function escapeTooltipHtml(value) {
-    return String(value ?? '')
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
-}
-
-use([
-    AriaComponent,
-    BarChart,
-    CanvasRenderer,
-    DatasetComponent,
-    GridComponent,
-    LegendComponent,
-    LineChart,
-    PieChart,
-    ScatterChart,
-    TitleComponent,
-    TooltipComponent,
-    TransformComponent,
-]);
-class EChartsEngineAdapter {
-    optionBuilder;
-    chart;
-    currentHost;
-    clickHost;
-    domClickHandler;
-    zrenderClickHandler;
-    lastSeriesClickAt = 0;
-    lastGridClick;
-    constructor(optionBuilder) {
-        this.optionBuilder = optionBuilder;
-    }
-    render(host, payload) {
-        if (this.chart && this.currentHost !== host) {
-            this.disposeChart();
-        }
-        if (!this.chart) {
-            this.chart = this.createChart(host);
-            this.currentHost = host;
-        }
-        const option = this.optionBuilder.build(payload.config, payload.data);
-        const chart = this.chart;
-        chart.setOption(option, true);
-        this.detachHandlers();
-        chart.off('click');
-        chart.on('click', (params) => {
-            this.lastSeriesClickAt = Date.now();
-            this.lastGridClick = undefined;
-            const data = pointData(params?.name, params?.data ?? params?.value);
-            payload.onPointClick?.({
-                chartId: payload.config.id,
-                seriesId: params?.seriesId,
-                seriesName: params?.seriesName,
-                category: this.resolvePointCategory(payload, data, params?.name),
-                value: pointValue(params?.value ?? params?.data),
-                data,
-            });
-        });
-        const zrender = chart?.getZr?.();
-        this.zrenderClickHandler = (event) => {
-            window.setTimeout(() => {
-                if (Date.now() - this.lastSeriesClickAt < 80) {
-                    return;
-                }
-                this.emitCategoryClickFromGrid(event, payload);
-            }, 0);
-        };
-        zrender?.on?.('click', this.zrenderClickHandler);
-        this.domClickHandler = (event) => {
-            window.setTimeout(() => {
-                if (Date.now() - this.lastSeriesClickAt < 80) {
-                    return;
-                }
-                const rect = host.getBoundingClientRect();
-                const offsetX = Number.isFinite(event.offsetX) ? event.offsetX : event.clientX - rect.left;
-                const offsetY = Number.isFinite(event.offsetY) ? event.offsetY : event.clientY - rect.top;
-                this.emitCategoryClickFromGrid({
-                    offsetX,
-                    offsetY,
-                }, payload);
-            }, 0);
-        };
-        host.addEventListener('click', this.domClickHandler, true);
-        this.clickHost = host;
-    }
-    resize() {
-        this.chart?.resize();
-    }
-    destroy() {
-        this.disposeChart();
-    }
-    createChart(host) {
-        return init(host);
-    }
-    disposeChart() {
-        this.detachHandlers();
-        this.chart?.off('click');
-        this.chart?.dispose();
-        this.chart = undefined;
-        this.currentHost = undefined;
-        this.lastSeriesClickAt = 0;
-        this.lastGridClick = undefined;
-    }
-    detachHandlers() {
-        const zrender = this.chart?.getZr?.();
-        if (zrender && this.zrenderClickHandler) {
-            zrender.off?.('click', this.zrenderClickHandler);
-        }
-        if (this.clickHost && this.domClickHandler) {
-            this.clickHost.removeEventListener('click', this.domClickHandler, true);
-        }
-        this.clickHost = undefined;
-        this.domClickHandler = undefined;
-        this.zrenderClickHandler = undefined;
-    }
-    resolvePointCategory(payload, data, fallback) {
-        const categoryField = payload.config.axes?.x?.field
-            ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
-        const dataSource = payload.config.dataSource;
-        const usesCanonicalStatsTime = dataSource?.kind === 'remote'
-            && dataSource.query?.sourceKind === 'praxis.stats';
-        const usesCanonicalStatsTimePoint = usesCanonicalStatsTime
-            && (payload.config.axes?.x?.type === 'time'
-                || (dataSource?.kind === 'remote' && dataSource.query?.statsOperation === 'timeseries'));
-        const candidate = usesCanonicalStatsTimePoint && data['label'] !== null
-            && data['label'] !== undefined
-            && data['label'] !== ''
-            ? data['label']
-            : categoryField && data[categoryField] !== null && data[categoryField] !== undefined
-                ? data[categoryField]
-                : fallback;
-        return candidate === null || candidate === undefined
-            ? undefined
-            : String(candidate);
-    }
-    emitCategoryClickFromGrid(event, payload) {
-        const chart = this.chart;
-        if (!chart || typeof chart.containPixel !== 'function' || typeof chart.convertFromPixel !== 'function') {
-            return;
-        }
-        const point = [event?.offsetX, event?.offsetY];
-        if (!Number.isFinite(point[0]) || !Number.isFinite(point[1])) {
-            return;
-        }
-        if (!chart.containPixel({ gridIndex: 0 }, point)) {
-            return;
-        }
-        const option = chart.getOption?.();
-        const xAxis = firstOptionEntry(option?.xAxis);
-        const yAxis = firstOptionEntry(option?.yAxis);
-        const horizontal = yAxis?.type === 'category';
-        const categories = (horizontal ? yAxis?.data : xAxis?.data) ?? [];
-        if (!Array.isArray(categories) || categories.length === 0) {
-            return;
-        }
-        const converted = chart.convertFromPixel({ gridIndex: 0 }, point);
-        const categoryIndex = Math.round(Number(horizontal ? converted?.[1] : converted?.[0]));
-        if (!Number.isInteger(categoryIndex) || categoryIndex < 0 || categoryIndex >= categories.length) {
-            return;
-        }
-        const category = categories[categoryIndex];
-        const categoryValue = category == null ? undefined : String(category);
-        const categoryField = payload.config.axes?.x?.field
-            ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
-        const signature = JSON.stringify({
-            chartId: payload.config.id,
-            category: categoryValue,
-            horizontal,
-            categoryIndex,
-        });
-        if (this.isDuplicateGridClick(signature)) {
-            return;
-        }
-        const usesCanonicalStatsRows = payload.config.dataSource?.kind === 'remote'
-            && payload.config.dataSource.query?.sourceKind === 'praxis.stats';
-        const fallbackSourceRow = !usesCanonicalStatsRows
-            && categoryField
-            && categoryValue !== undefined
-            ? payload.data.find((row) => String(row[categoryField] ?? '') === categoryValue)
-            : undefined;
-        const sourceRow = usesCanonicalStatsRows
-            ? payload.data[categoryIndex]
-            : fallbackSourceRow;
-        const data = {
-            ...(sourceRow ?? {}),
-            category: categoryValue,
-        };
-        if (categoryField && categoryValue !== undefined) {
-            data[categoryField] = categoryValue;
-        }
-        payload.onPointClick?.({
-            chartId: payload.config.id,
-            category: categoryValue,
-            data,
-        });
-    }
-    isDuplicateGridClick(signature) {
-        const now = Date.now();
-        const duplicate = this.lastGridClick?.signature === signature
-            && now - this.lastGridClick.at < 80;
-        this.lastGridClick = { signature, at: now };
-        return duplicate;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsEngineAdapter, deps: [{ token: EChartsOptionBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsEngineAdapter });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsEngineAdapter, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: EChartsOptionBuilderService }] });
-function firstOptionEntry(value) {
-    return Array.isArray(value) ? value[0] : value;
-}
-function pointValue(value) {
-    if (Array.isArray(value)) {
-        return value.length > 1 ? value[1] : value[0];
-    }
-    if (value && typeof value === 'object' && 'value' in value) {
-        return pointValue(value.value);
-    }
-    return value;
-}
-function pointData(category, value) {
-    if (value && typeof value === 'object' && !Array.isArray(value)) {
-        return value;
-    }
-    return {
-        category,
-        value: pointValue(value),
-    };
-}
+        }], ctorParameters: () => [{ type: i1.PraxisI18nService, decorators: [{
+                    type: Optional
+                }] }] });
 
 const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.runtime.editChart': 'Edit chart settings',
@@ -4645,7 +4030,7 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.paletteToken.brand-balanced': 'Brand balanced',
     'praxis.charts.editor.paletteToken.status': 'Status',
     'praxis.charts.editor.paletteToken.executive': 'Executive',
-    'praxis.charts.editor.specialization.pieDonutHint': 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.',
+    'praxis.charts.editor.specialization.pieDonutHint': 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.',
     'praxis.charts.editor.specialization.scatterTitle': 'Scatter guidance',
     'praxis.charts.editor.specialization.scatterHint': 'Scatter charts use the first dimension as X and the first metric as Y.',
     'praxis.charts.editor.events.pointClickTitle': 'Point click',
@@ -4714,6 +4099,17 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.kind.pie': 'Pie',
     'praxis.charts.editor.kind.donut': 'Donut',
     'praxis.charts.editor.kind.scatter': 'Scatter',
+    'praxis.charts.editor.kind.funnel': 'Funnel',
+    'praxis.charts.editor.kind.pyramid': 'Pyramid',
+    'praxis.charts.analyticsPresentation.selectorLabel': 'Analytics presentation',
+    'praxis.charts.analyticsPresentation.chart': 'Chart',
+    'praxis.charts.analyticsPresentation.table': 'Table',
+    'praxis.charts.analyticsPresentation.unavailable': 'Presentation unavailable',
+    'praxis.charts.analyticsPresentation.loading': 'Loading analytics…',
+    'praxis.charts.analyticsPresentation.empty': 'No data available.',
+    'praxis.charts.analyticsPresentation.projectionMissing': 'Analytics projection "{projectionId}" was not found.',
+    'praxis.charts.analyticsPresentation.noRenderer': 'Analytics projection "{projectionId}" has no eligible installed renderer.',
+    'praxis.charts.analyticsPresentation.familyIneligible': 'Presentation family "{family}" is not eligible for projection "{projectionId}".',
 };
 
 const PRAXIS_CHARTS_PT_BR = {
@@ -4852,7 +4248,7 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.paletteToken.brand-balanced': 'Marca balanceada',
     'praxis.charts.editor.paletteToken.status': 'Status',
     'praxis.charts.editor.paletteToken.executive': 'Executiva',
-    'praxis.charts.editor.specialization.pieDonutHint': 'Gráficos de pizza (pie) e rosca (donut) mantêm apenas a primeira métrica e usam a primeira dimensão como segmento categórico.',
+    'praxis.charts.editor.specialization.pieDonutHint': 'Gráficos de pizza, rosca, funil e pirâmide mantêm uma métrica e usam a primeira dimensão como segmento categórico.',
     'praxis.charts.editor.specialization.scatterTitle': 'Guia de dispersão (scatter)',
     'praxis.charts.editor.specialization.scatterHint': 'Gráficos de dispersão usam a primeira dimensão como eixo X e a primeira métrica como eixo Y.',
     'praxis.charts.editor.events.pointClickTitle': 'Clique no ponto',
@@ -4921,56 +4317,1121 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.kind.pie': 'Pizza (Pie)',
     'praxis.charts.editor.kind.donut': 'Rosca (Donut)',
     'praxis.charts.editor.kind.scatter': 'Dispersão (Scatter)',
+    'praxis.charts.editor.kind.funnel': 'Funil',
+    'praxis.charts.editor.kind.pyramid': 'Pirâmide',
+    'praxis.charts.analyticsPresentation.selectorLabel': 'Apresentação analítica',
+    'praxis.charts.analyticsPresentation.chart': 'Gráfico',
+    'praxis.charts.analyticsPresentation.table': 'Tabela',
+    'praxis.charts.analyticsPresentation.unavailable': 'Apresentação indisponível',
+    'praxis.charts.analyticsPresentation.loading': 'Carregando dados analíticos…',
+    'praxis.charts.analyticsPresentation.empty': 'Nenhum dado disponível.',
+    'praxis.charts.analyticsPresentation.projectionMissing': 'A projection analítica "{projectionId}" não foi encontrada.',
+    'praxis.charts.analyticsPresentation.noRenderer': 'A projection analítica "{projectionId}" não possui renderer instalado elegível.',
+    'praxis.charts.analyticsPresentation.familyIneligible': 'A família de apresentação "{family}" não é elegível para a projection "{projectionId}".',
 };
 
-const PRAXIS_CHARTS_I18N = new InjectionToken('PRAXIS_CHARTS_I18N', {
-    factory: () => ({}),
-});
-function createPraxisChartsI18nConfig(options = {}) {
-    const localeDictionaries = {
-        'pt-BR': {
-            ...PRAXIS_CHARTS_PT_BR,
-            ...(options.dictionaries?.['pt-BR'] ?? {}),
-        },
-        'en-US': {
-            ...PRAXIS_CHARTS_EN_US,
-            ...(options.dictionaries?.['en-US'] ?? {}),
-        },
-    };
-    for (const [locale, dictionary] of Object.entries(options.dictionaries ?? {})) {
-        if (locale === 'pt-BR' || locale === 'en-US') {
-            continue;
+const PRAXIS_CHARTS_I18N = new InjectionToken('PRAXIS_CHARTS_I18N', {
+    factory: () => ({}),
+});
+function createPraxisChartsI18nConfig(options = {}) {
+    const localeDictionaries = {
+        'pt-BR': {
+            ...PRAXIS_CHARTS_PT_BR,
+            ...(options.dictionaries?.['pt-BR'] ?? {}),
+        },
+        'en-US': {
+            ...PRAXIS_CHARTS_EN_US,
+            ...(options.dictionaries?.['en-US'] ?? {}),
+        },
+    };
+    for (const [locale, dictionary] of Object.entries(options.dictionaries ?? {})) {
+        if (locale === 'pt-BR' || locale === 'en-US') {
+            continue;
+        }
+        localeDictionaries[locale] = {
+            ...(localeDictionaries[locale] ?? {}),
+            ...dictionary,
+        };
+    }
+    return {
+        locale: options.locale,
+        fallbackLocale: options.fallbackLocale ?? 'pt-BR',
+        namespaces: {
+            charts: localeDictionaries,
+        },
+    };
+}
+function providePraxisChartsI18n(options = {}) {
+    return [
+        {
+            provide: PRAXIS_CHARTS_I18N,
+            useValue: {},
+        },
+        providePraxisI18n(createPraxisChartsI18nConfig(options)),
+    ];
+}
+function resolvePraxisChartsText(value, fallback) {
+    if (typeof value === 'string') {
+        return { text: value };
+    }
+    if (value?.key || value?.text) {
+        return value;
+    }
+    return { text: fallback ?? '' };
+}
+
+const INSTALLED_FAMILIES = ['chart', 'analytic-table'];
+class PraxisAnalyticsPresentationComponent {
+    analytics = input.required(...(ngDevMode ? [{ debugName: "analytics" }] : /* istanbul ignore next */ []));
+    projectionId = input.required(...(ngDevMode ? [{ debugName: "projectionId" }] : /* istanbul ignore next */ []));
+    availableFamilies = input(INSTALLED_FAMILIES, ...(ngDevMode ? [{ debugName: "availableFamilies" }] : /* istanbul ignore next */ []));
+    preferredFamily = input(null, ...(ngDevMode ? [{ debugName: "preferredFamily" }] : /* istanbul ignore next */ []));
+    queryContext = input(null, ...(ngDevMode ? [{ debugName: "queryContext" }] : /* istanbul ignore next */ []));
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization" }] : /* istanbul ignore next */ []));
+    presentationChange = output();
+    pointClick = output();
+    pointAction = output();
+    selectionChange = output();
+    drillDown = output();
+    crossFilter = output();
+    queryRequest = output();
+    loadStateChange = output();
+    resolver = inject(AnalyticsPresentationResolver);
+    i18n = inject(PraxisI18nService);
+    chartAdapter = inject(AnalyticsChartConfigAdapterService);
+    tableAdapter = inject(AnalyticsTableConfigAdapterService);
+    tableStats = inject(AnalyticsTableStatsApiService);
+    temporaryFamily = signal(null, ...(ngDevMode ? [{ debugName: "temporaryFamily" }] : /* istanbul ignore next */ []));
+    tableRows = signal([], ...(ngDevMode ? [{ debugName: "tableRows" }] : /* istanbul ignore next */ []));
+    tableState = signal('idle', ...(ngDevMode ? [{ debugName: "tableState" }] : /* istanbul ignore next */ []));
+    tableDiagnostic = signal(null, ...(ngDevMode ? [{ debugName: "tableDiagnostic" }] : /* istanbul ignore next */ []));
+    tableRequestGeneration = 0;
+    previousProjectionId = null;
+    resolved = computed(() => this.resolvePresentation(), ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    activeFamily = computed(() => this.resolved().family, ...(ngDevMode ? [{ debugName: "activeFamily" }] : /* istanbul ignore next */ []));
+    eligibleFamilies = computed(() => this.resolved().eligibleFamilies, ...(ngDevMode ? [{ debugName: "eligibleFamilies" }] : /* istanbul ignore next */ []));
+    diagnostic = computed(() => this.resolved().diagnostic ?? this.tableDiagnostic(), ...(ngDevMode ? [{ debugName: "diagnostic" }] : /* istanbul ignore next */ []));
+    chartConfig = computed(() => {
+        const projection = this.resolved().projection;
+        return projection
+            ? this.chartAdapter.toPraxisChartConfig(projection, { title: this.title(), subtitle: this.subtitle() })
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "chartConfig" }] : /* istanbul ignore next */ []));
+    tableConfig = computed(() => {
+        const projection = this.resolved().projection;
+        return projection
+            ? this.tableAdapter.toTableConfig(projection, { title: this.title(), subtitle: this.subtitle() })
+            : null;
+    }, ...(ngDevMode ? [{ debugName: "tableConfig" }] : /* istanbul ignore next */ []));
+    isTableLoading = computed(() => this.tableState() === 'loading', ...(ngDevMode ? [{ debugName: "isTableLoading" }] : /* istanbul ignore next */ []));
+    isTableEmpty = computed(() => this.tableState() === 'ready' && this.tableRows().length === 0, ...(ngDevMode ? [{ debugName: "isTableEmpty" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const projectionId = this.projectionId();
+            if (this.previousProjectionId !== projectionId) {
+                this.previousProjectionId = projectionId;
+                this.temporaryFamily.set(null);
+            }
+        });
+        effect((onCleanup) => {
+            const resolved = this.resolved();
+            const queryContext = this.queryContext();
+            const generation = ++this.tableRequestGeneration;
+            onCleanup(() => {
+                if (this.tableRequestGeneration === generation) {
+                    this.tableRequestGeneration += 1;
+                }
+            });
+            this.tableRows.set([]);
+            this.tableDiagnostic.set(null);
+            this.tableState.set('idle');
+            if (resolved.family !== 'analytic-table' || !resolved.projection) {
+                return;
+            }
+            this.tableState.set('loading');
+            void this.tableStats.execute(resolved.projection, queryContext).then((rows) => {
+                if (this.tableRequestGeneration !== generation)
+                    return;
+                this.tableRows.set(rows);
+                this.tableState.set('ready');
+            }, (error) => {
+                if (this.tableRequestGeneration !== generation)
+                    return;
+                this.tableRows.set([]);
+                this.tableState.set('error');
+                this.tableDiagnostic.set(normalizeError$1(error));
+            });
+        });
+    }
+    selectFamily(family) {
+        if (!this.eligibleFamilies().includes(family)) {
+            this.tableDiagnostic.set(this.message('praxis.charts.analyticsPresentation.familyIneligible', 'Presentation family "{family}" is not eligible for projection "{projectionId}".', { family, projectionId: this.projectionId() }));
+            return;
+        }
+        this.tableDiagnostic.set(null);
+        this.temporaryFamily.set(family);
+        this.presentationChange.emit({
+            projectionId: this.projectionId(),
+            family,
+            source: 'temporary-user-choice',
+        });
+    }
+    handleTableRowClick(event) {
+        const row = event?.row;
+        const projection = this.resolved().projection;
+        if (!row || !projection)
+            return;
+        const dimensionField = projection.bindings.primaryDimension?.field;
+        const metricField = projection.bindings.primaryMetrics[0]?.field;
+        this.pointClick.emit({
+            chartId: projection.id,
+            category: dimensionField ? stringifyValue(row[dimensionField]) : undefined,
+            value: metricField ? row[metricField] : undefined,
+            data: row,
+        });
+    }
+    resolvePresentation() {
+        const projectionId = this.projectionId();
+        const projection = this.analytics().projections.find((candidate) => candidate.id === projectionId) ?? null;
+        if (!projection) {
+            return {
+                projection: null,
+                family: null,
+                eligibleFamilies: [],
+                diagnostic: this.message('praxis.charts.analyticsPresentation.projectionMissing', 'Analytics projection "{projectionId}" was not found.', { projectionId }),
+            };
+        }
+        const authorized = this.availableFamilies().filter((family) => INSTALLED_FAMILIES.includes(family));
+        const eligibleFamilies = authorized.filter((family) => this.isEligible(projection, family));
+        if (!eligibleFamilies.length) {
+            return {
+                projection,
+                family: null,
+                eligibleFamilies,
+                diagnostic: this.message('praxis.charts.analyticsPresentation.noRenderer', 'Analytics projection "{projectionId}" has no eligible installed renderer.', { projectionId }),
+            };
+        }
+        const requestedFamily = this.temporaryFamily() ?? this.preferredFamily();
+        if (requestedFamily && !eligibleFamilies.includes(requestedFamily)) {
+            return {
+                projection,
+                family: null,
+                eligibleFamilies,
+                diagnostic: this.message('praxis.charts.analyticsPresentation.familyIneligible', 'Presentation family "{family}" is not eligible for projection "{projectionId}".', { family: requestedFamily, projectionId }),
+            };
+        }
+        try {
+            const decision = this.resolver.resolve({ projections: [projection] }, { availableFamilies: eligibleFamilies, preferFamily: requestedFamily });
+            return { projection, family: decision.family, eligibleFamilies, diagnostic: null };
+        }
+        catch (error) {
+            return { projection, family: null, eligibleFamilies, diagnostic: normalizeError$1(error) };
+        }
+    }
+    isEligible(projection, family) {
+        try {
+            return this.resolver.resolve({ projections: [projection] }, { availableFamilies: [family], preferFamily: family }).family === family;
+        }
+        catch {
+            return false;
+        }
+    }
+    t(key, fallback) {
+        return this.i18n.resolve(resolvePraxisChartsText({ key, text: fallback }, fallback));
+    }
+    message(key, fallback, values) {
+        return Object.entries(values).reduce((message, [name, value]) => message.replaceAll(`{${name}}`, value), this.t(key, fallback));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisAnalyticsPresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisAnalyticsPresentationComponent, isStandalone: true, selector: "praxis-analytics-presentation", inputs: { analytics: { classPropertyName: "analytics", publicName: "analytics", isSignal: true, isRequired: true, transformFunction: null }, projectionId: { classPropertyName: "projectionId", publicName: "projectionId", isSignal: true, isRequired: true, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, preferredFamily: { classPropertyName: "preferredFamily", publicName: "preferredFamily", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { presentationChange: "presentationChange", pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isTableLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isTableEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"tableRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "authoringCapability", "dense"], outputs: ["rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisAnalyticsPresentationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-analytics-presentation', standalone: true, imports: [PraxisChartComponent, PraxisTable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isTableLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isTableEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"tableRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, #fff);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { analytics: [{ type: i0.Input, args: [{ isSignal: true, alias: "analytics", required: true }] }], projectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "projectionId", required: true }] }], availableFamilies: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFamilies", required: false }] }], preferredFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredFamily", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], presentationChange: [{ type: i0.Output, args: ["presentationChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
+function normalizeError$1(error) {
+    return error instanceof Error && error.message.trim() ? error.message.trim() : 'Analytics presentation failed.';
+}
+function stringifyValue(value) {
+    return value === null || value === undefined ? undefined : String(value);
+}
+
+const PRAXIS_CHART_DEFAULT_PALETTE = ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'];
+const TITLE_TOP = 18;
+const TITLE_LEFT = 24;
+const CARTESIAN_GRID_TOP_WITH_TITLE = 96;
+const CARTESIAN_GRID_TOP_WITHOUT_TITLE = 48;
+const CARTESIAN_GRID_BOTTOM_WITH_LEGEND = 64;
+const CARTESIAN_GRID_BOTTOM_WITHOUT_LEGEND = 40;
+const DEFAULT_VALUE_LOCALE = 'pt-BR';
+class EChartsOptionBuilderService {
+    transformer;
+    constructor(transformer) {
+        this.transformer = transformer;
+    }
+    build(config, rows) {
+        const transformed = this.transformer.transform(config, rows);
+        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;
+        const textColor = this.resolveTextColor(config);
+        if (transformed.mode === 'pie') {
+            const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
+            const labelsVisible = config.series[0]?.labels?.visible ?? transformed.slices.length <= 4;
+            const pieSeries = {
+                type: 'pie',
+                radius: config.type === 'donut'
+                    ? labelsVisible ? ['32%', '52%'] : ['42%', '64%']
+                    : labelsVisible ? '54%' : '66%',
+                center: ['50%', hasChartTitle ? '54%' : '50%'],
+                avoidLabelOverlap: true,
+                label: {
+                    show: labelsVisible,
+                    color: textColor,
+                    overflow: 'truncate',
+                    width: 120,
+                    formatter: labelsVisible
+                        ? (params) => {
+                            const formatted = this.formatValue(params.value, config.series[0]?.labels?.format);
+                            return params.name ? `${params.name}: ${formatted}` : formatted;
+                        }
+                        : undefined,
+                },
+                labelLine: labelsVisible ? { length: 14, length2: 12, lineStyle: { color: textColor } } : undefined,
+                data: transformed.slices.map((slice) => ({
+                    ...(slice.data || {}),
+                    name: slice.name,
+                    value: slice.value,
+                    itemStyle: slice.color ? { color: slice.color } : undefined,
+                })),
+            };
+            return {
+                backgroundColor: config.theme?.backgroundColor,
+                color: palette,
+                title: this.buildTitle(config, 'center', textColor),
+                tooltip: tooltipEnabled
+                    ? {
+                        trigger: 'item',
+                        valueFormatter: (value) => this.formatValue(value, config.series[0]?.labels?.format),
+                    }
+                    : undefined,
+                legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
+                series: [pieSeries],
+            };
+        }
+        if (transformed.mode === 'funnel') {
+            const labelsVisible = config.series[0]?.labels?.visible ?? true;
+            const slices = config.type === 'pyramid'
+                ? [...transformed.slices].reverse()
+                : transformed.slices;
+            const funnelSeries = {
+                type: 'funnel',
+                sort: 'none',
+                funnelAlign: 'center',
+                left: '10%',
+                top: this.hasText(config.title) || this.hasText(config.subtitle) ? 88 : 32,
+                bottom: legendVisible ? 56 : 24,
+                width: '80%',
+                minSize: '0%',
+                maxSize: '100%',
+                gap: 2,
+                label: {
+                    show: labelsVisible,
+                    color: textColor,
+                    overflow: 'truncate',
+                    width: 160,
+                    formatter: labelsVisible
+                        ? (params) => {
+                            const formatted = this.formatValue(params.value, config.series[0]?.labels?.format);
+                            return params.name ? `${params.name}: ${formatted}` : formatted;
+                        }
+                        : undefined,
+                },
+                labelLine: labelsVisible ? { length: 12, lineStyle: { color: textColor } } : undefined,
+                data: slices.map((slice) => ({
+                    ...(slice.data || {}),
+                    name: slice.name,
+                    value: slice.value,
+                    itemStyle: slice.color ? { color: slice.color } : undefined,
+                })),
+            };
+            return {
+                backgroundColor: config.theme?.backgroundColor,
+                color: palette,
+                title: this.buildTitle(config, 'center', textColor),
+                tooltip: tooltipEnabled
+                    ? {
+                        trigger: 'item',
+                        valueFormatter: (value) => this.formatValue(value, config.series[0]?.labels?.format),
+                    }
+                    : undefined,
+                legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
+                series: [funnelSeries],
+            };
+        }
+        if (transformed.mode === 'scatter') {
+            const scatterSeries = transformed.series.map((series) => ({
+                id: series.id,
+                name: series.name,
+                type: 'scatter',
+                label: {
+                    show: series.labelsVisible,
+                    color: textColor,
+                    formatter: series.labelsVisible
+                        ? (params) => this.formatValue(params.value, this.seriesLabelFormat(config, series.id))
+                        : undefined,
+                },
+                itemStyle: series.color ? { color: series.color } : undefined,
+                data: series.points,
+            }));
+            return {
+                backgroundColor: config.theme?.backgroundColor,
+                color: palette,
+                title: this.buildTitle(config, 'left', textColor),
+                tooltip: tooltipEnabled
+                    ? {
+                        trigger: 'item',
+                        valueFormatter: (value) => this.formatValue(value, config.axes?.y?.labels?.format),
+                    }
+                    : undefined,
+                legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
+                grid: this.buildGrid(config, { legendVisible }),
+                xAxis: {
+                    type: config.axes?.x?.type ?? 'value',
+                    name: config.axes?.x?.label,
+                    nameLocation: 'middle',
+                    nameGap: 32,
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        color: textColor,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
+                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
+                    },
+                },
+                yAxis: {
+                    type: config.axes?.y?.type ?? 'value',
+                    name: config.axes?.y?.label,
+                    nameLocation: 'middle',
+                    nameGap: 40,
+                    min: config.axes?.y?.min,
+                    max: config.axes?.y?.max,
+                    axisLabel: {
+                        show: config.axes?.y?.labels?.visible ?? true,
+                        color: textColor,
+                        hideOverlap: true,
+                        formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
+                    },
+                },
+                series: scatterSeries,
+            };
+        }
+        const horizontal = config.orientation === 'horizontal' || config.type === 'horizontal-bar';
+        const xAxisType = this.usesCanonicalStatsTime(config)
+            ? 'time'
+            : config.axes?.x?.type ?? 'category';
+        return {
+            backgroundColor: config.theme?.backgroundColor,
+            color: palette,
+            title: this.buildTitle(config, 'left', textColor),
+            tooltip: tooltipEnabled ? this.buildCartesianTooltip(config) : undefined,
+            legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
+            grid: this.buildGrid(config, { horizontal, legendVisible }),
+            xAxis: horizontal
+                ? {
+                    type: config.axes?.y?.type ?? 'value',
+                    name: config.axes?.y?.label,
+                    nameLocation: 'middle',
+                    nameGap: 32,
+                    min: config.axes?.y?.min,
+                    max: config.axes?.y?.max,
+                    axisLabel: {
+                        show: config.axes?.y?.labels?.visible ?? true,
+                        color: textColor,
+                        hideOverlap: true,
+                        formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
+                    },
+                }
+                : {
+                    type: xAxisType,
+                    name: config.axes?.x?.label,
+                    data: xAxisType === 'time' ? undefined : transformed.categories,
+                    nameLocation: 'middle',
+                    nameGap: 18,
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        color: textColor,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
+                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
+                    },
+                },
+            yAxis: horizontal
+                ? {
+                    type: config.axes?.x?.type ?? 'category',
+                    name: config.axes?.x?.label,
+                    data: transformed.categories,
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        color: textColor,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
+                        overflow: 'truncate',
+                        width: 160,
+                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
+                    },
+                }
+                : this.buildCartesianYAxis(config),
+            series: transformed.series.map((series) => ({
+                id: series.id,
+                name: series.name,
+                type: series.type,
+                yAxisIndex: series.axis === 'secondary' ? 1 : 0,
+                stack: series.stack,
+                smooth: series.smooth,
+                areaStyle: series.area ? {} : undefined,
+                label: {
+                    show: series.labelsVisible,
+                    color: textColor,
+                    formatter: series.labelsVisible
+                        ? (params) => this.formatValue(params.value, this.seriesLabelFormat(config, series.id))
+                        : undefined,
+                },
+                itemStyle: series.color ? { color: series.color } : undefined,
+                data: series.points,
+            })),
+        };
+    }
+    resolveText(value) {
+        if (!value)
+            return undefined;
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'object' && value && 'text' in value) {
+            const text = value.text;
+            return text || undefined;
+        }
+        if (typeof value === 'object' && value && 'fallback' in value) {
+            const fallback = value.fallback;
+            return fallback || undefined;
+        }
+        return undefined;
+    }
+    resolveTextColor(config) {
+        return config.theme?.textColor ?? '#4b5563';
+    }
+    hasText(value) {
+        const text = this.resolveText(value);
+        return !!text && text.trim().length > 0;
+    }
+    buildTitle(config, align, textColor = this.resolveTextColor(config)) {
+        const title = this.resolveText(config.title);
+        const subtitle = this.resolveText(config.subtitle);
+        const hasTitle = !!title || !!subtitle;
+        return {
+            show: hasTitle,
+            text: title,
+            subtext: subtitle,
+            top: TITLE_TOP,
+            left: align === 'center' ? 'center' : TITLE_LEFT,
+            right: TITLE_LEFT,
+            textStyle: {
+                fontSize: 18,
+                fontWeight: 600,
+                lineHeight: 24,
+                color: textColor,
+                overflow: 'truncate',
+            },
+            subtextStyle: {
+                fontSize: 12,
+                lineHeight: 18,
+                color: textColor,
+                overflow: 'truncate',
+            },
+        };
+    }
+    buildLegend(config, visible, fallbackPosition, textColor = this.resolveTextColor(config)) {
+        if (!visible) {
+            return { show: false };
+        }
+        const position = config.theme?.legend?.position ?? fallbackPosition;
+        const base = {
+            show: true,
+            type: 'scroll',
+            pageIconSize: 10,
+            itemWidth: 18,
+            itemHeight: 10,
+            textStyle: {
+                color: textColor,
+            },
+            formatter: (name) => truncateLegendText(name),
+        };
+        if (position === 'top') {
+            return {
+                ...base,
+                orient: 'horizontal',
+                top: this.hasText(config.title) || this.hasText(config.subtitle) ? 70 : 12,
+                left: 'center',
+                right: TITLE_LEFT,
+            };
+        }
+        if (position === 'left' || position === 'right') {
+            return {
+                ...base,
+                orient: 'vertical',
+                top: 88,
+                bottom: 28,
+                [position]: 10,
+            };
+        }
+        return {
+            ...base,
+            orient: 'horizontal',
+            bottom: 16,
+            left: TITLE_LEFT,
+            right: TITLE_LEFT,
+        };
+    }
+    buildGrid(config, options = {}) {
+        const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
+        const legendPosition = config.theme?.legend?.position ?? 'bottom';
+        const sideLegend = options.legendVisible && (legendPosition === 'left' || legendPosition === 'right');
+        return {
+            top: hasChartTitle ? CARTESIAN_GRID_TOP_WITH_TITLE : CARTESIAN_GRID_TOP_WITHOUT_TITLE,
+            right: sideLegend && legendPosition === 'right' ? 160 : 32,
+            bottom: options.legendVisible && legendPosition === 'bottom'
+                ? CARTESIAN_GRID_BOTTOM_WITH_LEGEND
+                : CARTESIAN_GRID_BOTTOM_WITHOUT_LEGEND,
+            left: sideLegend && legendPosition === 'left'
+                ? 168
+                : options.horizontal ? 136 : 56,
+            // ECharts deprecou containLabel; esta combinacao preserva o mesmo comportamento
+            // sem depender da feature legacy de grid.
+            outerBoundsMode: 'same',
+            outerBoundsContain: 'axisLabel',
+        };
+    }
+    buildCartesianYAxis(config) {
+        const textColor = this.resolveTextColor(config);
+        const primaryAxis = {
+            type: config.axes?.y?.type ?? 'value',
+            name: config.axes?.y?.label,
+            nameLocation: 'middle',
+            nameGap: 40,
+            min: config.axes?.y?.min,
+            max: config.axes?.y?.max,
+            axisLabel: {
+                show: config.axes?.y?.labels?.visible ?? true,
+                color: textColor,
+                hideOverlap: true,
+                formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
+            },
+        };
+        if (!config.axes?.ySecondary) {
+            return primaryAxis;
+        }
+        return [
+            primaryAxis,
+            {
+                type: config.axes.ySecondary.type ?? 'value',
+                name: config.axes.ySecondary.label,
+                nameLocation: 'middle',
+                nameGap: 40,
+                min: config.axes.ySecondary.min,
+                max: config.axes.ySecondary.max,
+                position: config.axes.ySecondary.position ?? 'right',
+                axisLabel: {
+                    show: config.axes.ySecondary.labels?.visible ?? true,
+                    color: textColor,
+                    hideOverlap: true,
+                    formatter: this.axisLabelFormatter(config.axes.ySecondary.labels?.format),
+                },
+            },
+        ];
+    }
+    primaryValueFormat(config) {
+        return config.series.find((series) => series.axis !== 'secondary')?.labels?.format
+            ?? config.axes?.y?.labels?.format
+            ?? config.series[0]?.labels?.format;
+    }
+    buildCartesianTooltip(config) {
+        const tooltip = {
+            trigger: config.theme?.tooltip?.trigger ?? 'axis',
+            confine: true,
+            appendToBody: false,
+            valueFormatter: (value) => this.formatValue(value, this.primaryValueFormat(config)),
+        };
+        return this.usesCanonicalStatsTime(config)
+            ? {
+                ...tooltip,
+                formatter: (params) => this.formatCanonicalTimeTooltip(params, config),
+            }
+            : tooltip;
+    }
+    usesCanonicalStatsTime(config) {
+        if (config.dataSource?.kind !== 'remote'
+            || config.dataSource.query?.sourceKind !== 'praxis.stats') {
+            return false;
+        }
+        return config.axes?.x?.type === 'time'
+            || config.dataSource.query.statsOperation === 'timeseries';
+    }
+    formatCanonicalTimeTooltip(params, config) {
+        const items = (Array.isArray(params) ? params : [params])
+            .filter((item) => !!item && typeof item === 'object');
+        if (!items.length) {
+            return '';
+        }
+        const first = items[0];
+        const data = this.tooltipPointData(first['data']);
+        const header = this.formatCanonicalTimeTooltipHeader(first, data, config);
+        const lines = items.map((item) => {
+            const itemData = this.tooltipPointData(item['data']);
+            const seriesId = item['seriesId'] === null || item['seriesId'] === undefined
+                ? undefined
+                : String(item['seriesId']);
+            const format = seriesId
+                ? this.seriesLabelFormat(config, seriesId) ?? this.primaryValueFormat(config)
+                : this.primaryValueFormat(config);
+            const value = this.formatValue(item['value'] ?? itemData['value'], format);
+            const seriesName = item['seriesName'] === null || item['seriesName'] === undefined
+                ? ''
+                : String(item['seriesName']);
+            return seriesName
+                ? `${escapeTooltipHtml(seriesName)}: ${escapeTooltipHtml(value)}`
+                : escapeTooltipHtml(value);
+        });
+        return [escapeTooltipHtml(header), ...lines]
+            .filter((part) => part.length > 0)
+            .join('<br/>');
+    }
+    formatCanonicalTimeTooltipHeader(params, data, config) {
+        const dateFormat = config.axes?.x?.labels?.format;
+        const label = this.nonEmptyText(data['label']);
+        const start = this.nonEmptyText(data['start']);
+        const end = this.nonEmptyText(data['end']);
+        const formattedStart = start ? this.formatValue(start, dateFormat) : '';
+        const formattedEnd = end ? this.formatValue(end, dateFormat) : '';
+        const interval = formattedStart && formattedEnd && formattedStart !== formattedEnd
+            ? `${formattedStart} – ${formattedEnd}`
+            : formattedStart || formattedEnd;
+        const fallback = this.nonEmptyText(params['axisValueLabel'])
+            ?? this.nonEmptyText(params['name'])
+            ?? '';
+        if (label && interval && label !== formattedStart && label !== interval) {
+            return `${label} · ${interval}`;
+        }
+        return interval || label || fallback;
+    }
+    tooltipPointData(value) {
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : {};
+    }
+    nonEmptyText(value) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        const text = String(value).trim();
+        return text || undefined;
+    }
+    seriesLabelFormat(config, seriesId) {
+        return config.series.find((series) => series.id === seriesId)?.labels?.format;
+    }
+    axisLabelFormatter(format) {
+        return format ? (value) => this.formatValue(value, format) : undefined;
+    }
+    formatValue(value, format) {
+        const normalizedValue = Array.isArray(value) ? value[value.length - 1] : value;
+        if (normalizedValue === null || normalizedValue === undefined || normalizedValue === '') {
+            return '';
+        }
+        if (!format) {
+            return String(normalizedValue);
+        }
+        const formattedDate = this.formatDateValue(normalizedValue, format);
+        if (formattedDate !== null) {
+            return formattedDate;
+        }
+        const numeric = typeof normalizedValue === 'number'
+            ? normalizedValue
+            : Number(String(normalizedValue).replace(',', '.'));
+        if (!Number.isFinite(numeric)) {
+            return String(normalizedValue);
+        }
+        const currency = this.parseCurrencyFormat(format);
+        if (currency) {
+            return new Intl.NumberFormat(DEFAULT_VALUE_LOCALE, {
+                style: 'currency',
+                currency: currency.code,
+                currencyDisplay: currency.display,
+                minimumFractionDigits: currency.decimals,
+                maximumFractionDigits: currency.decimals,
+                useGrouping: currency.useGrouping,
+            }).format(numeric);
+        }
+        const number = this.parseNumberFormat(format);
+        if (number) {
+            return new Intl.NumberFormat(DEFAULT_VALUE_LOCALE, {
+                minimumFractionDigits: number.minimumFractionDigits,
+                maximumFractionDigits: number.maximumFractionDigits,
+                useGrouping: number.useGrouping,
+            }).format(numeric);
+        }
+        return String(normalizedValue);
+    }
+    formatDateValue(value, format) {
+        if (!this.isDateFormat(format)) {
+            return null;
+        }
+        const parts = this.readDateParts(value);
+        if (!parts) {
+            return null;
+        }
+        const day = String(parts.day);
+        const day2 = day.padStart(2, '0');
+        const month = String(parts.month);
+        const month2 = month.padStart(2, '0');
+        const year = String(parts.year);
+        const year2 = year.slice(-2);
+        const date = new Date(parts.year, parts.month - 1, parts.day);
+        const monthShort = new Intl.DateTimeFormat(DEFAULT_VALUE_LOCALE, { month: 'short' }).format(date);
+        const monthLong = new Intl.DateTimeFormat(DEFAULT_VALUE_LOCALE, { month: 'long' }).format(date);
+        return format
+            .replace(/yyyy/g, year)
+            .replace(/yy/g, year2)
+            .replace(/MMMM/g, monthLong)
+            .replace(/MMM/g, monthShort)
+            .replace(/MM/g, month2)
+            .replace(/M/g, month)
+            .replace(/dd/g, day2)
+            .replace(/d/g, day);
+    }
+    isDateFormat(format) {
+        return /(^|[^A-Za-z])(d{1,2}|M{1,4}|y{2,4})(?=$|[^A-Za-z])/.test(format);
+    }
+    readDateParts(value) {
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime())
+                ? null
+                : { year: value.getFullYear(), month: value.getMonth() + 1, day: value.getDate() };
+        }
+        if (typeof value === 'number') {
+            const date = new Date(value);
+            return Number.isNaN(date.getTime())
+                ? null
+                : { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() };
+        }
+        const raw = String(value).trim();
+        const isoDate = /^(\d{4})-(\d{2})-(\d{2})(?:[T\s].*)?$/.exec(raw);
+        if (isoDate) {
+            return {
+                year: Number(isoDate[1]),
+                month: Number(isoDate[2]),
+                day: Number(isoDate[3]),
+            };
+        }
+        const brazilianDate = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(raw);
+        if (brazilianDate) {
+            return {
+                year: Number(brazilianDate[3]),
+                month: Number(brazilianDate[2]),
+                day: Number(brazilianDate[1]),
+            };
+        }
+        const parsed = new Date(raw);
+        return Number.isNaN(parsed.getTime())
+            ? null
+            : { year: parsed.getFullYear(), month: parsed.getMonth() + 1, day: parsed.getDate() };
+    }
+    parseCurrencyFormat(format) {
+        const parts = format.split('|').map((part) => part.trim()).filter(Boolean);
+        const code = parts[0]?.toUpperCase();
+        if (!code || !/^[A-Z]{3}$/.test(code)) {
+            return null;
+        }
+        const display = this.normalizeCurrencyDisplay(parts[1]);
+        const decimals = this.clampDecimals(Number.parseInt(parts[2] ?? '2', 10), 2);
+        return {
+            code,
+            display,
+            decimals,
+            useGrouping: !parts.some((part) => part.toLowerCase() === 'nosep'),
+        };
+    }
+    normalizeCurrencyDisplay(value) {
+        if (value === 'code' || value === 'name' || value === 'narrowSymbol') {
+            return value;
+        }
+        return 'symbol';
+    }
+    parseNumberFormat(format) {
+        const [pattern, ...modifiers] = format.split('|').map((part) => part.trim());
+        const match = /^(\d+)\.(\d+)-(\d+)$/.exec(pattern);
+        if (!match) {
+            return null;
+        }
+        return {
+            minimumFractionDigits: this.clampDecimals(Number.parseInt(match[2], 10), 0),
+            maximumFractionDigits: this.clampDecimals(Number.parseInt(match[3], 10), 0),
+            useGrouping: !modifiers.some((part) => part.toLowerCase() === 'nosep'),
+        };
+    }
+    clampDecimals(value, fallback) {
+        if (!Number.isFinite(value)) {
+            return fallback;
+        }
+        return Math.min(Math.max(value, 0), 20);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsOptionBuilderService, deps: [{ token: PraxisChartDataTransformerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsOptionBuilderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsOptionBuilderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PraxisChartDataTransformerService }] });
+function truncateLegendText(name) {
+    const value = String(name ?? '').trim();
+    if (value.length <= 28) {
+        return value;
+    }
+    return `${value.slice(0, 25)}...`;
+}
+function escapeTooltipHtml(value) {
+    return String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+use([
+    AriaComponent,
+    BarChart,
+    CanvasRenderer,
+    DatasetComponent,
+    FunnelChart,
+    GridComponent,
+    LegendComponent,
+    LineChart,
+    PieChart,
+    ScatterChart,
+    TitleComponent,
+    TooltipComponent,
+    TransformComponent,
+]);
+class EChartsEngineAdapter {
+    optionBuilder;
+    chart;
+    currentHost;
+    clickHost;
+    domClickHandler;
+    zrenderClickHandler;
+    lastSeriesClickAt = 0;
+    lastGridClick;
+    constructor(optionBuilder) {
+        this.optionBuilder = optionBuilder;
+    }
+    render(host, payload) {
+        if (this.chart && this.currentHost !== host) {
+            this.disposeChart();
         }
-        localeDictionaries[locale] = {
-            ...(localeDictionaries[locale] ?? {}),
-            ...dictionary,
+        if (!this.chart) {
+            this.chart = this.createChart(host);
+            this.currentHost = host;
+        }
+        const option = this.optionBuilder.build(payload.config, payload.data);
+        const chart = this.chart;
+        chart.setOption(option, true);
+        this.detachHandlers();
+        chart.off('click');
+        chart.on('click', (params) => {
+            this.lastSeriesClickAt = Date.now();
+            this.lastGridClick = undefined;
+            const data = pointData(params?.name, params?.data ?? params?.value);
+            payload.onPointClick?.({
+                chartId: payload.config.id,
+                seriesId: params?.seriesId,
+                seriesName: params?.seriesName,
+                category: this.resolvePointCategory(payload, data, params?.name),
+                value: pointValue(params?.value ?? params?.data),
+                data,
+            });
+        });
+        const zrender = chart?.getZr?.();
+        this.zrenderClickHandler = (event) => {
+            window.setTimeout(() => {
+                if (Date.now() - this.lastSeriesClickAt < 80) {
+                    return;
+                }
+                this.emitCategoryClickFromGrid(event, payload);
+            }, 0);
+        };
+        zrender?.on?.('click', this.zrenderClickHandler);
+        this.domClickHandler = (event) => {
+            window.setTimeout(() => {
+                if (Date.now() - this.lastSeriesClickAt < 80) {
+                    return;
+                }
+                const rect = host.getBoundingClientRect();
+                const offsetX = Number.isFinite(event.offsetX) ? event.offsetX : event.clientX - rect.left;
+                const offsetY = Number.isFinite(event.offsetY) ? event.offsetY : event.clientY - rect.top;
+                this.emitCategoryClickFromGrid({
+                    offsetX,
+                    offsetY,
+                }, payload);
+            }, 0);
         };
+        host.addEventListener('click', this.domClickHandler, true);
+        this.clickHost = host;
     }
-    return {
-        locale: options.locale,
-        fallbackLocale: options.fallbackLocale ?? 'pt-BR',
-        namespaces: {
-            charts: localeDictionaries,
-        },
-    };
+    resize() {
+        this.chart?.resize();
+    }
+    destroy() {
+        this.disposeChart();
+    }
+    createChart(host) {
+        return init(host);
+    }
+    disposeChart() {
+        this.detachHandlers();
+        this.chart?.off('click');
+        this.chart?.dispose();
+        this.chart = undefined;
+        this.currentHost = undefined;
+        this.lastSeriesClickAt = 0;
+        this.lastGridClick = undefined;
+    }
+    detachHandlers() {
+        const zrender = this.chart?.getZr?.();
+        if (zrender && this.zrenderClickHandler) {
+            zrender.off?.('click', this.zrenderClickHandler);
+        }
+        if (this.clickHost && this.domClickHandler) {
+            this.clickHost.removeEventListener('click', this.domClickHandler, true);
+        }
+        this.clickHost = undefined;
+        this.domClickHandler = undefined;
+        this.zrenderClickHandler = undefined;
+    }
+    resolvePointCategory(payload, data, fallback) {
+        const categoryField = payload.config.axes?.x?.field
+            ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
+        const dataSource = payload.config.dataSource;
+        const usesCanonicalStatsTime = dataSource?.kind === 'remote'
+            && dataSource.query?.sourceKind === 'praxis.stats';
+        const usesCanonicalStatsTimePoint = usesCanonicalStatsTime
+            && (payload.config.axes?.x?.type === 'time'
+                || (dataSource?.kind === 'remote' && dataSource.query?.statsOperation === 'timeseries'));
+        const candidate = usesCanonicalStatsTimePoint && data['label'] !== null
+            && data['label'] !== undefined
+            && data['label'] !== ''
+            ? data['label']
+            : categoryField && data[categoryField] !== null && data[categoryField] !== undefined
+                ? data[categoryField]
+                : fallback;
+        return candidate === null || candidate === undefined
+            ? undefined
+            : String(candidate);
+    }
+    emitCategoryClickFromGrid(event, payload) {
+        const chart = this.chart;
+        if (!chart || typeof chart.containPixel !== 'function' || typeof chart.convertFromPixel !== 'function') {
+            return;
+        }
+        const point = [event?.offsetX, event?.offsetY];
+        if (!Number.isFinite(point[0]) || !Number.isFinite(point[1])) {
+            return;
+        }
+        if (!chart.containPixel({ gridIndex: 0 }, point)) {
+            return;
+        }
+        const option = chart.getOption?.();
+        const xAxis = firstOptionEntry(option?.xAxis);
+        const yAxis = firstOptionEntry(option?.yAxis);
+        const horizontal = yAxis?.type === 'category';
+        const categories = (horizontal ? yAxis?.data : xAxis?.data) ?? [];
+        if (!Array.isArray(categories) || categories.length === 0) {
+            return;
+        }
+        const converted = chart.convertFromPixel({ gridIndex: 0 }, point);
+        const categoryIndex = Math.round(Number(horizontal ? converted?.[1] : converted?.[0]));
+        if (!Number.isInteger(categoryIndex) || categoryIndex < 0 || categoryIndex >= categories.length) {
+            return;
+        }
+        const category = categories[categoryIndex];
+        const categoryValue = category == null ? undefined : String(category);
+        const categoryField = payload.config.axes?.x?.field
+            ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
+        const signature = JSON.stringify({
+            chartId: payload.config.id,
+            category: categoryValue,
+            horizontal,
+            categoryIndex,
+        });
+        if (this.isDuplicateGridClick(signature)) {
+            return;
+        }
+        const usesCanonicalStatsRows = payload.config.dataSource?.kind === 'remote'
+            && payload.config.dataSource.query?.sourceKind === 'praxis.stats';
+        const fallbackSourceRow = !usesCanonicalStatsRows
+            && categoryField
+            && categoryValue !== undefined
+            ? payload.data.find((row) => String(row[categoryField] ?? '') === categoryValue)
+            : undefined;
+        const sourceRow = usesCanonicalStatsRows
+            ? payload.data[categoryIndex]
+            : fallbackSourceRow;
+        const data = {
+            ...(sourceRow ?? {}),
+            category: categoryValue,
+        };
+        if (categoryField && categoryValue !== undefined) {
+            data[categoryField] = categoryValue;
+        }
+        payload.onPointClick?.({
+            chartId: payload.config.id,
+            category: categoryValue,
+            data,
+        });
+    }
+    isDuplicateGridClick(signature) {
+        const now = Date.now();
+        const duplicate = this.lastGridClick?.signature === signature
+            && now - this.lastGridClick.at < 80;
+        this.lastGridClick = { signature, at: now };
+        return duplicate;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsEngineAdapter, deps: [{ token: EChartsOptionBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsEngineAdapter });
 }
-function providePraxisChartsI18n(options = {}) {
-    return [
-        {
-            provide: PRAXIS_CHARTS_I18N,
-            useValue: {},
-        },
-        providePraxisI18n(createPraxisChartsI18nConfig(options)),
-    ];
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: EChartsEngineAdapter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: EChartsOptionBuilderService }] });
+function firstOptionEntry(value) {
+    return Array.isArray(value) ? value[0] : value;
 }
-function resolvePraxisChartsText(value, fallback) {
-    if (typeof value === 'string') {
-        return { text: value };
+function pointValue(value) {
+    if (Array.isArray(value)) {
+        return value.length > 1 ? value[1] : value[0];
     }
-    if (value?.key || value?.text) {
+    if (value && typeof value === 'object' && 'value' in value) {
+        return pointValue(value.value);
+    }
+    return value;
+}
+function pointData(category, value) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
         return value;
     }
-    return { text: fallback ?? '' };
+    return {
+        category,
+        value: pointValue(value),
+    };
 }
 
 class ChartEditorDefaultsService {
@@ -5977,6 +6438,8 @@ class PraxisChartConfigEditor {
         'pie',
         'donut',
         'scatter',
+        'funnel',
+        'pyramid',
     ];
     sourceKinds = ['praxis.stats', 'derived'];
     operations = ['group-by', 'timeseries', 'distribution', 'comparison'];
@@ -6821,7 +7284,10 @@ class PraxisChartConfigEditor {
         return this.doc().kind === 'combo';
     }
     showPieDonutPanel() {
-        return this.doc().kind === 'pie' || this.doc().kind === 'donut';
+        return this.doc().kind === 'pie'
+            || this.doc().kind === 'donut'
+            || this.doc().kind === 'funnel'
+            || this.doc().kind === 'pyramid';
     }
     showScatterPanel() {
         return this.doc().kind === 'scatter';
@@ -7137,7 +7603,7 @@ class PraxisChartConfigEditor {
         this.documentChange.emit(structuredClone(this.normalizedDocument()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
             type: Component,
@@ -7150,7 +7616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSelectModule,
                         MatSlideToggleModule,
                         PraxisChartComponent
-                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
+                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { documentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], availableResourcesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargetsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], save: [{ type: i0.Output, args: ["save"] }], resetChange: [{ type: i0.Output, args: ["resetChange"] }], documentChange: [{ type: i0.Output, args: ["documentChange"] }] } });
 
 var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
@@ -8361,6 +8827,68 @@ function providePraxisChartShowcaseWidgetMetadata() {
     };
 }
 
+const PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA = {
+    id: 'praxis-analytics-presentation',
+    componentType: 'praxis-analytics-presentation',
+    displayName: 'Praxis Analytics Presentation',
+    selector: 'praxis-analytics-presentation',
+    component: PraxisAnalyticsPresentationComponent,
+    friendlyName: 'Apresentação analítica governada',
+    description: 'Alterna renderers elegíveis para uma projection x-ui.analytics selecionada por id, preservando o query context.',
+    icon: 'monitoring',
+    tags: ['analytics', 'chart', 'table', 'projection', 'dashboard'],
+    lib: '@praxisui/charts',
+    authoringManifestRef: {
+        componentId: 'praxis-analytics-presentation',
+        version: '1.0.0',
+        source: 'PRAXIS_ANALYTICS_PRESENTATION_AUTHORING_MANIFEST',
+    },
+    inputs: [
+        {
+            name: 'analytics',
+            type: 'PraxisXUiAnalytics',
+            description: 'Contrato x-ui.analytics que contém a projection canônica.',
+            default: {
+                projections: [{
+                        id: 'analytics-presentation-sample',
+                        intent: 'ranking',
+                        source: { kind: 'praxis.stats', resource: '/api/sample', operation: 'group-by' },
+                        bindings: {
+                            primaryDimension: { field: 'category', role: 'category', label: 'Categoria' },
+                            primaryMetrics: [{ field: 'value', aggregation: 'sum', label: 'Valor' }],
+                        },
+                        presentationHints: { preferredFamilies: ['chart', 'analytic-table'] },
+                    }],
+            },
+        },
+        { name: 'projectionId', type: 'string', description: 'Identidade exata da projection; labels não são usados para seleção.', default: 'analytics-presentation-sample' },
+        { name: 'availableFamilies', type: 'AnalyticsPresentationFamily[]', description: 'Famílias autorizadas após capabilities e renderers instalados.', default: ['chart', 'analytic-table'] },
+        { name: 'preferredFamily', type: 'AnalyticsPresentationFamily | null', description: 'Preferência persistida pelo host; a escolha temporária do usuário tem precedência.', default: null },
+        { name: 'queryContext', type: 'PraxisDataQueryContext | null', description: 'Contexto governado compartilhado por chart e analytic-table.', default: null },
+        { name: 'title', type: 'PraxisTextValue', description: 'Título compartilhado pelos renderers.' },
+        { name: 'subtitle', type: 'PraxisTextValue', description: 'Subtítulo compartilhado pelos renderers.' },
+        { name: 'enableCustomization', type: 'boolean', description: 'Habilita authoring interno do chart quando aplicável.', default: false },
+    ],
+    outputs: [
+        { name: 'presentationChange', type: 'PraxisAnalyticsPresentationChange', description: 'Escolha temporária do usuário; o host decide se persiste.' },
+        { name: 'pointClick', type: 'PraxisChartPointEvent', description: 'Evidência de ponto/linha preservada entre renderers.' },
+        { name: 'pointAction', type: 'PraxisChartPointActionEvent', description: 'Ação configurada emitida pelo chart.' },
+        { name: 'selectionChange', type: 'PraxisChartSelectionEvent', description: 'Seleção semântica emitida pelo chart.' },
+        { name: 'drillDown', type: 'PraxisChartDrillDownEvent', description: 'Drill-down emitido pelo chart.' },
+        { name: 'crossFilter', type: 'PraxisChartCrossFilterEvent', description: 'Cross-filter emitido pelo chart.' },
+        { name: 'queryRequest', type: 'PraxisChartQueryRequestEvent', description: 'Observação da consulta remota do chart.' },
+        { name: 'loadStateChange', type: 'PraxisChartLoadState', description: 'Estado de carga do chart.' },
+    ],
+};
+function providePraxisAnalyticsPresentationMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => registry.register(PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA),
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
 const PRAXIS_TABLE_CHART_DETAIL_RENDERER = {
     nodeType: 'chartRef',
     renderMode: 'inline',
@@ -8395,6 +8923,7 @@ function providePraxisCharts(options = {}) {
         providePraxisChartDrilldownPanelMetadata(),
         providePraxisChartStateProbeMetadata(),
         providePraxisChartShowcaseWidgetMetadata(),
+        providePraxisAnalyticsPresentationMetadata(),
         {
             provide: PRAXIS_TABLE_DETAIL_INLINE_RENDERERS,
             multi: true,
@@ -8569,194 +9098,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: PraxisChartSchemaMapperService }, { type: PraxisChartCanonicalContractMapperService }] });
 
-class AnalyticsChartConfigAdapterService {
-    i18n;
-    statsBuilder = new AnalyticsStatsRequestBuilderService();
-    constructor(i18n) {
-        this.i18n = i18n;
-    }
-    toPraxisChartConfig(projection, options) {
-        const chartType = this.resolveChartType(projection);
-        const orientation = chartType === 'horizontal-bar' ? 'horizontal' : undefined;
-        const dimension = projection.bindings.primaryDimension;
-        const metrics = projection.bindings.primaryMetrics ?? [];
-        if (!dimension?.field) {
-            throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension for projection "${projection.id}".`);
-        }
-        if (!metrics.length) {
-            throw new Error(`AnalyticsChartConfigAdapterService requires at least one metric for projection "${projection.id}".`);
-        }
-        const crossFilter = Boolean(projection.interactions?.crossFilter);
-        const keyFilterField = dimension.keyFilterField?.trim();
-        if (crossFilter && !keyFilterField) {
-            throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension.keyFilterField when crossFilter is enabled for projection "${projection.id}".`);
-        }
-        return {
-            id: projection.id,
-            type: chartType,
-            orientation,
-            title: options?.title,
-            subtitle: options?.subtitle,
-            height: options?.height,
-            axes: this.buildAxes(projection, chartType),
-            series: this.buildSeries(projection, chartType),
-            dataSource: this.buildDataSource(projection),
-            interactions: {
-                pointClick: Boolean(projection.interactions?.pointSelection || projection.interactions?.drillDown),
-                drillDown: Boolean(projection.interactions?.drillDown),
-                selection: Boolean(projection.interactions?.pointSelection),
-                crossFilter,
-                ...(crossFilter
-                    ? {
-                        eventActions: {
-                            crossFilter: {
-                                action: 'emit',
-                                mapping: { key: keyFilterField },
-                            },
-                        },
-                    }
-                    : {}),
-            },
-        };
-    }
-    buildAxes(projection, chartType) {
-        const dimension = projection.bindings.primaryDimension;
-        const metrics = this.getDisplayMetrics(projection);
-        const firstMetric = metrics[0];
-        if (chartType === 'pie' || chartType === 'donut') {
-            return {
-                x: {
-                    field: dimension.field,
-                    label: dimension.label ?? undefined,
-                },
-            };
-        }
-        return {
-            x: {
-                field: dimension.field,
-                label: dimension.label ?? undefined,
-                type: dimension.role === 'time' ? 'time' : 'category',
-            },
-            y: {
-                label: metrics.length === 1
-                    ? firstMetric?.label ?? firstMetric?.field
-                    : undefined,
-                type: 'value',
-            },
-        };
-    }
-    buildSeries(projection, chartType) {
-        const dimension = projection.bindings.primaryDimension;
-        const comparison = projection.source.operation === 'comparison';
-        return this.getDisplayMetrics(projection).flatMap((metric, index) => comparison
-            ? ['current', 'previous'].map((period) => ({
-                id: `${projection.id}.${metric.field}.${period}`,
-                name: `${metric.label ?? metric.field} (${this.comparisonPeriodLabel(period)})`,
-                type: chartType,
-                categoryField: dimension.field,
-                metric: { field: this.comparisonMetricField(metric.field, period), aggregation: this.mapAggregation(metric.aggregation) },
-            }))
-            : [{
-                    id: `${projection.id}.${metric.field}.${index + 1}`,
-                    name: metric.label ?? metric.field,
-                    type: chartType,
-                    categoryField: chartType === 'pie' || chartType === 'donut' ? dimension.field : undefined,
-                    metric: {
-                        field: metric.field,
-                        aggregation: this.mapAggregation(metric.aggregation),
-                        label: metric.label ?? undefined,
-                    },
-                    smooth: chartType === 'line' || chartType === 'area',
-                }]);
-    }
-    buildDataSource(projection) {
-        const executionPlan = this.statsBuilder.buildExecutionPlan(projection);
-        return {
-            kind: 'remote',
-            resourcePath: executionPlan.resourcePath,
-            schemaId: executionPlan.resourcePath,
-            query: {
-                sourceKind: 'praxis.stats',
-                statsOperation: executionPlan.operation,
-                statsPath: executionPlan.statsPath,
-                statsRequest: executionPlan.statsRequest,
-                dimensions: executionPlan.dimensions,
-                metrics: projection.source.operation === 'comparison'
-                    ? this.getDisplayMetrics(projection).flatMap((metric) => ['current', 'previous'].map((period) => ({
-                        field: this.comparisonMetricField(metric.field, period),
-                        aggregation: this.mapAggregation(metric.aggregation),
-                        alias: this.comparisonMetricField(metric.field, period),
-                    })))
-                    : this.mapExecutionMetrics(executionPlan),
-                sort: executionPlan.sort,
-                limit: executionPlan.limit,
-            },
-        };
-    }
-    resolveChartType(projection) {
-        if (projection.intent === 'trend' && projection.source.operation === 'timeseries') {
-            return 'line';
-        }
-        if (projection.intent === 'ranking' && projection.source.operation === 'group-by') {
-            return 'horizontal-bar';
-        }
-        if (projection.intent === 'composition') {
-            return 'pie';
-        }
-        if (projection.intent === 'distribution') {
-            return 'bar';
-        }
-        return 'bar';
-    }
-    mapAggregation(aggregation) {
-        const normalizedAggregation = (aggregation ?? '').toLowerCase();
-        switch (normalizedAggregation) {
-            case 'avg':
-            case 'min':
-            case 'max':
-            case 'count':
-            case 'distinct-count':
-            case 'sum':
-                return normalizedAggregation;
-            case '':
-                return undefined;
-            default:
-                throw new Error(`Analytics aggregation "${aggregation}" is not supported in @praxisui/charts.`);
-        }
-    }
-    mapExecutionMetrics(executionPlan) {
-        return executionPlan.metrics.map((metric) => ({
-            field: metric.field,
-            aggregation: this.mapAggregation(metric.aggregation),
-            alias: metric.alias,
-        }));
-    }
-    getDisplayMetrics(projection) {
-        return [
-            ...(projection.bindings.primaryMetrics ?? []),
-            ...(projection.bindings.secondaryMetrics ?? []),
-        ];
-    }
-    comparisonMetricField(metricField, period) {
-        return `__praxisComparison_${metricField}_${period}`;
-    }
-    comparisonPeriodLabel(period) {
-        const key = period === 'current'
-            ? 'praxis.charts.runtime.comparisonCurrent'
-            : 'praxis.charts.runtime.comparisonPrevious';
-        const fallback = period === 'current' ? 'Current' : 'Previous';
-        return this.i18n?.t(key, undefined, fallback, 'charts') ?? fallback;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, deps: [{ token: i1.PraxisI18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.PraxisI18nService, decorators: [{
-                    type: Optional
-                }] }] });
-
 class AnalyticsChartContractService {
     analyticsSchema;
     resolver;
@@ -10106,7 +10447,7 @@ const chartDocumentSchema = {
     required: ['version', 'kind', 'source'],
     properties: {
         version: { const: PRAXIS_X_UI_CHART_AUTHORABLE_VERSION },
-        kind: { enum: ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter'] },
+        kind: { enum: ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter', 'funnel', 'pyramid'] },
         chartId: { type: 'string' },
         title: { oneOf: [{ type: 'string' }, { type: 'object' }] },
         subtitle: { oneOf: [{ type: 'string' }, { type: 'object' }] },
@@ -10135,7 +10476,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
     componentId: 'praxis-chart',
     ownerPackage: '@praxisui/charts',
     configSchemaId: 'PraxisXUiChartContract',
-    manifestVersion: '1.1.0',
+    manifestVersion: '1.2.0',
     runtimeInputs: [
         { name: 'chartDocument', type: 'PraxisXUiChartContract | null', description: 'Canonical x-ui.chart document used as the authoring source of truth.' },
         { name: 'config', type: 'PraxisChartConfig', description: 'Runtime chart configuration mapped from or supplied beside the canonical chart document.' },
@@ -10180,11 +10521,11 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
             scope: 'global',
             targetKind: 'chartType',
             target: { kind: 'chartType', resolver: 'x-ui-chart-kind', ambiguityPolicy: 'fail', required: false },
-            inputSchema: { type: 'object', required: ['kind'], properties: { kind: { enum: ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter'] }, orientation: { enum: ['vertical', 'horizontal'] } } },
+            inputSchema: { type: 'object', required: ['kind'], properties: { kind: { enum: ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter', 'funnel', 'pyramid'] }, orientation: { enum: ['vertical', 'horizontal'] } } },
             effects: [{ kind: 'merge-object', path: 'chartDocument' }],
             destructive: false,
             requiresConfirmation: false,
-            validators: ['chart-type-supported', 'chart-type-series-axis-compatible', 'pie-single-metric', 'combo-minimum-series', 'editor-runtime-round-trip'],
+            validators: ['chart-type-supported', 'chart-type-series-axis-compatible', 'category-slice-single-metric', 'combo-minimum-series', 'editor-runtime-round-trip'],
             affectedPaths: ['chartDocument.kind', 'chartDocument.orientation', 'chartDocument.metrics[]', 'chartDocument.dimensions[]'],
             submissionImpact: 'config-only',
             preconditions: ['config-initialized'],
@@ -10455,7 +10796,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
         { validatorId: 'chart-version-supported', level: 'error', code: 'CHART_VERSION_SUPPORTED', description: `Only x-ui.chart version ${PRAXIS_X_UI_CHART_AUTHORABLE_VERSION} is authorable.` },
         { validatorId: 'chart-type-supported', level: 'error', code: 'CHART_TYPE_SUPPORTED', description: 'Chart kind must be supported by @praxisui/charts.' },
         { validatorId: 'chart-type-series-axis-compatible', level: 'error', code: 'CHART_TYPE_SERIES_AXIS_COMPATIBLE', description: 'Chart kind, dimensions, metrics and axes must be compatible.' },
-        { validatorId: 'pie-single-metric', level: 'error', code: 'PIE_SINGLE_METRIC', description: 'Pie and donut charts support a single metric.' },
+        { validatorId: 'category-slice-single-metric', level: 'error', code: 'CATEGORY_SLICE_SINGLE_METRIC', description: 'Pie, donut, funnel and pyramid charts require exactly one metric.' },
         { validatorId: 'combo-minimum-series', level: 'error', code: 'COMBO_MINIMUM_SERIES', description: 'Combo charts require at least two metrics.' },
         { validatorId: 'series-field-exists', level: 'error', code: 'SERIES_FIELD_EXISTS', description: 'Series field must exist in availableFields or schema context.' },
         { validatorId: 'series-field-aggregable', level: 'error', code: 'SERIES_FIELD_AGGREGABLE', description: 'Metric fields must support the requested aggregation.' },
@@ -10516,6 +10857,99 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
     ],
 };
 
+const PRAXIS_ANALYTICS_PRESENTATION_AUTHORING_MANIFEST = {
+    schemaVersion: '1.0.0',
+    componentId: 'praxis-analytics-presentation',
+    ownerPackage: '@praxisui/charts',
+    configSchemaId: 'PraxisAnalyticsPresentationInputs',
+    manifestVersion: '1.0.0',
+    runtimeInputs: [
+        { name: 'analytics', type: 'PraxisXUiAnalytics', description: 'Canonical x-ui.analytics projections.' },
+        { name: 'projectionId', type: 'string', description: 'Stable projection identity; labels never select projections.' },
+        { name: 'availableFamilies', type: 'AnalyticsPresentationFamily[]', description: 'Capability- and host-authorized renderer families.' },
+        { name: 'preferredFamily', type: 'AnalyticsPresentationFamily | null', allowedValues: ['chart', 'analytic-table'], description: 'Persisted host preference. Temporary user choice remains runtime-only.' },
+        { name: 'queryContext', type: 'PraxisDataQueryContext | null', description: 'Shared governed query context forwarded to the selected renderer.' },
+    ],
+    editableTargets: [
+        {
+            kind: 'analyticsPresentationPreference',
+            resolver: 'component-config',
+            description: 'Persisted preferredFamily for the projection selected by exact projectionId.',
+        },
+    ],
+    operations: [
+        {
+            operationId: 'analytics.presentation.prefer-family',
+            title: 'Prefer analytics presentation family',
+            description: 'Persists a renderer-family preference without changing the canonical projection, bindings or query context.',
+            scope: 'global',
+            targetKind: 'analyticsPresentationPreference',
+            target: {
+                kind: 'analyticsPresentationPreference',
+                resolver: 'component-config',
+                ambiguityPolicy: 'fail',
+                required: false,
+            },
+            inputSchema: {
+                type: 'object',
+                additionalProperties: false,
+                required: ['family'],
+                properties: { family: { enum: ['chart', 'analytic-table'] } },
+            },
+            effects: [{ kind: 'set-value', path: 'preferredFamily', inputPath: 'family' }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['diagnostics-before-patch', 'renderer-supported', 'runtime-component-resolves'],
+            affectedPaths: ['preferredFamily'],
+            submissionImpact: 'visual-only',
+            preconditions: ['analytics-projection-resolved'],
+        },
+    ],
+    validators: [
+        { validatorId: 'diagnostics-before-patch', level: 'error', code: 'ANALYTICS_DIAGNOSTICS_BEFORE_PATCH', description: 'Projection resolution and family eligibility diagnostics must be clear before changing the preference.' },
+        { validatorId: 'renderer-supported', level: 'error', code: 'ANALYTICS_RENDERER_SUPPORTED', description: 'The requested family must be a renderer supported by the component manifest.' },
+        { validatorId: 'runtime-component-resolves', level: 'error', code: 'ANALYTICS_RUNTIME_COMPONENT_RESOLVES', description: 'The analytics presentation runtime must be registered before persisting its preference.' },
+    ],
+    roundTripRequirements: [
+        'Save and reopen must preserve preferredFamily without copying remote analytics results into the page document.',
+        'Changing preferredFamily must preserve analytics, projectionId and queryContext byte-for-byte.',
+        'Temporary user choice emitted by presentationChange must not mutate preferredFamily unless the host explicitly persists it.',
+    ],
+    presentationAffordances: {
+        version: '1.0.0',
+        componentId: 'praxis-analytics-presentation',
+        defaultTargetKind: 'analyticsPresentationPreference',
+        sourceRef: 'AnalyticsPresentationResolver',
+        affordances: [
+            {
+                id: 'analytics-presentation-family',
+                targetKind: 'analyticsPresentationPreference',
+                category: 'analytics-renderer',
+                description: 'Compatible presentation families resolved from the canonical projection and installed renderers.',
+                options: ['chart', 'analytic-table'],
+                appliesToTypes: ['PraxisXUiAnalytics'],
+                unknownCompatible: false,
+            },
+        ],
+    },
+    examples: [
+        {
+            id: 'prefer-analytic-table',
+            request: 'Use the table presentation for projection supplier-procurement-funnel.',
+            operationId: 'analytics.presentation.prefer-family',
+            params: { family: 'analytic-table' },
+            isPositive: true,
+        },
+        {
+            id: 'reject-kpi-without-renderer',
+            request: 'Use KPI even though no KPI renderer is installed.',
+            operationId: 'analytics.presentation.prefer-family',
+            params: { family: 'kpi' },
+            isPositive: false,
+        },
+    ],
+};
+
 /*
  * Public API Surface of praxis-charts
  */
@@ -10524,4 +10958,4 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
  * Generated bundle index. Do not edit.
  */
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, ChartResourceCapabilityCatalogAdapter, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_AUTHORING_COVERAGE, 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_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, ChartResourceCapabilityCatalogAdapter, PRAXIS_ANALYTICS_PRESENTATION_AUTHORING_MANIFEST, PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_AUTHORING_COVERAGE, 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_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, PraxisAnalyticsPresentationComponent, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisAnalyticsPresentationMetadata, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };