@praxisui/charts 7.0.0-beta.0 → 8.0.0-beta.1

package/fesm2022/praxisui-charts.mjs

@@ -4,6 +4,7 @@ import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, vi
 import * as i1$2 from '@praxisui/core';
 import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, ComponentMetadataRegistry, createDefaultTableConfig, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent, providePraxisI18n, SETTINGS_PANEL_DATA } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { throwError, map, of, isObservable, from, BehaviorSubject } from 'rxjs';
 import * as i1$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
@@ -16,7 +17,6 @@ import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleC
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i1 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
-import { throwError, map, BehaviorSubject } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { PraxisTable } from '@praxisui/table';
 import * as i1$3 from '@angular/forms';
@@ -187,6 +187,13 @@ class PraxisChartDataTransformerService {
         if (aggregation === 'count') {
             return rows.length;
         }
+        if (aggregation === 'distinct-count') {
+            const field = seriesConfig.metric?.field;
+            if (!field) {
+                return 0;
+            }
+            return new Set(rows.map((row) => this.normalizeCategory(row[field]))).size;
+        }
         const values = rows
             .map((row) => this.extractMetricValue(row, seriesConfig))
             .filter((value) => Number.isFinite(value));
@@ -255,6 +262,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         }] });
 
 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;
 class PraxisChartOptionBuilderService {
     transformer;
     constructor(transformer) {
@@ -266,12 +279,21 @@ class PraxisChartOptionBuilderService {
         const tooltipEnabled = config.theme?.tooltip?.enabled ?? true;
         const legendVisible = config.theme?.legend?.visible ?? true;
         if (transformed.mode === 'pie') {
+            const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
+            const labelsVisible = config.series[0]?.labels?.visible ?? false;
             const pieSeries = {
                 type: 'pie',
-                radius: config.type === 'donut' ? ['45%', '70%'] : '70%',
+                radius: config.type === 'donut'
+                    ? labelsVisible ? ['32%', '52%'] : ['42%', '64%']
+                    : labelsVisible ? '54%' : '66%',
+                center: ['50%', hasChartTitle ? '54%' : '50%'],
+                avoidLabelOverlap: true,
                 label: {
-                    show: config.series[0]?.labels?.visible ?? false,
+                    show: labelsVisible,
+                    overflow: 'truncate',
+                    width: 120,
                 },
+                labelLine: labelsVisible ? { length: 14, length2: 12 } : undefined,
                 data: transformed.slices.map((slice) => ({
                     name: slice.name,
                     value: slice.value,
@@ -281,15 +303,9 @@ class PraxisChartOptionBuilderService {
             return {
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
-                title: {
-                    text: this.resolveText(config.title),
-                    subtext: this.resolveText(config.subtitle),
-                    left: 'center',
-                },
+                title: this.buildTitle(config, 'center'),
                 tooltip: tooltipEnabled ? { trigger: 'item' } : undefined,
-                legend: legendVisible
-                    ? { show: true, orient: 'horizontal', bottom: 0 }
-                    : { show: false },
+                legend: this.buildLegend(config, legendVisible, 'bottom'),
                 series: [pieSeries],
             };
         }
@@ -305,29 +321,31 @@ class PraxisChartOptionBuilderService {
             return {
                 backgroundColor: config.theme?.backgroundColor,
                 color: palette,
-                title: {
-                    text: this.resolveText(config.title),
-                    subtext: this.resolveText(config.subtitle),
-                    left: 'left',
-                },
+                title: this.buildTitle(config, 'left'),
                 tooltip: tooltipEnabled ? { trigger: 'item' } : undefined,
-                legend: legendVisible ? { show: true, top: 0 } : { show: false },
-                grid: this.buildGrid(),
+                legend: this.buildLegend(config, legendVisible, 'bottom'),
+                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,
                         rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
                     },
                 },
                 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,
+                        hideOverlap: true,
                     },
                 },
                 series: scatterSeries,
@@ -337,35 +355,39 @@ class PraxisChartOptionBuilderService {
         return {
             backgroundColor: config.theme?.backgroundColor,
             color: palette,
-            title: {
-                text: this.resolveText(config.title),
-                subtext: this.resolveText(config.subtitle),
-                left: 'left',
-            },
+            title: this.buildTitle(config, 'left'),
             tooltip: tooltipEnabled
-                ? { trigger: config.theme?.tooltip?.trigger ?? 'axis' }
+                ? {
+                    trigger: config.theme?.tooltip?.trigger ?? 'axis',
+                    confine: true,
+                    appendToBody: false,
+                }
                 : undefined,
-            legend: legendVisible
-                ? { show: true, top: 0 }
-                : { show: false },
-            grid: this.buildGrid(),
+            legend: this.buildLegend(config, legendVisible, 'bottom'),
+            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,
+                        hideOverlap: true,
                     },
                 }
                 : {
                     type: config.axes?.x?.type ?? 'category',
                     name: config.axes?.x?.label,
                     data: transformed.categories,
+                    nameLocation: 'middle',
+                    nameGap: 18,
                     axisLabel: {
                         show: config.axes?.x?.labels?.visible ?? true,
                         rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
                     },
                 },
             yAxis: horizontal
@@ -376,6 +398,9 @@ class PraxisChartOptionBuilderService {
                     axisLabel: {
                         show: config.axes?.x?.labels?.visible ?? true,
                         rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
+                        overflow: 'truncate',
+                        width: 160,
                     },
                 }
                 : this.buildCartesianYAxis(config),
@@ -402,14 +427,97 @@ class PraxisChartOptionBuilderService {
             const text = value.text;
             return text || undefined;
         }
+        if (typeof value === 'object' && value && 'fallback' in value) {
+            const fallback = value.fallback;
+            return fallback || undefined;
+        }
         return undefined;
     }
-    buildGrid() {
+    hasText(value) {
+        const text = this.resolveText(value);
+        return !!text && text.trim().length > 0;
+    }
+    buildTitle(config, align) {
+        const title = this.resolveText(config.title);
+        const subtitle = this.resolveText(config.subtitle);
+        const hasTitle = !!title || !!subtitle;
         return {
-            top: 56,
-            right: 24,
-            bottom: 32,
-            left: 48,
+            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: config.theme?.textColor,
+                overflow: 'truncate',
+            },
+            subtextStyle: {
+                fontSize: 12,
+                lineHeight: 18,
+                color: config.theme?.textColor,
+                overflow: 'truncate',
+            },
+        };
+    }
+    buildLegend(config, visible, fallbackPosition) {
+        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: config.theme?.textColor ?? '#4b5563',
+            },
+            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',
@@ -420,10 +528,13 @@ class PraxisChartOptionBuilderService {
         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,
+                hideOverlap: true,
             },
         };
         if (!config.axes?.ySecondary) {
@@ -434,11 +545,14 @@ class PraxisChartOptionBuilderService {
             {
                 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,
+                    hideOverlap: true,
                 },
             },
         ];
@@ -450,6 +564,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             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)}...`;
+}
 
 use([
     AriaComponent,
@@ -503,10 +624,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: PraxisChartOptionBuilderService }] });
 
+const PRAXIS_CHART_PALETTE_TOKENS = {
+    'brand-primary': ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'],
+    'brand-balanced': ['#1263b4', '#15803d', '#7c3aed', '#c2410c', '#be123c'],
+    status: ['#15803d', '#ca8a04', '#dc2626', '#2563eb', '#7c3aed'],
+    executive: ['#14b8a6', '#f59e0b', '#e11d48', '#8b5cf6', '#38bdf8'],
+};
+function isPraxisChartPaletteToken(value) {
+    return Object.prototype.hasOwnProperty.call(PRAXIS_CHART_PALETTE_TOKENS, value);
+}
+function resolvePraxisChartPaletteToken(value) {
+    return isPraxisChartPaletteToken(value)
+        ? [...PRAXIS_CHART_PALETTE_TOKENS[value]]
+        : undefined;
+}
+const PRAXIS_CHART_THEME_VARIANTS = {
+    default: {
+        palette: [...PRAXIS_CHART_PALETTE_TOKENS['brand-primary']],
+        legend: { position: 'bottom' },
+        surface: { mode: 'auto' },
+    },
+    compact: {
+        palette: [...PRAXIS_CHART_PALETTE_TOKENS['brand-balanced']],
+        textColor: '#374151',
+        borderRadius: 6,
+        legend: { position: 'bottom' },
+        surface: {
+            mode: 'embedded',
+            background: 'transparent',
+            borderWidth: 0,
+            borderRadius: 0,
+        },
+    },
+    executive: {
+        palette: [...PRAXIS_CHART_PALETTE_TOKENS.executive],
+        backgroundColor: '#111827',
+        textColor: '#f9fafb',
+        borderRadius: 8,
+        legend: { position: 'bottom' },
+        surface: {
+            mode: 'contained',
+            background: '#111827',
+            borderColor: '#374151',
+            borderWidth: 1,
+            borderRadius: 8,
+        },
+    },
+};
+
 class ChartContractNormalizerService {
     normalize(input) {
         let document = structuredClone(input);
         document = this.normalizeMotion(document);
+        document = this.normalizeSizing(document);
         document = this.normalizeKindSpecificFields(document);
         document = this.normalizeOperationSpecificFields(document);
         document = this.normalizeSourceSpecificFields(document);
@@ -532,6 +702,44 @@ class ChartContractNormalizerService {
             },
         };
     }
+    normalizeSizing(document) {
+        if (!document.sizing && document.height !== undefined) {
+            const { height, ...rest } = document;
+            return {
+                ...rest,
+                sizing: {
+                    mode: 'fixed',
+                    height: this.normalizeCssSizeValue(height),
+                },
+            };
+        }
+        if (!document.sizing) {
+            return document;
+        }
+        const mode = document.sizing.mode ?? (document.sizing.height !== undefined ? 'fixed' : 'auto');
+        const { height: sizingHeight, ...restSizing } = document.sizing;
+        const normalizedSizing = {
+            ...restSizing,
+            minHeight: this.normalizeCssSizeValue(restSizing.minHeight),
+            maxHeight: this.normalizeCssSizeValue(restSizing.maxHeight),
+            aspectRatio: this.normalizeAspectRatioValue(restSizing.aspectRatio),
+        };
+        const sizing = mode === 'fixed'
+            ? {
+                ...normalizedSizing,
+                mode,
+                height: this.normalizeCssSizeValue(sizingHeight),
+            }
+            : {
+                ...normalizedSizing,
+                mode,
+            };
+        const { height, ...rest } = document;
+        return {
+            ...rest,
+            sizing: this.omitUndefined(sizing),
+        };
+    }
     normalizeKindSpecificFields(document) {
         let nextDocument = document;
         if (document.kind === 'horizontal-bar') {
@@ -594,6 +802,29 @@ class ChartContractNormalizerService {
     isDistribution(document) {
         return document.source.kind === 'praxis.stats' && document.source.operation === 'distribution';
     }
+    normalizeCssSizeValue(value) {
+        if (typeof value !== 'string') {
+            return value;
+        }
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return undefined;
+        }
+        return /^-?\d+(\.\d+)?$/.test(trimmed) ? Number(trimmed) : trimmed;
+    }
+    normalizeAspectRatioValue(value) {
+        if (typeof value !== 'string') {
+            return value;
+        }
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return undefined;
+        }
+        return /^\d+(\.\d+)?$/.test(trimmed) ? Number(trimmed) : trimmed;
+    }
+    omitUndefined(value) {
+        return Object.fromEntries(Object.entries(value).filter(([, entryValue]) => entryValue !== undefined));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractNormalizerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractNormalizerService, providedIn: 'root' });
 }
@@ -607,6 +838,7 @@ class ChartContractValidationService {
         const issues = [];
         this.validateSource(document, issues);
         this.validateTheme(document, issues);
+        this.validateSizing(document, issues);
         this.validateMetrics(document, issues);
         this.validateKinds(document, issues);
         this.validateEvents(document, issues);
@@ -625,37 +857,66 @@ class ChartContractValidationService {
         if (document.source.kind === 'praxis.stats' && !document.source.operation) {
             issues.push(this.error('missing-operation', 'source.operation', 'x-ui.chart source.operation is required for source.kind="praxis.stats".'));
         }
+        const granularity = document.source.kind === 'praxis.stats'
+            ? document.source.options?.granularity
+            : undefined;
+        if (granularity && granularity !== 'day' && granularity !== 'week' && granularity !== 'month') {
+            issues.push(this.error('unsupported-granularity', 'source.options.granularity', `x-ui.chart source.options.granularity="${granularity}" is not supported in @praxisui/charts.`));
+        }
     }
     validateTheme(document, issues) {
         if (document.theme?.palette && typeof document.theme.palette === 'string') {
-            issues.push(this.error('palette-token-unsupported', 'theme.palette', 'x-ui.chart theme.palette as palette token reference is not yet implemented in @praxisui/charts.'));
-        }
-        if (document.theme?.variant) {
-            issues.push(this.error('theme-variant-unsupported', 'theme.variant', 'x-ui.chart theme.variant is not yet implemented in @praxisui/charts.'));
+            if (!isPraxisChartPaletteToken(document.theme.palette)) {
+                issues.push(this.error('palette-token-unknown', 'theme.palette', `x-ui.chart theme.palette token "${document.theme.palette}" is not registered in @praxisui/charts.`));
+            }
         }
     }
     validateMetrics(document, issues) {
         if (!document.metrics?.length) {
-            issues.push(this.error('missing-metric', 'metrics', 'x-ui.chart requires at least one metric for the current @praxisui/charts runtime.'));
+            issues.push(this.error('missing-metric', 'metrics', 'x-ui.chart requires at least one metric.'));
         }
-        const aggregations = [
-            ...(document.metrics?.map((metric) => metric.aggregation).filter(Boolean) ?? []),
-            ...(document.aggregations?.map((aggregation) => aggregation.operation) ?? []),
-        ];
-        if (aggregations.includes('distinct-count')) {
-            issues.push(this.error('distinct-count-unsupported', 'metrics', 'x-ui.chart aggregation "distinct-count" is not yet implemented in @praxisui/charts.'));
+        document.metrics
+            ?.filter((metric) => metric.aggregation === 'distinct-count' && !metric.field?.trim())
+            .forEach((_metric, index) => {
+            issues.push(this.error('distinct-count-missing-field', `metrics[${index}].field`, 'x-ui.chart aggregation "distinct-count" requires a metric field.'));
+        });
+    }
+    validateSizing(document, issues) {
+        const sizing = document.sizing;
+        if (!sizing) {
+            return;
+        }
+        if (sizing.mode
+            && sizing.mode !== 'fixed'
+            && sizing.mode !== 'fill-container'
+            && sizing.mode !== 'auto') {
+            issues.push(this.error('sizing-mode-unsupported', 'sizing.mode', `x-ui.chart sizing.mode="${sizing.mode}" is not supported in @praxisui/charts.`));
+        }
+        if (sizing.mode === 'fixed' && sizing.height === undefined) {
+            issues.push(this.error('sizing-fixed-missing-height', 'sizing.height', 'x-ui.chart sizing.height is required when sizing.mode="fixed".'));
+        }
+        this.validateCssSize('height', sizing.height, 'sizing.height', issues);
+        this.validateCssSize('minHeight', sizing.minHeight, 'sizing.minHeight', issues);
+        this.validateCssSize('maxHeight', sizing.maxHeight, 'sizing.maxHeight', issues);
+        const minHeight = this.numericCssSize(sizing.minHeight);
+        const maxHeight = this.numericCssSize(sizing.maxHeight);
+        if (minHeight !== null && maxHeight !== null && maxHeight < minHeight) {
+            issues.push(this.error('sizing-max-height-before-min-height', 'sizing.maxHeight', 'x-ui.chart sizing.maxHeight must be greater than or equal to sizing.minHeight.'));
+        }
+        if (sizing.aspectRatio !== undefined && !this.isValidAspectRatio(sizing.aspectRatio)) {
+            issues.push(this.error('sizing-aspect-ratio-invalid', 'sizing.aspectRatio', 'x-ui.chart sizing.aspectRatio must be a positive number or a CSS aspect-ratio value such as "16 / 9".'));
         }
     }
     validateKinds(document, issues) {
         const metricCount = document.metrics?.length ?? 0;
         if (document.kind !== 'pie' && document.kind !== 'donut' && !document.dimensions?.length) {
-            issues.push(this.error('missing-dimension', 'dimensions', 'x-ui.chart cartesian charts require at least one dimension in the current @praxisui/charts runtime.'));
+            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 ((document.kind === 'pie' || document.kind === 'donut') && metricCount > 1) {
-            issues.push(this.error('pie-multi-metric', 'metrics', 'x-ui.chart pie/donut charts with multiple metrics are not yet implemented in @praxisui/charts.'));
+            issues.push(this.error('pie-multi-metric', 'metrics', 'x-ui.chart pie/donut charts support a single 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.'));
@@ -666,7 +927,7 @@ class ChartContractValidationService {
         if (document.source.kind === 'praxis.stats'
             && document.source.operation === 'distribution'
             && metricCount > 1) {
-            issues.push(this.error('distribution-single-metric', 'metrics', 'x-ui.chart praxis.stats distribution currently supports only a single metric in @praxisui/charts.'));
+            issues.push(this.error('distribution-single-metric', 'metrics', 'x-ui.chart praxis.stats distribution supports only a single metric in @praxisui/charts.'));
         }
         if (document.kind === 'horizontal-bar' && document.orientation && document.orientation !== 'horizontal') {
             issues.push(this.error('horizontal-bar-orientation', 'orientation', 'x-ui.chart kind="horizontal-bar" requires orientation="horizontal" when orientation is provided.'));
@@ -681,18 +942,14 @@ class ChartContractValidationService {
             && document.source.kind === 'praxis.stats'
             && document.source.operation !== 'group-by'
             && document.source.operation !== 'timeseries') {
-            issues.push(this.error('combo-operation-unsupported', 'source.operation', 'x-ui.chart combo charts over praxis.stats currently support only group-by or timeseries operations in @praxisui/charts.'));
+            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.'));
         }
     }
     validateEvents(document, issues) {
         this.validateEventAction('pointClick', document.events?.pointClick, issues);
         this.validateEventAction('drillDown', document.events?.drillDown, issues);
-        if (document.events?.selectionChange) {
-            issues.push(this.error('selection-change-unsupported', 'events.selectionChange', 'x-ui.chart selectionChange/crossFilter declarative runtime actions are not yet implemented in @praxisui/charts.'));
-        }
-        if (document.events?.crossFilter) {
-            issues.push(this.error('cross-filter-unsupported', 'events.crossFilter', 'x-ui.chart selectionChange/crossFilter declarative runtime actions are not yet implemented in @praxisui/charts.'));
-        }
+        this.validateEventAction('selectionChange', document.events?.selectionChange, issues);
+        this.validateEventAction('crossFilter', document.events?.crossFilter, issues);
     }
     validateEventAction(eventKey, eventAction, issues) {
         if (!eventAction?.action) {
@@ -710,6 +967,43 @@ class ChartContractValidationService {
             message,
         };
     }
+    validateCssSize(key, value, field, issues) {
+        if (value === undefined) {
+            return;
+        }
+        if (!this.isValidCssSize(value)) {
+            issues.push(this.error(`sizing-${key}-invalid`, field, `x-ui.chart ${field} must be a positive number or a CSS length such as "320px", "20rem", "50%" or "calc(100% - 16px)".`));
+        }
+    }
+    isValidCssSize(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) && value >= 0;
+        }
+        const trimmed = value.trim();
+        return trimmed.length > 0 && (/^\d+(\.\d+)?$/.test(trimmed)
+            || /^\d+(\.\d+)?(px|rem|em|vh|vw|vmin|vmax|%)$/.test(trimmed)
+            || /^(calc|min|max|clamp)\(.+\)$/.test(trimmed)
+            || /^var\(.+\)$/.test(trimmed));
+    }
+    numericCssSize(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) ? value : null;
+        }
+        const trimmed = value?.trim();
+        if (!trimmed) {
+            return null;
+        }
+        const match = /^(\d+(\.\d+)?)(px)?$/.exec(trimmed);
+        return match ? Number(match[1]) : null;
+    }
+    isValidAspectRatio(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) && value > 0;
+        }
+        const trimmed = value.trim();
+        return (/^\d+(\.\d+)?$/.test(trimmed)
+            || /^\d+(\.\d+)?\s*\/\s*\d+(\.\d+)?$/.test(trimmed));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractValidationService, providedIn: 'root' });
 }
@@ -738,7 +1032,7 @@ class PraxisChartCanonicalContractMapperService {
             orientation: this.resolveOrientation(normalizedContract),
             title: this.mapTextValue(normalizedContract.title),
             subtitle: this.mapTextValue(normalizedContract.subtitle),
-            height: normalizedContract.height,
+            sizing: normalizedContract.sizing,
             axes: this.buildAxes(normalizedContract),
             series: this.buildSeries(normalizedContract),
             dataSource: this.buildDataSource(normalizedContract),
@@ -874,18 +1168,48 @@ class PraxisChartCanonicalContractMapperService {
             pointClick: Boolean(contract.events?.pointClick || contract.events?.drillDown),
             selection: Boolean(contract.events?.selectionChange),
             drillDown: Boolean(contract.events?.drillDown),
+            crossFilter: Boolean(contract.events?.crossFilter),
+            eventActions: {
+                pointClick: contract.events?.pointClick,
+                selectionChange: contract.events?.selectionChange,
+                drillDown: contract.events?.drillDown,
+                crossFilter: contract.events?.crossFilter,
+            },
         };
     }
     buildTheme(contract) {
+        const variantTheme = contract.theme?.variant
+            ? PRAXIS_CHART_THEME_VARIANTS[contract.theme.variant]
+            : undefined;
+        const palette = this.resolveThemePalette(contract);
         return {
-            palette: Array.isArray(contract.theme?.palette) ? contract.theme.palette : undefined,
-            legend: { visible: this.resolveToggle(contract.legend, true) },
+            ...variantTheme,
+            palette: palette ?? variantTheme?.palette,
+            legend: {
+                ...(variantTheme?.legend ?? {}),
+                visible: this.resolveToggle(contract.legend, true),
+            },
             tooltip: {
+                ...(variantTheme?.tooltip ?? {}),
                 enabled: this.resolveToggle(contract.tooltip, true),
                 trigger: contract.kind === 'pie' || contract.kind === 'donut' || contract.kind === 'scatter' ? 'item' : 'axis',
             },
+            surface: {
+                ...(variantTheme?.surface ?? {}),
+                ...(contract.theme?.surface ?? {}),
+            },
+            backgroundColor: contract.theme?.surface?.background ?? variantTheme?.backgroundColor,
+            textColor: variantTheme?.textColor,
+            borderRadius: variantTheme?.borderRadius,
         };
     }
+    resolveThemePalette(contract) {
+        const palette = contract.theme?.palette;
+        if (Array.isArray(palette)) {
+            return palette;
+        }
+        return palette ? resolvePraxisChartPaletteToken(palette) : undefined;
+    }
     buildMotion(motion) {
         if (!motion) {
             return undefined;
@@ -943,12 +1267,13 @@ class PraxisChartCanonicalContractMapperService {
             case 'min':
             case 'max':
             case 'count':
+            case 'distinct-count':
             case 'sum':
                 return aggregation;
             case undefined:
                 return undefined;
             default:
-                throw new Error(`x-ui.chart aggregation "${aggregation}" is not yet implemented in @praxisui/charts.`);
+                throw new Error(`x-ui.chart aggregation "${aggregation}" is not supported in @praxisui/charts.`);
         }
     }
     toQueryFilterMap(filters) {
@@ -1072,8 +1397,6 @@ class PraxisChartCanonicalContractMapperService {
     }
     mapStatsGranularityToBackend(value) {
         switch (value) {
-            case 'hour':
-                return 'HOUR';
             case 'day':
                 return 'DAY';
             case 'week':
@@ -1081,10 +1404,6 @@ class PraxisChartCanonicalContractMapperService {
             case 'month':
             case undefined:
                 return 'MONTH';
-            case 'quarter':
-                return 'QUARTER';
-            case 'year':
-                return 'YEAR';
             default:
                 throw new Error(`x-ui.chart source.options.granularity "${value}" is not supported in @praxisui/charts.`);
         }
@@ -1105,6 +1424,8 @@ class PraxisChartCanonicalContractMapperService {
             case undefined:
             case 'count':
                 return 'COUNT';
+            case 'distinct-count':
+                return 'DISTINCT_COUNT';
             case 'sum':
                 return 'SUM';
             case 'avg':
@@ -1114,7 +1435,7 @@ class PraxisChartCanonicalContractMapperService {
             case 'max':
                 return 'MAX';
             default:
-                throw new Error(`x-ui.chart aggregation "${aggregation}" is not yet implemented in @praxisui/charts.`);
+                throw new Error(`x-ui.chart aggregation "${aggregation}" is not supported in @praxisui/charts.`);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, deps: [{ token: ChartContractNormalizerService }, { token: ChartContractValidationService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1302,11 +1623,14 @@ class PraxisChartComponent {
     chartDocument = input(null, ...(ngDevMode ? [{ debugName: "chartDocument" }] : []));
     filterCriteria = input(null, ...(ngDevMode ? [{ debugName: "filterCriteria" }] : []));
     queryContext = input(null, ...(ngDevMode ? [{ debugName: "queryContext" }] : []));
+    remoteDataResolver = input(null, ...(ngDevMode ? [{ debugName: "remoteDataResolver" }] : []));
     enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     availableResources = input([], ...(ngDevMode ? [{ debugName: "availableResources" }] : []));
     availableFields = input([], ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
     availableTargets = input([], ...(ngDevMode ? [{ debugName: "availableTargets" }] : []));
     pointClick = output();
+    selectionChange = output();
+    crossFilter = output();
     queryRequest = output();
     loadStateChange = output();
     chartDocumentApplied = output();
@@ -1332,6 +1656,7 @@ class PraxisChartComponent {
     fillContainerHeight = signal(false, ...(ngDevMode ? [{ debugName: "fillContainerHeight" }] : []));
     resizeFrameId = null;
     previousRemoteSignature = null;
+    previousRemoteDataResolver = undefined;
     previousDocumentSignature = null;
     editorSessionSubscriptions = [];
     effectiveConfig = computed(() => {
@@ -1363,14 +1688,37 @@ class PraxisChartComponent {
         return [];
     }, ...(ngDevMode ? [{ debugName: "resolvedData" }] : []));
     resolvedHeight = computed(() => {
-        if (this.fillContainerHeight()) {
+        const sizing = this.effectiveConfig().sizing;
+        const mode = sizing?.mode ?? (sizing?.height !== undefined ? 'fixed' : undefined);
+        if (this.fillContainerHeight() || mode === 'fill-container') {
             return '100%';
         }
+        if (mode === 'auto') {
+            return 'auto';
+        }
+        const sizingHeight = this.toCssSize(sizing?.height);
+        if (sizingHeight) {
+            return sizingHeight;
+        }
         const value = this.effectiveConfig().height;
         if (typeof value === 'number')
             return `${value}px`;
         return value || 'var(--praxis-chart-runtime-height, 320px)';
     }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : []));
+    resolvedMinHeight = computed(() => {
+        const sizing = this.effectiveConfig().sizing;
+        return this.toCssSize(sizing?.minHeight) ?? (this.isFillContainerMode() ? '0' : null);
+    }, ...(ngDevMode ? [{ debugName: "resolvedMinHeight" }] : []));
+    resolvedMaxHeight = computed(() => this.toCssSize(this.effectiveConfig().sizing?.maxHeight) ?? null, ...(ngDevMode ? [{ debugName: "resolvedMaxHeight" }] : []));
+    resolvedAspectRatio = computed(() => this.toCssAspectRatio(this.effectiveConfig().sizing?.aspectRatio), ...(ngDevMode ? [{ debugName: "resolvedAspectRatio" }] : []));
+    isFillContainerMode = computed(() => {
+        return this.fillContainerHeight() || this.effectiveConfig().sizing?.mode === 'fill-container';
+    }, ...(ngDevMode ? [{ debugName: "isFillContainerMode" }] : []));
+    surfaceMode = computed(() => this.effectiveConfig().theme?.surface?.mode ?? 'auto', ...(ngDevMode ? [{ debugName: "surfaceMode" }] : []));
+    surfaceBackground = computed(() => this.effectiveConfig().theme?.surface?.background ?? null, ...(ngDevMode ? [{ debugName: "surfaceBackground" }] : []));
+    surfaceBorderColor = computed(() => this.effectiveConfig().theme?.surface?.borderColor ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderColor" }] : []));
+    surfaceBorderWidth = computed(() => this.toCssSize(this.effectiveConfig().theme?.surface?.borderWidth) ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderWidth" }] : []));
+    surfaceBorderRadius = computed(() => this.toCssSize(this.effectiveConfig().theme?.surface?.borderRadius) ?? null, ...(ngDevMode ? [{ debugName: "surfaceBorderRadius" }] : []));
     renderConfig = computed(() => {
         const config = this.effectiveConfig();
         const explicitData = this.data();
@@ -1431,7 +1779,7 @@ class PraxisChartComponent {
     errorDescription = computed(() => this.chartDocumentMappingError()
         ? this.i18n.resolve({
             key: 'praxis.charts.runtime.invalidDocumentDescription',
-            text: 'The canonical chart document could not be mapped to the current Praxis chart runtime. Review the chart contract before continuing.',
+            text: 'The canonical chart document could not be mapped to the Praxis chart runtime. Review the chart contract before continuing.',
         })
         : this.i18n.resolve(this.renderConfig().state?.error?.description), ...(ngDevMode ? [{ debugName: "errorDescription" }] : []));
     editChartLabel = computed(() => this.i18n.resolve({ key: 'praxis.charts.runtime.editChart', text: 'Edit chart settings' }), ...(ngDevMode ? [{ debugName: "editChartLabel" }] : []));
@@ -1486,13 +1834,16 @@ class PraxisChartComponent {
         effect(() => {
             const config = this.effectiveConfig();
             const explicitData = this.data();
+            const remoteDataResolver = this.remoteDataResolver();
             const nextSignature = explicitData === null || explicitData === undefined
                 ? this.buildRemoteSignature(config)
                 : null;
-            if (nextSignature === this.previousRemoteSignature) {
+            if (nextSignature === this.previousRemoteSignature
+                && remoteDataResolver === this.previousRemoteDataResolver) {
                 return;
             }
             this.previousRemoteSignature = nextSignature;
+            this.previousRemoteDataResolver = remoteDataResolver;
             this.remoteResolvedData.set(null);
             this.remoteRuntimeState.set('idle');
             this.remoteTechnicalError.set(null);
@@ -1523,7 +1874,7 @@ class PraxisChartComponent {
             this.remoteRuntimeState.set('loading');
             this.remoteResolvedData.set([]);
             this.remoteTechnicalError.set(null);
-            this.statsApi.execute(event, effectiveConfig)
+            this.executeRemoteDataRequest(event, effectiveConfig)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe({
                 next: (rows) => {
@@ -1551,7 +1902,7 @@ class PraxisChartComponent {
             this.engine.render(host, {
                 config: this.renderConfig(),
                 data: this.resolvedData(),
-                onPointClick: (event) => this.pointClick.emit(event),
+                onPointClick: (event) => this.handlePointClick(event),
             });
             this.ensureResizeObserver(host);
         });
@@ -1612,6 +1963,88 @@ class PraxisChartComponent {
         });
         this.editorSessionSubscriptions = [appliedSubscription, savedSubscription];
     }
+    handlePointClick(event) {
+        this.pointClick.emit(event);
+        const config = this.renderConfig();
+        const interactions = config.interactions;
+        if (!interactions?.selection && !interactions?.crossFilter) {
+            return;
+        }
+        const selectionEvent = this.buildSelectionEvent(config, event);
+        if (interactions.selection) {
+            this.selectionChange.emit(selectionEvent);
+        }
+        if (interactions.crossFilter) {
+            this.crossFilter.emit({
+                chartId: config.id ?? event.chartId,
+                filters: selectionEvent.filters,
+                target: interactions.eventActions?.crossFilter?.target,
+                action: interactions.eventActions?.crossFilter,
+                source: selectionEvent,
+            });
+        }
+    }
+    buildSelectionEvent(config, event) {
+        const action = config.interactions?.eventActions?.selectionChange;
+        const filters = this.buildEventFilters(config, event, action?.mapping);
+        return {
+            ...event,
+            chartId: config.id ?? event.chartId,
+            selected: true,
+            filters,
+            action,
+        };
+    }
+    buildEventFilters(config, event, mapping) {
+        const sourceValues = this.extractPointSourceValues(config, event);
+        if (!mapping || !Object.keys(mapping).length) {
+            return sourceValues;
+        }
+        return Object.entries(mapping).reduce((filters, [sourceField, targetField]) => {
+            if (!targetField) {
+                return filters;
+            }
+            const value = sourceValues[sourceField];
+            if (value !== undefined) {
+                filters[targetField] = value;
+            }
+            return filters;
+        }, {});
+    }
+    extractPointSourceValues(config, event) {
+        const values = {};
+        if (event.data && typeof event.data === 'object' && !Array.isArray(event.data)) {
+            Object.assign(values, event.data);
+        }
+        const categoryField = config.axes?.x?.field
+            ?? config.series.find((series) => series.categoryField)?.categoryField;
+        if (categoryField && values[categoryField] === undefined && event.category !== undefined) {
+            values[categoryField] = event.category;
+        }
+        const series = config.series.find((candidate) => candidate.id === event.seriesId)
+            ?? config.series.find((candidate) => candidate.name === event.seriesName)
+            ?? config.series[0];
+        const metricField = series?.metric?.field;
+        if (metricField && values[metricField] === undefined && event.value !== undefined) {
+            values[metricField] = this.extractPointMetricValue(event.value);
+        }
+        return values;
+    }
+    extractPointMetricValue(value) {
+        return Array.isArray(value) ? value[value.length - 1] : value;
+    }
+    executeRemoteDataRequest(event, config) {
+        const resolver = this.remoteDataResolver();
+        if (!resolver) {
+            return this.statsApi.execute(event, config);
+        }
+        try {
+            return normalizeRemoteDataResolverResult$1(resolver(event, config));
+        }
+        catch (error) {
+            return throwError(() => error);
+        }
+    }
     ensureResizeObserver(host) {
         if (this.resizeObserver()) {
             return;
@@ -1622,6 +2055,23 @@ class PraxisChartComponent {
         observer.observe(host);
         this.resizeObserver.set(observer);
     }
+    toCssSize(value) {
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        const trimmed = value?.trim();
+        if (trimmed && /^-?\d+(\.\d+)?$/.test(trimmed)) {
+            return `${trimmed}px`;
+        }
+        return trimmed || null;
+    }
+    toCssAspectRatio(value) {
+        if (typeof value === 'number') {
+            return Number.isFinite(value) && value > 0 ? String(value) : null;
+        }
+        const trimmed = value?.trim();
+        return trimmed || null;
+    }
     buildRemoteSignature(config) {
         if (config.dataSource?.kind !== 'remote') {
             return null;
@@ -1646,7 +2096,7 @@ class PraxisChartComponent {
             return;
         }
         const syncShellMode = () => {
-            this.fillContainerHeight.set(shell.classList.contains('expanded') || shell.classList.contains('fullscreen'));
+            this.fillContainerHeight.set(this.shouldFillShellContainer(shell));
             this.scheduleResizeAfterShellModeChange();
         };
         syncShellMode();
@@ -1659,6 +2109,12 @@ class PraxisChartComponent {
         });
         this.shellObserver.set(observer);
     }
+    shouldFillShellContainer(shell) {
+        return (shell.classList.contains('no-shell') ||
+            shell.classList.contains('body-fill') ||
+            shell.classList.contains('expanded') ||
+            shell.classList.contains('fullscreen'));
+    }
     scheduleResizeAfterShellModeChange() {
         this.scheduleEngineResize();
     }
@@ -1685,14 +2141,27 @@ class PraxisChartComponent {
         this.resizeFrameId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", selectionChange: "selectionChange", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved" }, providers: [
             EChartsEngineAdapter,
             {
                 provide: PRAXIS_CHART_ENGINE,
                 useExisting: EChartsEngineAdapter,
             },
         ], viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <section class="praxis-chart-shell" [style.height]="resolvedHeight()">
+    <section
+      class="praxis-chart-shell"
+      [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
+      [class.praxis-chart-shell-contained]="surfaceMode() === 'contained'"
+      [class.praxis-chart-shell-embedded]="surfaceMode() === 'embedded'"
+      [style.height]="resolvedHeight()"
+      [style.minHeight]="resolvedMinHeight()"
+      [style.maxHeight]="resolvedMaxHeight()"
+      [style.aspectRatio]="resolvedAspectRatio()"
+      [style.--praxis-chart-config-surface-bg]="surfaceBackground()"
+      [style.--praxis-chart-config-surface-border]="surfaceBorderColor()"
+      [style.--praxis-chart-config-surface-border-width]="surfaceBorderWidth()"
+      [style.--praxis-chart-config-surface-radius]="surfaceBorderRadius()"
+    >
       @if (canOpenConfigEditor()) {
         <button
           class="praxis-chart-settings-trigger"
@@ -1752,7 +2221,7 @@ class PraxisChartComponent {
         <div #chartHost class="praxis-chart-host"></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}: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:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;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:14px;background:linear-gradient(180deg,#ffffff8c,#ffffff2e),linear-gradient(0deg,#1263b40a,#1263b400);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: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width: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;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.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: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
@@ -1763,7 +2232,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                             useExisting: EChartsEngineAdapter,
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="praxis-chart-shell" [style.height]="resolvedHeight()">
+    <section
+      class="praxis-chart-shell"
+      [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
+      [class.praxis-chart-shell-contained]="surfaceMode() === 'contained'"
+      [class.praxis-chart-shell-embedded]="surfaceMode() === 'embedded'"
+      [style.height]="resolvedHeight()"
+      [style.minHeight]="resolvedMinHeight()"
+      [style.maxHeight]="resolvedMaxHeight()"
+      [style.aspectRatio]="resolvedAspectRatio()"
+      [style.--praxis-chart-config-surface-bg]="surfaceBackground()"
+      [style.--praxis-chart-config-surface-border]="surfaceBorderColor()"
+      [style.--praxis-chart-config-surface-border-width]="surfaceBorderWidth()"
+      [style.--praxis-chart-config-surface-radius]="surfaceBorderRadius()"
+    >
       @if (canOpenConfigEditor()) {
         <button
           class="praxis-chart-settings-trigger"
@@ -1823,8 +2305,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <div #chartHost class="praxis-chart-host"></div>
       }
     </section>
-  `, styles: [":host{display:block;height:100%;min-width:0}: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:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;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:14px;background:linear-gradient(180deg,#ffffff8c,#ffffff2e),linear-gradient(0deg,#1263b40a,#1263b400);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: true }] }], 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 }] }], 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"] }], 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 }] }] } });
+  `, styles: [":host{display:block;height:100%;min-width: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;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], 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"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], 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 normalizeFilterCriteria(criteria) {
     if (!criteria)
         return null;
@@ -1914,6 +2396,18 @@ function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
         },
     };
 }
+function normalizeRemoteDataResolverResult$1(result) {
+    if (Array.isArray(result)) {
+        return of(result);
+    }
+    if (isObservable(result)) {
+        return result;
+    }
+    if (result && typeof result.then === 'function') {
+        return from(result);
+    }
+    return of([]);
+}
 
 const PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH = {
     Jan: [
@@ -1994,7 +2488,7 @@ class PraxisChartDrilldownPanelComponent {
         [data]="detailData()"
       ></praxis-chart>
     </section>
-  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDrilldownPanelComponent, decorators: [{
             type: Component,
@@ -2087,6 +2581,19 @@ const PRAXIS_CHART_PHASE1_PORTS = [
         },
         exposure: { public: true, group: 'config' },
     },
+    {
+        id: 'remoteDataResolver',
+        label: 'Remote Data Resolver',
+        direction: 'input',
+        semanticKind: 'collection',
+        description: 'Optional host resolver that owns remote chart data execution for governed integrations outside the default praxis.stats client.',
+        schema: {
+            id: 'PraxisChartRemoteDataResolver',
+            kind: 'ts-type',
+            ref: 'PraxisChartRemoteDataResolver',
+        },
+        exposure: { public: true, group: 'data' },
+    },
     {
         id: 'config',
         label: 'Chart Config',
@@ -2114,6 +2621,34 @@ const PRAXIS_CHART_PHASE1_PORTS = [
         },
         exposure: { public: true, group: 'interaction' },
     },
+    {
+        id: 'selectionChange',
+        label: 'Selection Change',
+        direction: 'output',
+        semanticKind: 'event',
+        description: 'Canonical selected point payload emitted when declarative chart selection is enabled.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartSelectionEvent',
+            kind: 'ts-type',
+            ref: 'PraxisChartSelectionEvent',
+        },
+        exposure: { public: true, group: 'interaction' },
+    },
+    {
+        id: 'crossFilter',
+        label: 'Cross Filter',
+        direction: 'output',
+        semanticKind: 'query-context',
+        description: 'Canonical filter payload derived from selected chart points for connected hosts.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartCrossFilterEvent',
+            kind: 'ts-type',
+            ref: 'PraxisChartCrossFilterEvent',
+        },
+        exposure: { public: true, group: 'interaction' },
+    },
     {
         id: 'queryRequest',
         label: 'Query Request',
@@ -2175,6 +2710,11 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
             type: 'PraxisDataQueryContext | null',
             description: 'Primary semantic query contract for dynamic-page orchestration. Charts consume filters, sort and limit from queryContext while preserving filterCriteria as a compatibility bridge.',
         },
+        {
+            name: 'remoteDataResolver',
+            type: 'PraxisChartRemoteDataResolver | null',
+            description: 'Optional host resolver for remote chart rows. When provided, the runtime emits queryRequest and delegates row resolution to the resolver instead of the default praxis.stats client.',
+        },
         {
             name: 'filterCriteria',
             type: 'Record<string, unknown> | null',
@@ -2211,6 +2751,16 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
             type: 'PraxisChartPointEvent',
             description: 'Emitted when the host wants to react to a point/series click.',
         },
+        {
+            name: 'selectionChange',
+            type: 'PraxisChartSelectionEvent',
+            description: 'Emitted when declarative chart selection resolves a selected point and its canonical filters.',
+        },
+        {
+            name: 'crossFilter',
+            type: 'PraxisChartCrossFilterEvent',
+            description: 'Emitted when declarative cross-filtering resolves filters from a selected chart point.',
+        },
         {
             name: 'queryRequest',
             type: 'PraxisChartQueryRequestEvent',
@@ -2329,9 +2879,12 @@ class PraxisChartShowcaseWidgetComponent {
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
     chartDocument = input(null, ...(ngDevMode ? [{ debugName: "chartDocument" }] : []));
+    remoteDataResolver = input(null, ...(ngDevMode ? [{ debugName: "remoteDataResolver" }] : []));
     enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization" }] : []));
     viewMode = input('chart', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
     pointClick = output();
+    selectionChange = output();
+    crossFilter = output();
     queryRequest = output();
     loadStateChange = output();
     statsApi = inject(PraxisChartStatsApiService);
@@ -2340,6 +2893,7 @@ class PraxisChartShowcaseWidgetComponent {
     remoteRuntimeState = signal('idle', ...(ngDevMode ? [{ debugName: "remoteRuntimeState" }] : []));
     remoteTechnicalError = signal(null, ...(ngDevMode ? [{ debugName: "remoteTechnicalError" }] : []));
     previousRemoteSignature = null;
+    previousRemoteDataResolver = undefined;
     resolvedRows = computed(() => {
         const explicitData = this.data();
         if (explicitData !== null && explicitData !== undefined) {
@@ -2361,13 +2915,16 @@ class PraxisChartShowcaseWidgetComponent {
         effect(() => {
             const config = this.config();
             const explicitData = this.data();
+            const remoteDataResolver = this.remoteDataResolver();
             const nextSignature = explicitData === null || explicitData === undefined
                 ? buildRemoteSignature(config)
                 : null;
-            if (nextSignature === this.previousRemoteSignature) {
+            if (nextSignature === this.previousRemoteSignature
+                && remoteDataResolver === this.previousRemoteDataResolver) {
                 return;
             }
             this.previousRemoteSignature = nextSignature;
+            this.previousRemoteDataResolver = remoteDataResolver;
             this.remoteResolvedRows.set(null);
             this.remoteRuntimeState.set('idle');
             this.remoteTechnicalError.set(null);
@@ -2393,7 +2950,7 @@ class PraxisChartShowcaseWidgetComponent {
             this.remoteRuntimeState.set('loading');
             this.remoteResolvedRows.set([]);
             this.remoteTechnicalError.set(null);
-            this.statsApi.execute(event, config)
+            this.executeRemoteDataRequest(event, config)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe({
                 next: (rows) => {
@@ -2411,6 +2968,18 @@ class PraxisChartShowcaseWidgetComponent {
             });
         });
     }
+    executeRemoteDataRequest(event, config) {
+        const resolver = this.remoteDataResolver();
+        if (!resolver) {
+            return this.statsApi.execute(event, config);
+        }
+        try {
+            return normalizeRemoteDataResolverResult(resolver(event, config));
+        }
+        catch (error) {
+            return throwError(() => error);
+        }
+    }
     handleRowClick(event) {
         const row = event?.row;
         if (!row) {
@@ -2430,14 +2999,17 @@ class PraxisChartShowcaseWidgetComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartShowcaseWidgetComponent, isStandalone: true, selector: "praxis-chart-showcase-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartShowcaseWidgetComponent, isStandalone: true, selector: "praxis-chart-showcase-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", selectionChange: "selectionChange", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: `
     @if (viewMode() === 'chart') {
       <praxis-chart
         [config]="config()"
         [data]="data()"
         [chartDocument]="chartDocument()"
+        [remoteDataResolver]="remoteDataResolver()"
         [enableCustomization]="enableCustomization()"
         (pointClick)="pointClick.emit($event)"
+        (selectionChange)="selectionChange.emit($event)"
+        (crossFilter)="crossFilter.emit($event)"
         (queryRequest)="queryRequest.emit($event)"
         (loadStateChange)="loadStateChange.emit($event)"
       ></praxis-chart>
@@ -2463,7 +3035,7 @@ class PraxisChartShowcaseWidgetComponent {
         (rowClick)="handleRowClick($event)"
       ></praxis-table>
     }
-  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "filterCriteria", "queryContext", "enableCustomization", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "filterCriteria", "queryContext", "enableCustomization", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
             type: Component,
@@ -2473,8 +3045,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         [config]="config()"
         [data]="data()"
         [chartDocument]="chartDocument()"
+        [remoteDataResolver]="remoteDataResolver()"
         [enableCustomization]="enableCustomization()"
         (pointClick)="pointClick.emit($event)"
+        (selectionChange)="selectionChange.emit($event)"
+        (crossFilter)="crossFilter.emit($event)"
         (queryRequest)="queryRequest.emit($event)"
         (loadStateChange)="loadStateChange.emit($event)"
       ></praxis-chart>
@@ -2501,7 +3076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       ></praxis-table>
     }
   `, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
 function resolveShowcaseStateMode(config, remoteRuntimeState = 'idle') {
     if (config.preferredLoadState === 'loading') {
         return 'loading';
@@ -2596,6 +3171,18 @@ function buildRemoteSignature(config) {
         query: config.dataSource.query,
     });
 }
+function normalizeRemoteDataResolverResult(result) {
+    if (Array.isArray(result)) {
+        return of(result);
+    }
+    if (isObservable(result)) {
+        return result;
+    }
+    if (result && typeof result.then === 'function') {
+        return from(result);
+    }
+    return of([]);
+}
 
 const PRAXIS_CHART_SHOWCASE_WIDGET_METADATA = {
     id: 'praxis-chart-showcase-widget',
@@ -2641,6 +3228,16 @@ const PRAXIS_CHART_SHOWCASE_WIDGET_METADATA = {
             type: 'PraxisChartPointEvent',
             description: 'Forwards point selection from the chart or mapped row selection from the table.',
         },
+        {
+            name: 'selectionChange',
+            type: 'PraxisChartSelectionEvent',
+            description: 'Forwards chart selection events with mapped filter values.',
+        },
+        {
+            name: 'crossFilter',
+            type: 'PraxisChartCrossFilterEvent',
+            description: 'Forwards chart cross-filter events for Dynamic Page composition links.',
+        },
         {
             name: 'queryRequest',
             type: 'PraxisChartQueryRequestEvent',
@@ -2796,12 +3393,18 @@ class PraxisChartSchemaMapperService {
         if (schema.outputs) {
             return schema.outputs;
         }
-        if (schema.chart?.events?.pointClick || schema.chart?.events?.drillDown) {
-            return {
-                pointClick: 'emit',
-            };
+        const events = schema.chart?.events;
+        const outputs = {};
+        if (events?.pointClick || events?.drillDown) {
+            outputs['pointClick'] = 'emit';
         }
-        return undefined;
+        if (events?.selectionChange) {
+            outputs['selectionChange'] = 'emit';
+        }
+        if (events?.crossFilter) {
+            outputs['crossFilter'] = 'emit';
+        }
+        return Object.keys(outputs).length ? outputs : undefined;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartSchemaMapperService, deps: [{ token: PraxisChartMetadataRegistrationService }, { token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartSchemaMapperService, providedIn: 'root' });
@@ -2973,6 +3576,7 @@ class AnalyticsChartConfigAdapterService {
             case 'min':
             case 'max':
             case 'count':
+            case 'distinct-count':
             case 'sum':
                 return normalizedAggregation;
             case '':
@@ -3130,7 +3734,7 @@ const PRAXIS_CHART_BACKEND_MOCK_BAR = {
             chartId: 'monthly-revenue-chart',
             title: { key: 'charts.heroes.universe.title', fallback: 'Heroes por universo' },
             subtitle: { key: 'charts.heroes.universe.subtitle', fallback: 'Group-by em /vw-perfil-heroi' },
-            height: 320,
+            sizing: { mode: 'fixed', height: 320 },
             source: {
                 kind: 'praxis.stats',
                 resource: 'api/human-resources/vw-perfil-heroi',
@@ -3320,7 +3924,7 @@ const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
             title: { key: 'charts.payroll.department.title', fallback: 'Massa salarial por departamento' },
             subtitle: { key: 'charts.payroll.department.subtitle', fallback: 'Ranking horizontal consumindo praxis.stats' },
             orientation: 'horizontal',
-            height: 340,
+            sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
                 resource: 'api/human-resources/vw-analytics-folha-pagamento',
@@ -3381,7 +3985,7 @@ const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
             chartId: 'payroll-net-stacked-area',
             title: { key: 'charts.payroll.stackedArea.title', fallback: 'Composicao temporal da folha' },
             subtitle: { key: 'charts.payroll.stackedArea.subtitle', fallback: 'Stacked area sobre payroll analytics' },
-            height: 340,
+            sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
                 resource: 'api/human-resources/vw-analytics-folha-pagamento',
@@ -3440,7 +4044,7 @@ const PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR = {
                 key: 'charts.payroll.multiMetric.subtitle',
                 fallback: 'Massa liquida e desconto medio via group-by sem eixo secundario',
             },
-            height: 340,
+            sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
                 resource: 'api/human-resources/vw-analytics-folha-pagamento',
@@ -3503,7 +4107,7 @@ const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
             chartId: 'payroll-net-vs-discount-scatter',
             title: { key: 'charts.payroll.scatter.title', fallback: 'Liquido x desconto medio' },
             subtitle: { key: 'charts.payroll.scatter.subtitle', fallback: 'Scatter sobre recortes do payroll' },
-            height: 340,
+            sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
                 resource: 'api/human-resources/vw-analytics-folha-pagamento',
@@ -3559,7 +4163,7 @@ const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
             chartId: 'payroll-combo-variance',
             title: { key: 'charts.payroll.combo.title', fallback: 'Folha liquida e desconto medio' },
             subtitle: { key: 'charts.payroll.combo.subtitle', fallback: 'Barras para liquido e linha para desconto medio via praxis.stats' },
-            height: 340,
+            sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
                 resource: 'api/human-resources/vw-analytics-folha-pagamento',
@@ -4157,7 +4761,7 @@ class PraxisChartCompositionShowcaseComponent {
         </article>
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-caption{margin:6px 0 0;color:#516074;font-size:.88rem;line-height:1.45}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange", "widgetEvent", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
             type: Component,
@@ -4279,7 +4883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
 const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.runtime.editChart': 'Edit chart settings',
     'praxis.charts.runtime.invalidDocumentTitle': 'Invalid canonical configuration',
-    'praxis.charts.runtime.invalidDocumentDescription': 'The canonical chart document could not be mapped to the current Praxis Charts runtime. Review the chart contract before continuing.',
+    'praxis.charts.runtime.invalidDocumentDescription': 'The canonical chart document could not be mapped by Praxis Charts. Review the chart contract before continuing.',
     'praxis.charts.editor.section.general': 'General',
     'praxis.charts.editor.section.data': 'Data',
     'praxis.charts.editor.section.analytics': 'Analytics',
@@ -4291,7 +4895,11 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.field.kind': 'Kind',
     'praxis.charts.editor.field.title': 'Title',
     'praxis.charts.editor.field.subtitle': 'Subtitle',
+    'praxis.charts.editor.field.sizingMode': 'Sizing',
     'praxis.charts.editor.field.height': 'Height',
+    'praxis.charts.editor.field.minHeight': 'Minimum height',
+    'praxis.charts.editor.field.maxHeight': 'Maximum height',
+    'praxis.charts.editor.field.aspectRatio': 'Aspect ratio',
     'praxis.charts.editor.field.sourceKind': 'Source',
     'praxis.charts.editor.field.resource': 'Resource',
     'praxis.charts.editor.field.operation': 'Operation',
@@ -4310,7 +4918,11 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.field.legendEnabled': 'Show legend',
     'praxis.charts.editor.field.labelsEnabled': 'Show labels',
     'praxis.charts.editor.field.tooltipEnabled': 'Show tooltip',
+    'praxis.charts.editor.field.themeVariant': 'Theme variant',
+    'praxis.charts.editor.field.paletteMode': 'Palette mode',
+    'praxis.charts.editor.field.paletteToken': 'Palette token',
     'praxis.charts.editor.field.palette': 'Palette colors',
+    'praxis.charts.editor.field.surfaceMode': 'Surface mode',
     'praxis.charts.editor.field.emptyTitle': 'Empty title',
     'praxis.charts.editor.field.emptyDescription': 'Empty description',
     'praxis.charts.editor.field.loadingTitle': 'Loading title',
@@ -4329,8 +4941,15 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.issues.empty': 'No issues were identified.',
     'praxis.charts.editor.appearance.featuresTitle': 'Display features',
     'praxis.charts.editor.appearance.paletteTitle': 'Palette',
-    'praxis.charts.editor.appearance.paletteHint': 'Use comma or line separated colors to persist theme.palette as a canonical array.',
+    'praxis.charts.editor.appearance.paletteHint': 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.',
+    'praxis.charts.editor.appearance.surfaceTitle': 'Surface',
+    'praxis.charts.editor.appearance.surfaceHint': 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.',
     'praxis.charts.editor.appearance.statesTitle': 'State messages',
+    'praxis.charts.editor.hint.sizingMode': 'Use fill-container only when the host widget provides a defined body height.',
+    'praxis.charts.editor.hint.height': 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.',
+    'praxis.charts.editor.hint.minHeight': 'Set a readable minimum for compact dashboard widgets.',
+    'praxis.charts.editor.hint.maxHeight': 'Leave empty unless the chart must stop growing inside a flexible layout.',
+    'praxis.charts.editor.hint.aspectRatio': 'Optional. Use values such as 1.777 or 16 / 9.',
     'praxis.charts.editor.analytics.dimensionsTitle': 'Dimensions',
     'praxis.charts.editor.analytics.metricsTitle': 'Metrics',
     'praxis.charts.editor.analytics.addDimension': 'Add dimension',
@@ -4342,23 +4961,38 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.specialization.comboTitle': 'Combo guidance',
     'praxis.charts.editor.specialization.comboHint': 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.',
     'praxis.charts.editor.specialization.pieDonutTitle': 'Composition guidance',
+    'praxis.charts.editor.themeVariant.none': 'No variant',
+    'praxis.charts.editor.themeVariant.default': 'Default',
+    'praxis.charts.editor.themeVariant.compact': 'Compact',
+    'praxis.charts.editor.themeVariant.executive': 'Executive',
+    'praxis.charts.editor.paletteMode.token': 'Registered token',
+    'praxis.charts.editor.paletteMode.custom': 'Custom colors',
+    'praxis.charts.editor.paletteToken.brand-primary': 'Brand primary',
+    '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.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',
+    'praxis.charts.editor.events.selectionChangeTitle': 'Selection change',
     'praxis.charts.editor.events.drillDownTitle': 'Drill down',
+    'praxis.charts.editor.events.crossFilterTitle': 'Cross filter',
     'praxis.charts.editor.events.none': 'None',
     'praxis.charts.editor.sourceKind.praxisStats': 'praxis.stats',
     'praxis.charts.editor.sourceKind.derived': 'derived',
+    'praxis.charts.editor.sizing.fixed': 'Fixed height',
+    'praxis.charts.editor.sizing.fill-container': 'Fill widget',
+    'praxis.charts.editor.sizing.auto': 'Automatic',
+    'praxis.charts.editor.surface.auto': 'Automatic',
+    'praxis.charts.editor.surface.embedded': 'Embedded in widget',
+    'praxis.charts.editor.surface.contained': 'Contained surface',
     'praxis.charts.editor.operation.groupBy': 'group-by',
     'praxis.charts.editor.operation.timeseries': 'timeseries',
     'praxis.charts.editor.operation.distribution': 'distribution',
-    'praxis.charts.editor.granularity.hour': 'hour',
     'praxis.charts.editor.granularity.day': 'day',
     'praxis.charts.editor.granularity.week': 'week',
     'praxis.charts.editor.granularity.month': 'month',
-    'praxis.charts.editor.granularity.quarter': 'quarter',
-    'praxis.charts.editor.granularity.year': 'year',
     'praxis.charts.editor.distributionMode.terms': 'terms',
     'praxis.charts.editor.distributionMode.histogram': 'histogram',
     'praxis.charts.editor.motionPreset.subtle': 'subtle',
@@ -4399,7 +5033,7 @@ const PRAXIS_CHARTS_EN_US = {
 const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.runtime.editChart': 'Editar configurações do gráfico',
     'praxis.charts.runtime.invalidDocumentTitle': 'Configuração canônica inválida',
-    'praxis.charts.runtime.invalidDocumentDescription': 'O documento canônico do gráfico não pode ser mapeado para o runtime atual do Praxis Charts. Revise o contrato do gráfico antes de continuar.',
+    'praxis.charts.runtime.invalidDocumentDescription': 'O documento canônico do gráfico não pode ser mapeado pelo Praxis Charts. Revise o contrato do gráfico antes de continuar.',
     'praxis.charts.editor.section.general': 'Geral',
     'praxis.charts.editor.section.data': 'Dados',
     'praxis.charts.editor.section.analytics': 'Estrutura',
@@ -4411,7 +5045,11 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.field.kind': 'Tipo',
     'praxis.charts.editor.field.title': 'Título',
     'praxis.charts.editor.field.subtitle': 'Subtítulo',
+    'praxis.charts.editor.field.sizingMode': 'Tamanho',
     'praxis.charts.editor.field.height': 'Altura',
+    'praxis.charts.editor.field.minHeight': 'Altura mínima',
+    'praxis.charts.editor.field.maxHeight': 'Altura máxima',
+    'praxis.charts.editor.field.aspectRatio': 'Proporção',
     'praxis.charts.editor.field.sourceKind': 'Fonte',
     'praxis.charts.editor.field.resource': 'Recurso',
     'praxis.charts.editor.field.operation': 'Operação',
@@ -4430,7 +5068,11 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.field.legendEnabled': 'Exibir legenda',
     'praxis.charts.editor.field.labelsEnabled': 'Exibir rótulos',
     'praxis.charts.editor.field.tooltipEnabled': 'Exibir dica de ferramenta (tooltip)',
+    'praxis.charts.editor.field.themeVariant': 'Variante de tema',
+    'praxis.charts.editor.field.paletteMode': 'Modo da paleta',
+    'praxis.charts.editor.field.paletteToken': 'Token da paleta',
     'praxis.charts.editor.field.palette': 'Cores da paleta',
+    'praxis.charts.editor.field.surfaceMode': 'Modo da superfície',
     'praxis.charts.editor.field.emptyTitle': 'Título do estado vazio',
     'praxis.charts.editor.field.emptyDescription': 'Descrição do estado vazio',
     'praxis.charts.editor.field.loadingTitle': 'Título de carregamento',
@@ -4449,8 +5091,15 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.issues.empty': 'Nenhum problema identificado.',
     'praxis.charts.editor.appearance.featuresTitle': 'Recursos visuais',
     'praxis.charts.editor.appearance.paletteTitle': 'Paleta',
-    'praxis.charts.editor.appearance.paletteHint': 'Use cores separadas por vírgula ou linha para persistir `theme.palette` como array canônico.',
+    'praxis.charts.editor.appearance.paletteHint': 'Use um token registrado ou cores separadas por vírgula para persistir `theme.palette` no contrato canônico.',
+    'praxis.charts.editor.appearance.surfaceTitle': 'Superfície',
+    'praxis.charts.editor.appearance.surfaceHint': 'Use embutido para widgets de dashboard e contido apenas quando o gráfico precisar ser dono da própria superfície visual.',
     'praxis.charts.editor.appearance.statesTitle': 'Mensagens de estado',
+    'praxis.charts.editor.hint.sizingMode': 'Use preencher container apenas quando o widget host fornecer altura definida para o corpo.',
+    'praxis.charts.editor.hint.height': 'Números são salvos como pixels; medidas CSS como 20rem também são aceitas.',
+    'praxis.charts.editor.hint.minHeight': 'Defina um mínimo legível para widgets compactos de dashboard.',
+    'praxis.charts.editor.hint.maxHeight': 'Deixe vazio exceto quando o gráfico não puder crescer dentro de um layout flexível.',
+    'praxis.charts.editor.hint.aspectRatio': 'Opcional. Use valores como 1.777 ou 16 / 9.',
     'praxis.charts.editor.analytics.dimensionsTitle': 'Dimensões',
     'praxis.charts.editor.analytics.metricsTitle': 'Métricas',
     'praxis.charts.editor.analytics.addDimension': 'Adicionar dimensão',
@@ -4462,23 +5111,38 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.specialization.comboTitle': 'Guia de combo',
     'praxis.charts.editor.specialization.comboHint': 'Gráficos combo exigem pelo menos duas métricas e permitem configurar eixo e tipo de série por métrica.',
     'praxis.charts.editor.specialization.pieDonutTitle': 'Guia de composição',
+    'praxis.charts.editor.themeVariant.none': 'Sem variante',
+    'praxis.charts.editor.themeVariant.default': 'Padrão',
+    'praxis.charts.editor.themeVariant.compact': 'Compacta',
+    'praxis.charts.editor.themeVariant.executive': 'Executiva',
+    'praxis.charts.editor.paletteMode.token': 'Token registrado',
+    'praxis.charts.editor.paletteMode.custom': 'Cores customizadas',
+    'praxis.charts.editor.paletteToken.brand-primary': 'Marca principal',
+    '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.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',
+    'praxis.charts.editor.events.selectionChangeTitle': 'Mudança de seleção',
     'praxis.charts.editor.events.drillDownTitle': 'Drill down',
+    'praxis.charts.editor.events.crossFilterTitle': 'Filtro cruzado',
     'praxis.charts.editor.events.none': 'Nenhuma',
     'praxis.charts.editor.sourceKind.praxisStats': 'praxis.stats',
     'praxis.charts.editor.sourceKind.derived': 'derivado',
+    'praxis.charts.editor.sizing.fixed': 'Altura fixa',
+    'praxis.charts.editor.sizing.fill-container': 'Preencher widget',
+    'praxis.charts.editor.sizing.auto': 'Automático',
+    'praxis.charts.editor.surface.auto': 'Automático',
+    'praxis.charts.editor.surface.embedded': 'Embutido no widget',
+    'praxis.charts.editor.surface.contained': 'Superfície contida',
     'praxis.charts.editor.operation.groupBy': 'agrupar por',
     'praxis.charts.editor.operation.timeseries': 'série temporal',
     'praxis.charts.editor.operation.distribution': 'distribuição',
-    'praxis.charts.editor.granularity.hour': 'hora',
     'praxis.charts.editor.granularity.day': 'dia',
     'praxis.charts.editor.granularity.week': 'semana',
     'praxis.charts.editor.granularity.month': 'mês',
-    'praxis.charts.editor.granularity.quarter': 'trimestre',
-    'praxis.charts.editor.granularity.year': 'ano',
     'praxis.charts.editor.distributionMode.terms': 'termos',
     'praxis.charts.editor.distributionMode.histogram': 'histograma',
     'praxis.charts.editor.motionPreset.subtle': 'sutil',
@@ -4682,14 +5346,19 @@ class PraxisChartConfigEditor {
     ];
     sourceKinds = ['praxis.stats', 'derived'];
     operations = ['group-by', 'timeseries', 'distribution'];
-    timeGranularities = ['hour', 'day', 'week', 'month', 'quarter', 'year'];
+    timeGranularities = ['day', 'week', 'month'];
     distributionModes = ['terms', 'histogram'];
     dimensionRoles = ['category', 'series', 'segment', 'time', 'value'];
-    metricAggregations = ['sum', 'count', 'avg', 'min', 'max'];
+    metricAggregations = ['sum', 'count', 'distinct-count', 'avg', 'min', 'max'];
     metricAxes = ['primary', 'secondary'];
     metricSeriesKinds = ['bar', 'line', 'area'];
     motionPresets = ['subtle', 'standard', 'expressive'];
     eventActionOptions = ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'];
+    sizingModes = ['fixed', 'fill-container', 'auto'];
+    surfaceModes = ['auto', 'embedded', 'contained'];
+    themeVariants = ['default', 'compact', 'executive'];
+    paletteModes = ['token', 'custom'];
+    paletteTokens = Object.keys(PRAXIS_CHART_PALETTE_TOKENS);
     activeSection = signal('general', ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
     injectedData = inject(SETTINGS_PANEL_DATA, { optional: true });
     defaults = inject(ChartEditorDefaultsService);
@@ -4790,9 +5459,62 @@ class PraxisChartConfigEditor {
         }));
     }
     setHeight(value) {
+        this.setSizingHeight(value);
+    }
+    setSizingMode(mode) {
+        this.patchDocument((document) => ({
+            ...document,
+            height: undefined,
+            sizing: {
+                ...(document.sizing ?? {}),
+                mode,
+                height: mode === 'fixed' ? document.sizing?.height : undefined,
+            },
+        }));
+    }
+    setSizingHeight(value) {
+        const height = this.normalizeSizingSizeInput(value);
+        this.patchDocument((document) => ({
+            ...document,
+            height: undefined,
+            sizing: {
+                ...(document.sizing ?? {}),
+                mode: 'fixed',
+                height,
+            },
+        }));
+    }
+    setSizingMinHeight(value) {
+        const minHeight = this.normalizeSizingSizeInput(value);
         this.patchDocument((document) => ({
             ...document,
-            height: value.trim() || undefined,
+            height: undefined,
+            sizing: {
+                ...(document.sizing ?? {}),
+                minHeight,
+            },
+        }));
+    }
+    setSizingMaxHeight(value) {
+        const maxHeight = this.normalizeSizingSizeInput(value);
+        this.patchDocument((document) => ({
+            ...document,
+            height: undefined,
+            sizing: {
+                ...(document.sizing ?? {}),
+                maxHeight,
+            },
+        }));
+    }
+    setSizingAspectRatio(value) {
+        const aspectRatio = this.normalizeSizingSizeInput(value);
+        this.patchDocument((document) => ({
+            ...document,
+            height: undefined,
+            sizing: {
+                ...(document.sizing ?? {}),
+                aspectRatio,
+            },
         }));
     }
     setSourceKind(value) {
@@ -5015,6 +5737,30 @@ class PraxisChartConfigEditor {
             },
         }));
     }
+    setThemeVariant(variant) {
+        this.patchDocument((document) => ({
+            ...document,
+            theme: this.mergeTheme(document.theme, {
+                variant: variant || undefined,
+            }),
+        }));
+    }
+    setPaletteMode(mode) {
+        this.patchDocument((document) => ({
+            ...document,
+            theme: this.mergeTheme(document.theme, {
+                palette: mode === 'token' ? 'brand-primary' : undefined,
+            }),
+        }));
+    }
+    setPaletteToken(token) {
+        this.patchDocument((document) => ({
+            ...document,
+            theme: this.mergeTheme(document.theme, {
+                palette: token,
+            }),
+        }));
+    }
     setPalette(value) {
         const palette = value
             .split(/[\n,]/)
@@ -5022,10 +5768,20 @@ class PraxisChartConfigEditor {
             .filter(Boolean);
         this.patchDocument((document) => ({
             ...document,
-            theme: {
-                ...(document.theme ?? {}),
+            theme: this.mergeTheme(document.theme, {
                 palette: palette.length ? palette : undefined,
-            },
+            }),
+        }));
+    }
+    setSurfaceMode(mode) {
+        this.patchDocument((document) => ({
+            ...document,
+            theme: this.mergeTheme(document.theme, {
+                surface: {
+                    ...(document.theme?.surface ?? {}),
+                    mode,
+                },
+            }),
         }));
     }
     setStateTitle(stateKey, value) {
@@ -5130,9 +5886,25 @@ class PraxisChartConfigEditor {
         return value === undefined ? '' : String(value);
     }
     heightValue() {
-        const height = this.currentDocument().height;
+        const document = this.normalizedDocument();
+        const height = document.sizing?.height;
         return height === undefined || height === null ? '' : String(height);
     }
+    sizingModeValue() {
+        return this.normalizedDocument().sizing?.mode ?? 'auto';
+    }
+    sizingMinHeightValue() {
+        const minHeight = this.normalizedDocument().sizing?.minHeight;
+        return minHeight === undefined || minHeight === null ? '' : String(minHeight);
+    }
+    sizingMaxHeightValue() {
+        const maxHeight = this.normalizedDocument().sizing?.maxHeight;
+        return maxHeight === undefined || maxHeight === null ? '' : String(maxHeight);
+    }
+    sizingAspectRatioValue() {
+        const aspectRatio = this.normalizedDocument().sizing?.aspectRatio;
+        return aspectRatio === undefined || aspectRatio === null ? '' : String(aspectRatio);
+    }
     featureEnabled(feature) {
         const value = this.doc()[feature];
         if (typeof value === 'boolean') {
@@ -5144,6 +5916,21 @@ class PraxisChartConfigEditor {
         const palette = this.doc().theme?.palette;
         return Array.isArray(palette) ? palette.join(', ') : '';
     }
+    paletteModeValue() {
+        return typeof this.doc().theme?.palette === 'string' ? 'token' : 'custom';
+    }
+    paletteTokenValue() {
+        const palette = this.doc().theme?.palette;
+        return typeof palette === 'string' && this.paletteTokens.includes(palette)
+            ? palette
+            : 'brand-primary';
+    }
+    themeVariantValue() {
+        return this.normalizedDocument().theme?.variant ?? '';
+    }
+    surfaceModeValue() {
+        return this.normalizedDocument().theme?.surface?.mode ?? 'auto';
+    }
     stateTitle(stateKey) {
         const value = this.doc().state?.[stateKey]?.title;
         if (typeof value === 'string') {
@@ -5267,6 +6054,22 @@ class PraxisChartConfigEditor {
             return accumulator;
         }, {});
     }
+    normalizeSizingSizeInput(value) {
+        const trimmed = value.trim();
+        if (!trimmed) {
+            return undefined;
+        }
+        return /^\d+(\.\d+)?$/.test(trimmed) ? Number(trimmed) : trimmed;
+    }
+    mergeTheme(currentTheme, patch) {
+        const nextTheme = {
+            ...(currentTheme ?? {}),
+            ...(patch ?? {}),
+        };
+        return Object.values(nextTheme).some((value) => value !== undefined)
+            ? nextTheme
+            : undefined;
+    }
     createApplyPayload() {
         return {
             document: this.getSettingsValue(),
@@ -5294,7 +6097,7 @@ class PraxisChartConfigEditor {
         this.documentChange.emit(structuredClone(this.normalizedDocument()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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        [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 [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.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setHeight($event)\" [disabled]=\"isReadonly()\" />\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 [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                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [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.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; 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                    </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 [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                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [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 [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\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>\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                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use comma or line separated colors to persist theme.palette as a canonical array.') }}\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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [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.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\" (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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [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.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\">\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 metricAggregations; 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\">\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\">\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\" (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\" (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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\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                        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              </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;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.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}.editor-card{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)}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1$1.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$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.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: "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", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", 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        [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 [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 [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                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [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.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; 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                    </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 [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                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [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 [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [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.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\" (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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [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.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\">\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 metricAggregations; 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\">\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\">\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\" (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\" (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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\" />\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                        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;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.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}.editor-card{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)}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: i1$1.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$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.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", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
             type: Component,
@@ -5308,7 +6111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", 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        [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 [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.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setHeight($event)\" [disabled]=\"isReadonly()\" />\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 [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                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [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.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; 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                    </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 [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                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [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 [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\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>\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                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use comma or line separated colors to persist theme.palette as a canonical array.') }}\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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [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.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\" (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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [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.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\">\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 metricAggregations; 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\">\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\">\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\" (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\" (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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\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                        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              </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;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.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}.editor-card{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)}@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        [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 [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 [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                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [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.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; 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                    </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 [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                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [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 [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [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.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\" (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\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\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\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [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.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\">\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 metricAggregations; 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\">\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\">\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\" (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\" (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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\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                        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\">\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 [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                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\" />\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                        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;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.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}.editor-card{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)}@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({
@@ -5324,4 +6127,4 @@ var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };