@praxisui/charts 10.0.0-rc.38 → 10.0.0-rc.39

package/fesm2022/praxisui-charts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Optional, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, linkedSignal, computed, afterNextRender, effect, untracked, ChangeDetectionStrategy, Component, LOCALE_ID, Injector, ENVIRONMENT_INITIALIZER, ViewChild, Input } from '@angular/core';
 import * as i1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, ComponentMetadataRegistry, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, normalizePraxisPresentationVisualization, resolvePraxisMicroVisualizationTone, AnalyticsStatsRequestBuilderService, AnalyticsPresentationResolver, ResourceDiscoveryService, humanizeCatalogFieldName, createDefaultTableConfig, providePraxisI18n, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, DynamicWidgetPageComponent, SETTINGS_PANEL_DATA, inferDomainSemanticTone, inferDomainSemanticHexColor, PraxisIconDirective } from '@praxisui/core';
+import { validateResourceQuickViewBinding, normalizeResourceQuickViewBinding, buildApiUrl, API_URL, PraxisI18nService, ComponentMetadataRegistry, SETTINGS_PANEL_BRIDGE, ResourceQuickViewService, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, PraxisQuickViewTriggerDirective, normalizePraxisPresentationVisualization, resolvePraxisMicroVisualizationTone, AnalyticsStatsRequestBuilderService, AnalyticsPresentationResolver, ResourceDiscoveryService, humanizeCatalogFieldName, createDefaultTableConfig, providePraxisI18n, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, DynamicWidgetPageComponent, SETTINGS_PANEL_DATA, inferDomainSemanticTone, inferDomainSemanticHexColor, PraxisIconDirective } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { throwError, map, finalize, shareReplay, of, isObservable, from, firstValueFrom, timeout, BehaviorSubject, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/material/tooltip';
@@ -11,8 +11,8 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { catchError } from 'rxjs/operators';
 import { AnalyticsTableConfigAdapterService, AnalyticsTableStatsApiService, ANALYTICS_TABLE_ROW_KEY_FIELD, PraxisTable } from '@praxisui/table';
 import { color, use, init } from 'echarts/core';
-import { BarChart, FunnelChart, GaugeChart, LineChart, PieChart, ScatterChart, TreemapChart } from 'echarts/charts';
-import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TimelineComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
+import { BarChart, FunnelChart, GaugeChart, HeatmapChart, LineChart, PieChart, ScatterChart, TreemapChart } from 'echarts/charts';
+import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TimelineComponent, TitleComponent, TooltipComponent, TransformComponent, VisualMapComponent } from 'echarts/components';
 import { UniversalTransition } from 'echarts/features';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i1$3 from '@angular/forms';
@@ -79,6 +79,108 @@ const PRAXIS_CHART_THEME_VARIANTS = {
     },
 };
 
+function hasChartQuickViewBinding(config) {
+    if (config.interactions?.quickView) {
+        if (validateResourceQuickViewBinding(config.interactions.quickView).valid) {
+            return true;
+        }
+    }
+    return (config.series ?? []).some((series) => {
+        if (!series.quickView) {
+            return false;
+        }
+        return validateResourceQuickViewBinding(series.quickView).valid;
+    });
+}
+function resolveChartSeriesForPoint(config, seriesId, seriesName) {
+    const seriesList = config.series ?? [];
+    if (!seriesList.length) {
+        return undefined;
+    }
+    if (seriesId) {
+        const exact = seriesList.find((candidate) => candidate.id === seriesId);
+        if (exact) {
+            return exact;
+        }
+        const prefixed = seriesList.find((candidate) => seriesId.startsWith(`${candidate.id}:`));
+        if (prefixed) {
+            return prefixed;
+        }
+    }
+    if (seriesName) {
+        const byName = seriesList.find((candidate) => candidate.name === seriesName);
+        if (byName) {
+            return byName;
+        }
+    }
+    return seriesList[0];
+}
+function resolveChartPointQuickView(config, point) {
+    const series = resolveChartSeriesForPoint(config, point.seriesId, point.seriesName);
+    const rawBinding = series?.quickView ?? config.interactions?.quickView;
+    if (!rawBinding) {
+        return null;
+    }
+    const validation = validateResourceQuickViewBinding(rawBinding);
+    if (!validation.valid || !validation.binding) {
+        return null;
+    }
+    const binding = validation.binding;
+    if (!point.data || typeof point.data !== 'object' || Array.isArray(point.data)) {
+        return null;
+    }
+    const record = {
+        ...point.data,
+    };
+    const sourceIdentityField = binding.recordOpen.sourceIdentityField;
+    const isCanonicalStats = config.dataSource?.kind === 'remote'
+        && config.dataSource.query?.sourceKind === 'praxis.stats';
+    if (isCanonicalStats) {
+        const statsOperation = config.dataSource?.kind === 'remote'
+            ? config.dataSource.query?.statsOperation
+            : undefined;
+        const distributionMode = config.dataSource?.kind === 'remote'
+            ? config.dataSource.query?.distributionMode
+            : undefined;
+        if (statsOperation === 'timeseries'
+            || (statsOperation === 'distribution'
+                && (distributionMode === 'histogram' || record['from'] != null || record['to'] != null))) {
+            return null;
+        }
+        const categoryField = config.axes?.x?.field
+            ?? config.series.find((candidate) => candidate.categoryField)?.categoryField;
+        const secondaryCategoryField = config.series.find((candidate) => candidate.secondaryCategoryField)?.secondaryCategoryField
+            ?? (config.axes?.y?.type === 'category' ? config.axes.y.field : undefined);
+        const coordinates = record['coordinates'] && typeof record['coordinates'] === 'object' && !Array.isArray(record['coordinates'])
+            ? record['coordinates']
+            : null;
+        if (sourceIdentityField === categoryField && record['key'] !== undefined && record['key'] !== null) {
+            record[sourceIdentityField] = record['key'];
+        }
+        else if (sourceIdentityField === secondaryCategoryField
+            && record['secondaryKey'] !== undefined
+            && record['secondaryKey'] !== null) {
+            record[sourceIdentityField] = record['secondaryKey'];
+        }
+        else if (coordinates && sourceIdentityField in coordinates) {
+            record[sourceIdentityField] = coordinates[sourceIdentityField];
+        }
+        else if (sourceIdentityField !== 'key' && sourceIdentityField !== 'secondaryKey') {
+            delete record[sourceIdentityField];
+        }
+    }
+    const identityCandidate = record[sourceIdentityField];
+    const hasValidIdentity = (typeof identityCandidate === 'number' && Number.isFinite(identityCandidate))
+        || (typeof identityCandidate === 'string' && identityCandidate.trim().length > 0);
+    if (!hasValidIdentity) {
+        return null;
+    }
+    return {
+        binding,
+        record,
+    };
+}
+
 class PraxisChartDataTransformerService {
     transform(config, rows) {
         if (config.type === 'pie' || config.type === 'donut') {
@@ -93,6 +195,9 @@ class PraxisChartDataTransformerService {
         if (config.type === 'gauge') {
             return this.transformGauge(config, rows);
         }
+        if (config.type === 'heatmap') {
+            return this.transformHeatmap(config, rows);
+        }
         if (config.type === 'scatter') {
             return this.transformScatter(config, rows);
         }
@@ -151,6 +256,99 @@ class PraxisChartDataTransformerService {
             diagnostic: { code, message },
         };
     }
+    transformHeatmap(config, rows) {
+        const seriesConfig = config.series[0];
+        const xCategoryField = seriesConfig?.categoryField ?? config.axes?.x?.field;
+        const yCategoryField = xCategoryField
+            ? (this.resolveSecondaryCategoryField(config, xCategoryField)
+                ?? (config.axes?.y?.type === 'category' && config.axes?.y?.field !== xCategoryField
+                    ? config.axes.y.field
+                    : undefined))
+            : undefined;
+        if (!seriesConfig || !xCategoryField || !yCategoryField || !rows.length) {
+            return {
+                mode: 'heatmap',
+                categories: [],
+                series: [],
+                slices: [],
+                hasData: false,
+            };
+        }
+        const usesCanonicalStatsIdentity = config.dataSource?.kind === 'remote'
+            && config.dataSource.query?.sourceKind === 'praxis.stats';
+        const xBuckets = this.buildCategoryBuckets(config, rows, xCategoryField);
+        const yBuckets = this.buildSecondaryCategoryBuckets(rows, yCategoryField, usesCanonicalStatsIdentity);
+        const xCategories = xBuckets.map((bucket) => bucket.label);
+        const yCategories = yBuckets.map((bucket) => bucket.label);
+        const cells = [];
+        let min = Number.POSITIVE_INFINITY;
+        let max = Number.NEGATIVE_INFINITY;
+        let hasFiniteValue = false;
+        xBuckets.forEach((xBucket, xIndex) => {
+            yBuckets.forEach((yBucket, yIndex) => {
+                const cellRows = xBucket.rows.filter((row) => this.resolveSecondaryCategoryIdentity(row, this.normalizeCategory(row[yCategoryField]), usesCanonicalStatsIdentity) === yBucket.identity);
+                if (!cellRows.length) {
+                    return;
+                }
+                const metricField = seriesConfig.metric?.field;
+                const aggregation = seriesConfig.metric?.aggregation ?? 'sum';
+                const allCellMetricValuesMissing = Boolean(metricField
+                    && aggregation !== 'count'
+                    && aggregation !== 'distinct-count'
+                    && cellRows.every((row) => this.extractStrictMetricValue(row, seriesConfig) === null));
+                const rawValue = allCellMetricValuesMissing
+                    ? null
+                    : this.aggregate(cellRows, seriesConfig);
+                if (rawValue !== null && Number.isFinite(rawValue)) {
+                    hasFiniteValue = true;
+                    if (rawValue < min) {
+                        min = rawValue;
+                    }
+                    if (rawValue > max) {
+                        max = rawValue;
+                    }
+                }
+                const source = cellRows[0];
+                const pointTuple = [xIndex, yIndex, rawValue];
+                const cellData = this.buildBucketPointData(cellRows, pointTuple, config, seriesConfig, {
+                    category: xBucket.label,
+                    secondaryCategory: yBucket.label,
+                });
+                cells.push({
+                    id: `${seriesConfig.id}:${xBucket.identity}:${yBucket.identity}`,
+                    xIndex,
+                    yIndex,
+                    xCategory: xBucket.label,
+                    yCategory: yBucket.label,
+                    value: pointTuple,
+                    rawValue,
+                    data: cellData,
+                });
+            });
+        });
+        const normalizedMin = hasFiniteValue ? min : 0;
+        const normalizedMax = hasFiniteValue
+            ? (max > min ? max : min + (min === 0 ? 1 : Math.abs(min) * 0.25))
+            : 1;
+        return {
+            mode: 'heatmap',
+            categories: xCategories,
+            series: [],
+            slices: [],
+            heatmap: {
+                id: seriesConfig.id,
+                name: seriesConfig.name ?? seriesConfig.metric?.label ?? seriesConfig.id,
+                xCategories,
+                yCategories,
+                cells,
+                min: normalizedMin,
+                max: normalizedMax,
+                labelsVisible: seriesConfig.labels?.visible ?? false,
+                color: seriesConfig.color,
+            },
+            hasData: xCategories.length > 0 && yCategories.length > 0 && hasFiniteValue,
+        };
+    }
     transformCartesian(config, rows) {
         const categoryField = config.axes?.x?.field;
         if (!categoryField || !rows.length || !config.series.length) {
@@ -165,7 +363,12 @@ class PraxisChartDataTransformerService {
         const categoryBuckets = this.buildCategoryBuckets(config, rows, categoryField);
         const categories = categoryBuckets.map((bucket) => bucket.label);
         const timeAxis = this.usesCanonicalTimeCoordinates(config);
-        const series = config.series.map((seriesConfig) => this.buildCartesianSeries(config, seriesConfig, categoryBuckets, timeAxis));
+        const secondaryCategoryField = this.resolveSecondaryCategoryField(config, categoryField);
+        const hasSecondaryValues = Boolean(secondaryCategoryField
+            && rows.some((row) => row[secondaryCategoryField] !== undefined && row[secondaryCategoryField] !== null));
+        const series = hasSecondaryValues && secondaryCategoryField
+            ? this.buildPivotedCartesianSeries(config, rows, categoryBuckets, secondaryCategoryField, timeAxis)
+            : config.series.map((seriesConfig) => this.buildCartesianSeries(config, seriesConfig, categoryBuckets, timeAxis));
         return {
             mode: 'cartesian',
             categories,
@@ -194,7 +397,7 @@ class PraxisChartDataTransformerService {
                     name: bucket.label,
                     value,
                     color: seriesConfig.color,
-                    data: this.buildPointData(bucket.rows[0], value),
+                    data: this.buildBucketPointData(bucket.rows, value, config, seriesConfig),
                 }];
         });
         return {
@@ -220,11 +423,85 @@ class PraxisChartDataTransformerService {
                 const value = this.aggregate(bucket.rows, seriesConfig);
                 const source = bucket.rows[0];
                 return source
-                    ? this.buildPointData(source, timeAxis ? [bucket.coordinate, value] : value)
+                    ? this.buildBucketPointData(bucket.rows, timeAxis ? [bucket.coordinate, value] : value, config, seriesConfig)
                     : (timeAxis ? [bucket.coordinate, value] : value);
             }),
         };
     }
+    resolveSecondaryCategoryField(config, primaryCategoryField) {
+        const seriesSecondary = config.series.find((s) => Boolean(s.secondaryCategoryField?.trim()))?.secondaryCategoryField?.trim();
+        if (seriesSecondary && seriesSecondary !== primaryCategoryField) {
+            return seriesSecondary;
+        }
+        if (config.dataSource?.kind === 'remote') {
+            const secondDimension = config.dataSource.query?.dimensions?.[1]?.trim();
+            if (secondDimension && secondDimension !== primaryCategoryField) {
+                return secondDimension;
+            }
+        }
+        return undefined;
+    }
+    buildPivotedCartesianSeries(config, rows, categoryBuckets, secondaryCategoryField, timeAxis) {
+        const usesCanonicalStatsIdentity = config.dataSource?.kind === 'remote'
+            && config.dataSource.query?.sourceKind === 'praxis.stats';
+        const secondaryBuckets = this.buildSecondaryCategoryBuckets(rows, secondaryCategoryField, usesCanonicalStatsIdentity);
+        const multiMetric = config.series.length > 1;
+        return config.series.flatMap((seriesConfig) => secondaryBuckets.map((secondaryBucket) => {
+            const baseName = seriesConfig.name ?? seriesConfig.metric?.label ?? seriesConfig.id;
+            return {
+                id: `${seriesConfig.id}:${secondaryBucket.identity}`,
+                name: multiMetric ? `${baseName} - ${secondaryBucket.label}` : secondaryBucket.label,
+                type: this.resolveCartesianSeriesType(config, seriesConfig),
+                axis: seriesConfig.axis ?? 'primary',
+                stack: config.type === 'stacked-bar' || config.type === 'stacked-area'
+                    ? seriesConfig.stackId ?? 'stack-1'
+                    : undefined,
+                smooth: seriesConfig.smooth ?? this.isAreaLikeSeries(config, seriesConfig),
+                area: this.isAreaLikeSeries(config, seriesConfig),
+                color: multiMetric ? undefined : undefined,
+                labelsVisible: seriesConfig.labels?.visible ?? false,
+                points: categoryBuckets.map((primaryBucket) => {
+                    const cellRows = primaryBucket.rows.filter((row) => this.resolveSecondaryCategoryIdentity(row, this.normalizeCategory(row[secondaryCategoryField]), usesCanonicalStatsIdentity) === secondaryBucket.identity);
+                    if (!cellRows.length) {
+                        return timeAxis ? [primaryBucket.coordinate, null] : null;
+                    }
+                    const value = this.aggregate(cellRows, seriesConfig);
+                    return this.buildBucketPointData(cellRows, timeAxis ? [primaryBucket.coordinate, value] : value, config, seriesConfig);
+                }),
+            };
+        }));
+    }
+    buildSecondaryCategoryBuckets(rows, secondaryCategoryField, usesCanonicalStatsIdentity) {
+        const buckets = new Map();
+        for (const row of rows) {
+            if (row[secondaryCategoryField] === undefined) {
+                continue;
+            }
+            const label = this.normalizeCategory(row['secondaryLabel'] ?? row[secondaryCategoryField]);
+            const identity = this.resolveSecondaryCategoryIdentity(row, label, usesCanonicalStatsIdentity);
+            const existing = buckets.get(identity);
+            if (existing) {
+                existing.rows.push(row);
+                continue;
+            }
+            buckets.set(identity, {
+                identity,
+                label,
+                coordinate: label,
+                rows: [row],
+            });
+        }
+        return Array.from(buckets.values());
+    }
+    resolveSecondaryCategoryIdentity(row, label, usesCanonicalStatsIdentity) {
+        if (!usesCanonicalStatsIdentity) {
+            return label;
+        }
+        if (row['secondaryKey'] !== null && row['secondaryKey'] !== undefined) {
+            return `key:${this.typedIdentity(row['secondaryKey'])}`;
+        }
+        return `label:${label}`;
+    }
     buildCategoryBuckets(config, rows, categoryField) {
         const buckets = new Map();
         const usesCanonicalStatsIdentity = config.dataSource?.kind === 'remote'
@@ -310,6 +587,59 @@ class PraxisChartDataTransformerService {
             value,
         };
     }
+    buildBucketPointData(rows, value, config, seriesConfig, extra) {
+        const source = rows[0] ?? {};
+        const pointData = {
+            ...source,
+            ...(extra ?? {}),
+            value,
+        };
+        if (rows.length > 1) {
+            const identityFields = this.collectQuickViewIdentityFields(config, seriesConfig);
+            for (const field of identityFields) {
+                if (!this.hasUniformEntityIdentity(rows, field)) {
+                    delete pointData[field];
+                }
+            }
+        }
+        return pointData;
+    }
+    collectQuickViewIdentityFields(config, seriesConfig) {
+        const fields = new Set();
+        const seriesField = seriesConfig?.quickView?.recordOpen?.sourceIdentityField?.trim();
+        if (seriesField) {
+            fields.add(seriesField);
+        }
+        const chartField = config.interactions?.quickView?.recordOpen?.sourceIdentityField?.trim();
+        if (chartField) {
+            fields.add(chartField);
+        }
+        for (const candidate of config.series ?? []) {
+            const candidateField = candidate.quickView?.recordOpen?.sourceIdentityField?.trim();
+            if (candidateField) {
+                fields.add(candidateField);
+            }
+        }
+        return Array.from(fields);
+    }
+    hasUniformEntityIdentity(rows, field) {
+        if (!rows.length) {
+            return false;
+        }
+        const first = rows[0]?.[field];
+        if (typeof first !== 'string' && typeof first !== 'number') {
+            return false;
+        }
+        const normalizedFirst = String(first).trim();
+        if (!normalizedFirst) {
+            return false;
+        }
+        return rows.every((row) => {
+            const candidate = row?.[field];
+            return (typeof candidate === 'string' || typeof candidate === 'number')
+                && String(candidate).trim() === normalizedFirst;
+        });
+    }
     hasPointValue(point) {
         if (point == null) {
             return false;
@@ -383,9 +713,12 @@ class PraxisChartDataTransformerService {
         };
     }
     aggregate(rows, seriesConfig) {
+        const field = seriesConfig.metric?.field;
+        if (field && rows.length > 0 && rows.every((row) => row[field] === null)) {
+            return null;
+        }
         const aggregation = seriesConfig.metric?.aggregation ?? 'sum';
         if (aggregation === 'count') {
-            const field = seriesConfig.metric?.field;
             if (field) {
                 const values = rows
                     .map((row) => this.extractMetricValue(row, seriesConfig))
@@ -397,19 +730,20 @@ class PraxisChartDataTransformerService {
             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
+            .filter((row) => !field || row[field] !== null)
             .map((row) => this.extractMetricValue(row, seriesConfig))
             .filter((value) => Number.isFinite(value));
         if (!values.length)
             return 0;
         switch (aggregation) {
             case 'avg':
+            case 'avg-per-cycle-occurrence':
                 return values.reduce((sum, value) => sum + value, 0) / values.length;
             case 'min':
                 return Math.min(...values);
@@ -497,8 +831,37 @@ class ChartContractNormalizerService {
         document = this.normalizeKindSpecificFields(document);
         document = this.normalizeOperationSpecificFields(document);
         document = this.normalizeSourceSpecificFields(document);
+        document = this.normalizeQuickViewBindings(document);
         return document;
     }
+    normalizeQuickViewBindings(document) {
+        let nextDocument = document;
+        if (nextDocument.metrics?.length) {
+            nextDocument = {
+                ...nextDocument,
+                metrics: nextDocument.metrics.map((metric) => {
+                    if (!metric.quickView) {
+                        return metric;
+                    }
+                    const normalized = normalizeResourceQuickViewBinding(metric.quickView);
+                    return normalized ? { ...metric, quickView: normalized } : metric;
+                }),
+            };
+        }
+        if (nextDocument.events?.quickView) {
+            const normalized = normalizeResourceQuickViewBinding(nextDocument.events.quickView);
+            if (normalized) {
+                nextDocument = {
+                    ...nextDocument,
+                    events: {
+                        ...nextDocument.events,
+                        quickView: normalized,
+                    },
+                };
+            }
+        }
+        return nextDocument;
+    }
     normalizeMotion(document) {
         if (!document.motion) {
             return document;
@@ -595,8 +958,18 @@ class ChartContractNormalizerService {
         const options = { ...document.source.options };
         if (document.source.operation !== 'timeseries') {
             options.granularity = undefined;
+        }
+        if (document.source.operation !== 'timeseries' && document.source.operation !== 'group-by') {
             options.fillGaps = undefined;
         }
+        if (document.source.operation !== 'group-by') {
+            if (options.timezone !== undefined)
+                options.timezone = undefined;
+            if (options.periodField !== undefined)
+                options.periodField = undefined;
+            if (options.periodPreset !== undefined)
+                options.periodPreset = undefined;
+        }
         if (document.source.operation !== 'distribution') {
             options.mode = undefined;
             options.bucketSize = undefined;
@@ -632,7 +1005,8 @@ class ChartContractNormalizerService {
             || document.kind === 'donut'
             || document.kind === 'funnel'
             || document.kind === 'pyramid'
-            || document.kind === 'treemap';
+            || document.kind === 'treemap'
+            || document.kind === 'heatmap';
     }
     normalizeCssSizeValue(value) {
         if (typeof value !== 'string') {
@@ -665,6 +1039,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const SUPPORTED_DIMENSION_EXTRACTIONS = new Set([
+    'NONE',
+    'HOUR_OF_DAY',
+    'DAY_OF_WEEK',
+    'DAY_OF_MONTH',
+    'MONTH_OF_YEAR',
+    'QUARTER_OF_YEAR',
+    'HOUR',
+    'DAY',
+    'WEEK',
+    'MONTH',
+    'QUARTER',
+    'YEAR',
+]);
+const SUPPORTED_PERIOD_PRESETS = new Set([
+    'TODAY',
+    'YESTERDAY',
+    'LAST_7_DAYS',
+    'LAST_30_DAYS',
+    'THIS_MONTH',
+    'LAST_MONTH',
+    'THIS_QUARTER',
+    'THIS_YEAR',
+]);
 class ChartContractValidationService {
     validate(document) {
         const issues = [];
@@ -748,12 +1146,34 @@ class ChartContractValidationService {
             if (!metric.field?.trim()) {
                 issues.push(this.error('metric-field-required', `metrics[${index}].field`, 'x-ui.chart metric.field is required.'));
             }
+            if (metric.quickView !== undefined) {
+                this.validateQuickViewBinding(metric.quickView, `metrics[${index}].quickView`, issues);
+            }
         });
         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.'));
         });
+        document.metrics?.forEach((metric, index) => {
+            if (metric.aggregation !== 'avg-per-cycle-occurrence') {
+                return;
+            }
+            if (document.source.kind !== 'praxis.stats' || document.source.operation !== 'group-by') {
+                issues.push(this.error('avg-per-cycle-occurrence-operation-unsupported', `metrics[${index}].aggregation`, 'x-ui.chart aggregation "avg-per-cycle-occurrence" requires source.kind="praxis.stats" and source.operation="group-by".'));
+            }
+            const hasTemporalExtraction = (document.dimensions ?? []).some((dimension) => Boolean(dimension.extraction && dimension.extraction !== 'NONE'));
+            if (!hasTemporalExtraction) {
+                issues.push(this.error('avg-per-cycle-occurrence-missing-temporal-extraction', 'dimensions', 'x-ui.chart aggregation "avg-per-cycle-occurrence" requires at least one dimension with a temporal extraction.'));
+            }
+            if (!document.source.options?.timezone?.trim()) {
+                issues.push(this.error('avg-per-cycle-occurrence-missing-timezone', 'source.options.timezone', 'x-ui.chart aggregation "avg-per-cycle-occurrence" requires source.options.timezone.'));
+            }
+            const periodPreset = document.source.options?.periodPreset;
+            if (!periodPreset || !SUPPORTED_PERIOD_PRESETS.has(periodPreset)) {
+                issues.push(this.error('avg-per-cycle-occurrence-missing-period-preset', 'source.options.periodPreset', 'x-ui.chart aggregation "avg-per-cycle-occurrence" requires a supported source.options.periodPreset.'));
+            }
+        });
     }
     validateComparison(document, issues) {
         if (document.source.kind !== 'praxis.stats' || document.source.operation !== 'comparison') {
@@ -842,6 +1262,7 @@ class ChartContractValidationService {
             'pyramid',
             'treemap',
             'gauge',
+            'heatmap',
         ];
         if (!supportedKinds.includes(document.kind)) {
             issues.push(this.error('unsupported-kind', 'kind', `x-ui.chart kind="${document.kind}" is not supported in @praxisui/charts.`));
@@ -852,7 +1273,15 @@ class ChartContractValidationService {
             if (!dimension.field?.trim()) {
                 issues.push(this.error('dimension-field-required', `dimensions[${index}].field`, 'x-ui.chart dimension.field is required.'));
             }
+            if (dimension.extraction !== undefined && !SUPPORTED_DIMENSION_EXTRACTIONS.has(dimension.extraction)) {
+                issues.push(this.error('dimension-extraction-unsupported', `dimensions[${index}].extraction`, `x-ui.chart dimensions[${index}].extraction="${String(dimension.extraction)}" is not supported.`));
+            }
         });
+        if (document.source.kind === 'praxis.stats'
+            && document.source.operation === 'group-by'
+            && (document.dimensions?.length ?? 0) > 2) {
+            issues.push(this.error('group-by-max-dimensions', 'dimensions', 'x-ui.chart praxis.stats group-by supports at most 2 dimensions.'));
+        }
         if (!categorySliceChart && document.kind !== 'gauge' && !document.dimensions?.length) {
             issues.push(this.error('missing-dimension', 'dimensions', 'x-ui.chart cartesian charts require at least one dimension.'));
         }
@@ -866,6 +1295,7 @@ class ChartContractValidationService {
             issues.push(this.error('combo-min-metrics', 'metrics', 'x-ui.chart combo charts require at least two metrics.'));
         }
         this.validateGauge(document, issues);
+        this.validateHeatmap(document, issues);
         if (document.kind !== 'combo' && document.metrics?.some((metric) => metric.axis === 'secondary')) {
             issues.push(this.error('secondary-axis-non-combo', 'metrics', 'x-ui.chart axis="secondary" is supported only for combo charts in @praxisui/charts.'));
         }
@@ -943,6 +1373,21 @@ class ChartContractValidationService {
             issues.push(this.error('gauge-limit-required', 'source.options.limit', 'x-ui.chart gauge charts over praxis.stats require source.options.limit=1.'));
         }
     }
+    validateHeatmap(document, issues) {
+        if (document.kind !== 'heatmap') {
+            return;
+        }
+        if ((document.dimensions?.length ?? 0) !== 2) {
+            issues.push(this.error('heatmap-two-dimensions', 'dimensions', 'x-ui.chart heatmap charts require exactly two dimensions (x and y matrix axes).'));
+        }
+        if ((document.metrics?.length ?? 0) !== 1) {
+            issues.push(this.error('heatmap-single-metric', 'metrics', 'x-ui.chart heatmap charts require exactly one metric.'));
+        }
+        if (document.source.kind === 'praxis.stats'
+            && document.source.operation !== 'group-by') {
+            issues.push(this.error('heatmap-operation-unsupported', 'source.operation', 'x-ui.chart heatmap charts over praxis.stats require operation="group-by".'));
+        }
+    }
     isCategorySliceChart(kind) {
         return kind === 'pie'
             || kind === 'donut'
@@ -997,6 +1442,15 @@ class ChartContractValidationService {
         this.validateEventAction('drillDown', document.events?.drillDown, issues);
         this.validateEventAction('selectionChange', document.events?.selectionChange, issues);
         this.validateEventAction('crossFilter', document.events?.crossFilter, issues);
+        if (document.events?.quickView !== undefined) {
+            this.validateQuickViewBinding(document.events.quickView, 'events.quickView', issues);
+        }
+    }
+    validateQuickViewBinding(binding, field, issues) {
+        const result = validateResourceQuickViewBinding(binding);
+        if (!result.valid || !result.binding) {
+            issues.push(this.error('quick-view-binding-invalid', field, `x-ui.chart ${field} must be a valid ResourceQuickViewBinding with recordOpen.sourceIdentityField and recordOpen.target.{resourceKey, surfaceId}.`));
+        }
     }
     validateEventAction(eventKey, eventAction, issues) {
         if (!eventAction?.action) {
@@ -1199,7 +1653,15 @@ class PraxisChartCanonicalContractMapperService {
         return this.normalizer.normalize(contract);
     }
     buildAxes(contract) {
-        const firstDimension = contract.dimensions?.[0];
+        const dimensions = contract.dimensions ?? [];
+        const firstDimension = dimensions[0];
+        const secondDimension = dimensions[1];
+        const firstDimensionField = firstDimension
+            ? this.resolveEffectiveDimensionField(firstDimension, dimensions)
+            : undefined;
+        const secondDimensionField = secondDimension
+            ? this.resolveEffectiveDimensionField(secondDimension, dimensions)
+            : undefined;
         const firstMetric = contract.metrics?.[0];
         const secondMetric = contract.metrics?.[1];
         const secondaryMetric = contract.metrics?.find((metric) => metric.axis === 'secondary');
@@ -1208,16 +1670,30 @@ class PraxisChartCanonicalContractMapperService {
         if (this.isCategorySliceChart(contract.kind) || contract.kind === 'gauge') {
             return {
                 x: {
-                    field: firstDimension?.field,
+                    field: firstDimensionField,
                     label: this.toLabel(firstDimension?.label),
                 },
             };
         }
+        if (contract.kind === 'heatmap') {
+            return {
+                x: {
+                    field: firstDimensionField,
+                    label: this.toLabel(firstDimension?.label),
+                    type: 'category',
+                },
+                y: {
+                    field: secondDimensionField,
+                    label: this.toLabel(secondDimension?.label),
+                    type: 'category',
+                },
+            };
+        }
         if (contract.kind === 'scatter') {
             const groupedMeasures = !!secondMetric;
             return {
                 x: {
-                    field: groupedMeasures ? firstMetric?.field : firstDimension?.field,
+                    field: groupedMeasures ? firstMetric?.field : firstDimensionField,
                     label: this.toLabel(groupedMeasures ? firstMetric?.label : firstDimension?.label),
                     type: groupedMeasures ? 'value' : firstDimension?.role === 'time' ? 'time' : 'value',
                 },
@@ -1230,7 +1706,7 @@ class PraxisChartCanonicalContractMapperService {
         }
         return {
             x: {
-                field: firstDimension?.field,
+                field: firstDimensionField,
                 label: this.toLabel(firstDimension?.label),
                 type: firstDimension?.role === 'time' ? 'time' : 'category',
             },
@@ -1251,7 +1727,15 @@ class PraxisChartCanonicalContractMapperService {
         };
     }
     buildSeries(contract) {
-        const firstDimension = contract.dimensions?.[0];
+        const dimensions = contract.dimensions ?? [];
+        const firstDimension = dimensions[0];
+        const secondDimension = dimensions[1];
+        const firstDimensionField = firstDimension
+            ? this.resolveEffectiveDimensionField(firstDimension, dimensions)
+            : undefined;
+        const secondDimensionField = secondDimension
+            ? this.resolveEffectiveDimensionField(secondDimension, dimensions)
+            : undefined;
         const labelsVisible = this.resolveOptionalToggle(contract.labels);
         const comparison = contract.source.kind === 'praxis.stats' && contract.source.operation === 'comparison';
         const metrics = contract.kind === 'scatter' && (contract.metrics?.length ?? 0) === 2
@@ -1266,8 +1750,9 @@ class PraxisChartCanonicalContractMapperService {
                 type: this.resolveSeriesType(contract.kind, metric.seriesKind, index),
                 axis: metric.axis ?? 'primary',
                 categoryField: comparison || this.isCategorySliceChart(contract.kind) || contract.kind === 'gauge'
-                    ? firstDimension?.field
+                    ? firstDimensionField
                     : undefined,
+                ...(secondDimensionField ? { secondaryCategoryField: secondDimensionField } : {}),
                 metric: {
                     field: period ? this.comparisonMetricField(metric.field, period) : metric.field,
                     aggregation: this.mapAggregation(metric.aggregation),
@@ -1282,6 +1767,7 @@ class PraxisChartCanonicalContractMapperService {
                     }
                     : undefined,
                 smooth: this.shouldSmoothSeries(contract.kind, metric.seriesKind),
+                ...(metric.quickView ? { quickView: structuredClone(metric.quickView) } : {}),
             }));
         });
     }
@@ -1304,18 +1790,26 @@ class PraxisChartCanonicalContractMapperService {
         const combinedFilters = {
             ...filtersFromContract,
         };
+        const dimensions = contract.dimensions ?? [];
+        const dimensionConfigs = this.buildDimensionConfigs(dimensions);
         return {
             sourceKind: 'praxis.stats',
             statsOperation: contract.source.operation,
             granularity: contract.source.options?.granularity,
             fillGaps: contract.source.options?.fillGaps,
+            ...(contract.source.options?.timezone ? { timezone: contract.source.options.timezone } : {}),
+            ...(contract.source.options?.periodField ? { periodField: contract.source.options.periodField } : {}),
+            ...(contract.source.options?.periodPreset ? { periodPreset: contract.source.options.periodPreset } : {}),
             distributionMode: contract.source.options?.mode,
             bucketSize: contract.source.options?.bucketSize,
             bucketCount: contract.source.options?.bucketCount,
             statsOrderBy: this.mapStatsOrderBy(contract.source.options?.orderBy),
             statsPath: this.buildStatsPath(contract),
             statsRequest: this.buildStatsRequest(contract, combinedFilters),
-            dimensions: contract.dimensions?.map((dimension) => dimension.field),
+            dimensions: dimensions.length
+                ? dimensions.map((dimension) => this.resolveEffectiveDimensionField(dimension, dimensions))
+                : undefined,
+            ...(dimensionConfigs?.length ? { dimensionConfigs } : {}),
             metrics: contract.source.operation === 'comparison'
                 ? contract.metrics?.flatMap((metric) => ['current', 'previous'].map((period) => ({
                     field: this.comparisonMetricField(metric.field, period),
@@ -1338,6 +1832,7 @@ class PraxisChartCanonicalContractMapperService {
             selection: Boolean(contract.events?.selectionChange),
             drillDown: Boolean(contract.events?.drillDown),
             crossFilter: Boolean(contract.events?.crossFilter),
+            ...(contract.events?.quickView ? { quickView: structuredClone(contract.events.quickView) } : {}),
             eventActions: {
                 pointClick: contract.events?.pointClick,
                 selectionChange: contract.events?.selectionChange,
@@ -1362,7 +1857,7 @@ class PraxisChartCanonicalContractMapperService {
             tooltip: {
                 ...(variantTheme?.tooltip ?? {}),
                 enabled: this.resolveToggle(contract.tooltip, true),
-                trigger: this.isCategorySliceChart(contract.kind) || contract.kind === 'scatter' || contract.kind === 'gauge' ? 'item' : 'axis',
+                trigger: this.isCategorySliceChart(contract.kind) || contract.kind === 'scatter' || contract.kind === 'gauge' || contract.kind === 'heatmap' ? 'item' : 'axis',
             },
             surface,
             backgroundColor: surface?.background ?? variantTheme?.backgroundColor,
@@ -1491,6 +1986,7 @@ class PraxisChartCanonicalContractMapperService {
             case 'count':
             case 'distinct-count':
             case 'sum':
+            case 'avg-per-cycle-occurrence':
                 return aggregation;
             case undefined:
                 return undefined;
@@ -1523,15 +2019,24 @@ class PraxisChartCanonicalContractMapperService {
         const orderBy = this.mapStatsOrderByToBackend(contract.source.options?.orderBy);
         const requestMetrics = metrics.length > 1 ? metrics : undefined;
         switch (contract.source.operation) {
-            case 'group-by':
+            case 'group-by': {
+                const dimensionConfigs = this.buildDimensionConfigs(contract.dimensions ?? []);
+                const includeDimensions = (dimensionConfigs?.length ?? 0) > 1
+                    || Boolean(dimensionConfigs?.some((item) => (item.extraction && item.extraction !== 'NONE') || item.alias));
                 return {
                     filter: filters,
-                    field,
+                    field: (dimensionConfigs?.length ?? 0) > 1 ? undefined : field,
+                    ...(includeDimensions && dimensionConfigs ? { dimensions: dimensionConfigs } : {}),
                     metric,
                     metrics: requestMetrics,
+                    ...(contract.source.options?.timezone ? { timezone: contract.source.options.timezone } : {}),
+                    ...(contract.source.options?.periodField ? { periodField: contract.source.options.periodField } : {}),
+                    ...(contract.source.options?.periodPreset ? { periodPreset: contract.source.options.periodPreset } : {}),
+                    ...(contract.source.options?.fillGaps !== undefined ? { fillGaps: contract.source.options.fillGaps } : {}),
                     limit,
                     orderBy,
                 };
+            }
             case 'timeseries':
                 return {
                     filter: filters,
@@ -1584,24 +2089,66 @@ class PraxisChartCanonicalContractMapperService {
         if (!metric) {
             throw new Error('x-ui.chart requires metrics[0] to derive the canonical praxis.stats request.');
         }
-        const operation = this.mapStatsMetricOperation(metric.aggregation);
-        return {
-            operation,
-            field: operation === 'COUNT' ? undefined : metric.field,
-            alias: metric.field,
-        };
+        return this.toStatsMetricRequest(metric);
     }
     buildStatsMetricRequests(contract) {
         if (!contract.metrics?.length) {
             throw new Error('x-ui.chart requires at least one metric to derive the canonical praxis.stats request.');
         }
-        return contract.metrics.map((metric) => {
-            const operation = this.mapStatsMetricOperation(metric.aggregation);
+        return contract.metrics.map((metric) => this.toStatsMetricRequest(metric));
+    }
+    toStatsMetricRequest(metric) {
+        const operation = this.mapStatsMetricOperation(metric.aggregation);
+        const sourceField = metric.sourceField?.trim();
+        if (operation === 'COUNT') {
+            return {
+                operation,
+                field: undefined,
+                alias: metric.field,
+            };
+        }
+        if (operation === 'AVG_PER_CYCLE_OCCURRENCE') {
             return {
                 operation,
-                field: operation === 'COUNT' ? undefined : metric.field,
+                field: sourceField || undefined,
                 alias: metric.field,
             };
+        }
+        return {
+            operation,
+            field: sourceField || metric.field,
+            alias: metric.field,
+        };
+    }
+    resolveEffectiveDimensionField(dimension, allDimensions = [dimension]) {
+        const explicitAlias = dimension.alias?.trim();
+        if (explicitAlias) {
+            return explicitAlias;
+        }
+        const field = dimension.field.trim();
+        const extraction = dimension.extraction && dimension.extraction !== 'NONE' ? dimension.extraction : undefined;
+        if (!extraction) {
+            return field;
+        }
+        const sameFieldCount = allDimensions.filter((item) => item.field?.trim() === field).length;
+        return sameFieldCount > 1 ? `${field}_${extraction.toLowerCase()}` : field;
+    }
+    buildDimensionConfigs(dimensions) {
+        if (!dimensions.length) {
+            return undefined;
+        }
+        return dimensions.map((dimension) => {
+            const effectiveAlias = this.resolveEffectiveDimensionField(dimension, dimensions);
+            const extraction = dimension.extraction && dimension.extraction !== 'NONE' ? dimension.extraction : undefined;
+            return {
+                field: dimension.field.trim(),
+                ...(extraction ? { extraction } : {}),
+                ...(dimension.alias?.trim()
+                    ? { alias: dimension.alias.trim() }
+                    : effectiveAlias !== dimension.field.trim()
+                        ? { alias: effectiveAlias }
+                        : {}),
+            };
         });
     }
     mapStatsOrderBy(value) {
@@ -1672,6 +2219,8 @@ class PraxisChartCanonicalContractMapperService {
                 return 'MIN';
             case 'max':
                 return 'MAX';
+            case 'avg-per-cycle-occurrence':
+                return 'AVG_PER_CYCLE_OCCURRENCE';
             default:
                 throw new Error(`x-ui.chart aggregation "${aggregation}" is not supported in @praxisui/charts.`);
         }
@@ -1712,9 +2261,12 @@ class PraxisChartCanonicalContractMapperService {
             case 'min':
             case 'max':
             case 'distinct-count':
+            case 'avg-per-cycle-occurrence':
                 return lower;
             case 'distinct_count':
                 return 'distinct-count';
+            case 'avg_per_cycle_occurrence':
+                return 'avg-per-cycle-occurrence';
             default:
                 return undefined;
         }
@@ -1816,6 +2368,20 @@ class PraxisChartCanonicalContractMapperService {
                     mode: comparisonPeriod.mode ?? 'PREVIOUS_ALIGNED',
                 };
             }
+            if (operation === 'group-by') {
+                const timezone = query.timezone ?? query.statsRequest?.timezone;
+                if (typeof timezone === 'string' && timezone.trim()) {
+                    options.timezone = timezone.trim();
+                }
+                const groupByPeriodField = query.periodField ?? query.statsRequest?.periodField;
+                if (typeof groupByPeriodField === 'string' && groupByPeriodField.trim()) {
+                    options.periodField = groupByPeriodField.trim();
+                }
+                const periodPreset = query.periodPreset ?? query.statsRequest?.periodPreset;
+                if (typeof periodPreset === 'string' && periodPreset.trim()) {
+                    options.periodPreset = periodPreset.trim();
+                }
+            }
             return {
                 kind: 'praxis.stats',
                 resource,
@@ -1847,6 +2413,21 @@ class PraxisChartCanonicalContractMapperService {
             : (config.axes?.x?.type === 'value' ? 'value' : 'category');
         const label = this.toCanonicalTextValue(config.axes?.x?.label);
         const format = config.axes?.x?.labels?.format;
+        const dimensionConfigs = (remoteQuery?.dimensionConfigs
+            ?? remoteQuery?.statsRequest?.dimensions);
+        if (dimensionConfigs?.length) {
+            return dimensionConfigs.map((dimConfig, index) => ({
+                field: dimConfig.field,
+                ...(index === 0 && label !== undefined ? { label } : {}),
+                ...(index === 1 && config.axes?.y?.type === 'category' && config.axes?.y?.label !== undefined
+                    ? { label: this.toCanonicalTextValue(config.axes.y.label) }
+                    : {}),
+                role: index === 0 ? role : 'category',
+                ...(index === 0 && format ? { format } : {}),
+                ...(dimConfig.extraction ? { extraction: dimConfig.extraction } : {}),
+                ...(dimConfig.alias ? { alias: dimConfig.alias } : {}),
+            }));
+        }
         const primaryDimension = {
             field: primaryField,
             ...(label !== undefined ? { label } : {}),
@@ -1857,10 +2438,22 @@ class PraxisChartCanonicalContractMapperService {
             .slice(1)
             .map((f) => f.trim())
             .filter((f) => Boolean(f) && f !== primaryField);
+        const seriesSecondaryField = config.series?.[0]?.secondaryCategoryField?.trim()
+            || (config.axes?.y?.type === 'category' ? config.axes.y.field?.trim() : undefined);
+        if (!extraFields.length && seriesSecondaryField && seriesSecondaryField !== primaryField) {
+            extraFields.push(seriesSecondaryField);
+        }
         if (extraFields.length) {
+            const secondaryLabel = config.axes?.y?.type === 'category'
+                ? this.toCanonicalTextValue(config.axes.y.label)
+                : undefined;
             return [
                 primaryDimension,
-                ...extraFields.map((f) => ({ field: f, role: 'category' })),
+                ...extraFields.map((f, idx) => ({
+                    field: f,
+                    role: 'category',
+                    ...(idx === 0 && secondaryLabel !== undefined ? { label: secondaryLabel } : {}),
+                })),
             ];
         }
         return [primaryDimension];
@@ -1886,6 +2479,7 @@ class PraxisChartCanonicalContractMapperService {
                     ...(axis ? { axis } : {}),
                     ...(color ? { color } : {}),
                     ...(format ? { format } : {}),
+                    ...(s.quickView ? { quickView: structuredClone(s.quickView) } : {}),
                 };
             });
         }
@@ -1925,12 +2519,13 @@ class PraxisChartCanonicalContractMapperService {
         return undefined;
     }
     extractCanonicalEvents(config) {
-        if (config.interactions?.eventActions) {
+        if (config.interactions?.eventActions || config.interactions?.quickView) {
             return {
-                pointClick: config.interactions.eventActions.pointClick,
-                selectionChange: config.interactions.eventActions.selectionChange,
-                drillDown: config.interactions.eventActions.drillDown,
-                crossFilter: config.interactions.eventActions.crossFilter,
+                pointClick: config.interactions?.eventActions?.pointClick,
+                selectionChange: config.interactions?.eventActions?.selectionChange,
+                drillDown: config.interactions?.eventActions?.drillDown,
+                crossFilter: config.interactions?.eventActions?.crossFilter,
+                ...(config.interactions?.quickView ? { quickView: structuredClone(config.interactions.quickView) } : {}),
             };
         }
         if (config.interactions?.crossFilter) {
@@ -2043,6 +2638,12 @@ class PraxisChartStatsApiService {
             };
             statsRequest = this.synthesizeStatsRequest(effectiveQuery, statsType);
         }
+        if (statsRequest && statsRequest.filter == null) {
+            statsRequest = {
+                ...statsRequest,
+                filter: query?.filters ?? {},
+            };
+        }
         if (!statsPath || !statsRequest) {
             return throwError(() => new Error('PraxisChartStatsApiService requires query.statsPath (or resourceKey) and query.statsRequest (or field) for praxis.stats execution.'));
         }
@@ -2094,11 +2695,17 @@ class PraxisChartStatsApiService {
             }
             case 'group-by':
             default: {
+                const dimensionConfigs = query.dimensionConfigs;
                 return {
                     filter,
-                    field,
+                    field: (dimensionConfigs?.length ?? 0) > 1 ? undefined : field,
+                    ...(dimensionConfigs?.length ? { dimensions: dimensionConfigs } : {}),
                     metric,
                     ...(query.metrics?.length ? { metrics: this.normalizeMetricRequests(query.metrics) } : {}),
+                    ...(query.timezone ? { timezone: query.timezone } : {}),
+                    ...(query.periodField ? { periodField: query.periodField } : {}),
+                    ...(query.periodPreset ? { periodPreset: query.periodPreset } : {}),
+                    ...(query.fillGaps !== undefined ? { fillGaps: query.fillGaps } : {}),
                     ...(query.limit !== undefined ? { limit: query.limit } : {}),
                     ...(query.statsOrderBy ? { orderBy: this.normalizeOrderBy(query.statsOrderBy) } : {}),
                 };
@@ -2110,7 +2717,14 @@ class PraxisChartStatsApiService {
             return { operation: 'COUNT' };
         }
         if (typeof metric === 'string') {
-            return { operation: metric.toUpperCase() };
+            const normalized = metric.toLowerCase();
+            return {
+                operation: (normalized === 'distinct-count'
+                    ? 'DISTINCT_COUNT'
+                    : normalized === 'avg-per-cycle-occurrence'
+                        ? 'AVG_PER_CYCLE_OCCURRENCE'
+                        : metric.toUpperCase()),
+            };
         }
         if ('operation' in metric && metric.operation) {
             const op = metric.operation.toUpperCase();
@@ -2124,14 +2738,22 @@ class PraxisChartStatsApiService {
             return result;
         }
         if ('aggregation' in metric && metric.aggregation) {
-            const op = (metric.aggregation === 'distinct-count' ? 'DISTINCT_COUNT' : metric.aggregation.toUpperCase());
+            const op = (metric.aggregation === 'distinct-count'
+                ? 'DISTINCT_COUNT'
+                : metric.aggregation === 'avg-per-cycle-occurrence'
+                    ? 'AVG_PER_CYCLE_OCCURRENCE'
+                    : metric.aggregation.toUpperCase());
             const result = {
                 operation: op,
             };
-            if (metric.field && op !== 'COUNT')
+            if (metric.field && op !== 'COUNT' && op !== 'AVG_PER_CYCLE_OCCURRENCE')
                 result.field = metric.field;
-            if (metric.alias)
+            if (metric.alias) {
                 result.alias = metric.alias;
+            }
+            else if (metric.field && (op === 'COUNT' || op === 'AVG_PER_CYCLE_OCCURRENCE')) {
+                result.alias = metric.field;
+            }
             return result;
         }
         const result = { operation: 'COUNT' };
@@ -2222,13 +2844,62 @@ class PraxisChartStatsApiService {
             });
         }
         if ('buckets' in response) {
+            const primaryCoordAlias = this.resolveDimensionCoordinateAlias(0, request, response, categoryField);
+            const secondaryCategoryField = this.resolveSecondaryCategoryField(config, request, response);
+            const secondaryCoordAlias = this.resolveDimensionCoordinateAlias(1, request, response, secondaryCategoryField);
             return response.buckets.map((bucket) => {
-                const category = this.resolveBucketCategory(bucket, categoryField, config);
+                const isMultiDimBucket = Boolean(secondaryCategoryField
+                    && ((bucket.keys && bucket.keys.length > 1)
+                        || (bucket.labels && bucket.labels.length > 1)
+                        || (bucket.coordinates && Object.keys(bucket.coordinates).length > 1)));
+                const primaryKey = isMultiDimBucket
+                    ? (bucket.keys && bucket.keys.length > 0
+                        ? bucket.keys[0]
+                        : (primaryCoordAlias && bucket.coordinates && primaryCoordAlias in bucket.coordinates
+                            ? bucket.coordinates[primaryCoordAlias]
+                            : (bucket.key ?? null)))
+                    : (bucket.key !== undefined
+                        ? bucket.key
+                        : (bucket.keys && bucket.keys.length > 0 ? bucket.keys[0] : null));
+                const primaryLabelRaw = isMultiDimBucket
+                    ? (bucket.labels && bucket.labels.length > 0
+                        ? bucket.labels[0]
+                        : (primaryKey !== null && primaryKey !== undefined ? String(primaryKey) : (bucket.label ?? null)))
+                    : (bucket.label !== undefined
+                        ? bucket.label
+                        : (bucket.labels && bucket.labels.length > 0 ? bucket.labels[0] : null));
+                const category = this.resolveBucketCategory({ key: primaryKey, label: primaryLabelRaw, from: bucket.from, to: bucket.to }, categoryField, config);
+                if (isMultiDimBucket && secondaryCategoryField) {
+                    const secondaryKey = bucket.keys && bucket.keys.length > 1
+                        ? bucket.keys[1]
+                        : (secondaryCoordAlias && bucket.coordinates ? bucket.coordinates[secondaryCoordAlias] : null);
+                    const secondaryLabelRaw = bucket.labels && bucket.labels.length > 1
+                        ? bucket.labels[1]
+                        : (secondaryKey !== null && secondaryKey !== undefined ? String(secondaryKey) : null);
+                    const secondaryCategory = this.resolveBucketCategory({ key: secondaryKey, label: secondaryLabelRaw }, secondaryCategoryField, config);
+                    return {
+                        [categoryField]: category,
+                        [secondaryCategoryField]: secondaryCategory,
+                        ...this.projectMetricValues(metricBindings, bucket.values, bucket.value, bucket.count),
+                        key: primaryKey ?? null,
+                        label: this.isNullishBucketToken(primaryLabelRaw) ? category : String(primaryLabelRaw),
+                        secondaryKey: secondaryKey ?? null,
+                        secondaryLabel: this.isNullishBucketToken(secondaryLabelRaw) ? secondaryCategory : String(secondaryLabelRaw),
+                        compositeKey: bucket.key ?? null,
+                        coordinates: bucket.coordinates ?? null,
+                        value: bucket.value ?? null,
+                        count: bucket.count ?? null,
+                        from: bucket.from ?? null,
+                        to: bucket.to ?? null,
+                        mode: 'mode' in response ? response.mode ?? null : null,
+                        requestMode: 'mode' in request ? request.mode : null,
+                    };
+                }
                 return {
                     [categoryField]: category,
                     ...this.projectMetricValues(metricBindings, bucket.values, bucket.value, bucket.count),
-                    key: bucket.key ?? null,
-                    label: this.isNullishBucketToken(bucket.label) ? category : String(bucket.label),
+                    key: primaryKey ?? null,
+                    label: this.isNullishBucketToken(primaryLabelRaw) ? category : String(primaryLabelRaw),
                     value: bucket.value ?? null,
                     count: bucket.count ?? null,
                     from: bucket.from ?? null,
@@ -2326,11 +2997,60 @@ class PraxisChartStatsApiService {
     }
     resolveCategoryField(config, request) {
         const firstSeries = config.series[0];
+        const firstRequestDim = 'dimensions' in request && request.dimensions?.[0]
+            ? this.resolveEffectiveStatsDimensionField(request.dimensions[0], request.dimensions)
+            : undefined;
         return (firstSeries?.categoryField
             || config.axes?.x?.field
+            || firstRequestDim
             || request.field
             || 'category');
     }
+    resolveSecondaryCategoryField(config, request, response) {
+        const seriesSecondary = config.series[0]?.secondaryCategoryField?.trim();
+        if (seriesSecondary) {
+            return seriesSecondary;
+        }
+        const querySecondDim = config.dataSource?.kind === 'remote'
+            ? config.dataSource.query?.dimensions?.[1]?.trim()
+            : undefined;
+        if (querySecondDim) {
+            return querySecondDim;
+        }
+        if ('dimensions' in request && request.dimensions?.[1]) {
+            return this.resolveEffectiveStatsDimensionField(request.dimensions[1], request.dimensions);
+        }
+        if ('dimensions' in response && response.dimensions?.[1]) {
+            return this.resolveEffectiveStatsDimensionField(response.dimensions[1], response.dimensions);
+        }
+        return undefined;
+    }
+    resolveEffectiveStatsDimensionField(dim, allDims) {
+        if (dim.alias?.trim()) {
+            return dim.alias.trim();
+        }
+        const field = dim.field.trim();
+        const extraction = dim.extraction?.trim();
+        const duplicateCount = allDims.filter((candidate) => candidate.field.trim() === field).length;
+        if (duplicateCount > 1 && extraction && extraction !== 'NONE') {
+            return `${field}_${extraction.toLowerCase()}`;
+        }
+        return field;
+    }
+    resolveDimensionCoordinateAlias(index, request, response, fallback) {
+        const dim = ('dimensions' in response && response.dimensions?.[index])
+            || ('dimensions' in request && request.dimensions?.[index]);
+        if (!dim) {
+            return fallback;
+        }
+        if (dim.alias?.trim()) {
+            return dim.alias.trim();
+        }
+        if (dim.extraction && dim.extraction !== 'NONE') {
+            return `${dim.field.trim()}_${dim.extraction.toLowerCase()}`;
+        }
+        return dim.field.trim();
+    }
     resolveMetricBindings(config, request, response) {
         const queryMetrics = config.dataSource?.kind === 'remote'
             ? (config.dataSource.query?.metrics ?? [])
@@ -2365,7 +3085,19 @@ class PraxisChartStatsApiService {
     }
     projectMetricValues(bindings, values, primaryValue, count) {
         return bindings.reduce((acc, binding, index) => {
-            const rawValue = values?.[binding.alias];
+            const hasExplicitAliasValue = Boolean(values && Object.prototype.hasOwnProperty.call(values, binding.alias));
+            const rawValue = hasExplicitAliasValue ? values[binding.alias] : undefined;
+            if (hasExplicitAliasValue && rawValue === null) {
+                acc[binding.field] = null;
+                return acc;
+            }
+            if (!hasExplicitAliasValue
+                && index === 0
+                && primaryValue === null
+                && (count === null || count === undefined || count === 0)) {
+                acc[binding.field] = null;
+                return acc;
+            }
             acc[binding.field] = index === 0
                 ? this.resolveMetricValue(rawValue ?? primaryValue, count)
                 : this.resolveMetricValue(rawValue, null);
@@ -2467,7 +3199,9 @@ class PraxisChartComponent {
     ngZone = inject(NgZone);
     componentMetadataRegistry = inject(ComponentMetadataRegistry);
     settingsPanel = inject(SETTINGS_PANEL_BRIDGE, { optional: true });
+    quickView = inject(ResourceQuickViewService, { optional: true });
     destroyRef = inject(DestroyRef);
+    activeQuickViewAnchor = null;
     resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "resizeObserver" }] : /* istanbul ignore next */ []));
     resizeObserverHost = null;
     shellObserver = signal(null, ...(ngDevMode ? [{ debugName: "shellObserver" }] : /* istanbul ignore next */ []));
@@ -2787,8 +3521,14 @@ class PraxisChartComponent {
         || this.t('praxis.charts.runtime.accessibility.dataTitle', 'Chart data'), ...(ngDevMode ? [{ debugName: "accessibleDataTitle" }] : /* istanbul ignore next */ []));
     accessibleDataDescription = computed(() => this.i18n.resolve(this.renderConfig().subtitle)
         || this.t('praxis.charts.runtime.accessibility.dataDescription', 'Structured alternative for the values represented in the chart.'), ...(ngDevMode ? [{ debugName: "accessibleDataDescription" }] : /* istanbul ignore next */ []));
-    accessibleCategoryHeading = computed(() => this.t('praxis.charts.runtime.accessibility.category', 'Category'), ...(ngDevMode ? [{ debugName: "accessibleCategoryHeading" }] : /* istanbul ignore next */ []));
-    accessibleSeriesHeading = computed(() => this.t('praxis.charts.runtime.accessibility.series', 'Series'), ...(ngDevMode ? [{ debugName: "accessibleSeriesHeading" }] : /* istanbul ignore next */ []));
+    accessibleCategoryHeading = computed(() => (this.renderConfig().type === 'heatmap'
+        ? this.i18n.resolve(this.renderConfig().axes?.x?.label).trim()
+        : '')
+        || this.t('praxis.charts.runtime.accessibility.category', 'Category'), ...(ngDevMode ? [{ debugName: "accessibleCategoryHeading" }] : /* istanbul ignore next */ []));
+    accessibleSeriesHeading = computed(() => (this.renderConfig().type === 'heatmap'
+        ? this.i18n.resolve(this.renderConfig().axes?.y?.label).trim()
+        : '')
+        || this.t('praxis.charts.runtime.accessibility.series', 'Series'), ...(ngDevMode ? [{ debugName: "accessibleSeriesHeading" }] : /* istanbul ignore next */ []));
     accessibleValueHeading = computed(() => this.t('praxis.charts.runtime.accessibility.value', 'Value'), ...(ngDevMode ? [{ debugName: "accessibleValueHeading" }] : /* istanbul ignore next */ []));
     widgetShellActions = computed(() => {
         if (this.loadState() !== 'ready' || !this.accessiblePoints().length) {
@@ -2878,12 +3618,16 @@ class PraxisChartComponent {
             }
             this.previousSelectionScopeSignature = signature;
             this.activeSelectionSignature.set(null);
+            this.dismissActiveQuickView('anchor-invalid');
         });
         effect(() => {
             const nextState = this.loadState();
             if (nextState !== 'ready' || !this.accessiblePoints().length) {
                 this.showAccessibleData.set(false);
             }
+            if (nextState !== 'ready') {
+                this.dismissActiveQuickView('anchor-invalid');
+            }
             if (this.currentLoadState() !== nextState) {
                 this.currentLoadState.set(nextState);
                 this.loadStateChange.emit(nextState);
@@ -2973,9 +3717,12 @@ class PraxisChartComponent {
                 config: this.renderConfig(),
                 data: this.resolvedData(),
                 onPointClick: (event) => this.ngZone.run(() => this.handlePointClick(event)),
+                onPointHoverEnter: (event) => this.ngZone.run(() => this.handlePointHoverEnter(host, event)),
+                onPointHoverLeave: () => this.ngZone.run(() => this.handlePointHoverLeave()),
             });
             if (this.pendingResizeOnReady) {
                 this.pendingResizeOnReady = false;
+                this.dismissActiveQuickView('anchor-invalid');
                 this.engine.resize();
             }
             if (!untracked(() => this.hasRenderedOnce())) {
@@ -2983,6 +3730,7 @@ class PraxisChartComponent {
             }
         });
         this.destroyRef.onDestroy(() => {
+            this.dismissActiveQuickView('anchor-invalid');
             this.clearEditorSessionSubscriptions();
             this.cancelRemoteDataRequest();
             this.destroyResizeObserver();
@@ -3296,8 +4044,67 @@ class PraxisChartComponent {
         this.renderAttempt.update((value) => value + 1);
     }
     toggleAccessibleData() {
+        this.dismissActiveQuickView('anchor-invalid');
         this.showAccessibleData.update((visible) => !visible);
     }
+    accessiblePointQuickViewBinding(point) {
+        return resolveChartPointQuickView(this.renderConfig(), point)?.binding ?? null;
+    }
+    accessiblePointQuickViewRecord(point) {
+        return resolveChartPointQuickView(this.renderConfig(), point)?.record ?? null;
+    }
+    handleShellKeydown(event) {
+        if (event.key !== 'Escape' || !this.activeQuickViewAnchor || !this.quickView) {
+            return;
+        }
+        if (this.quickView.state !== 'idle'
+            && this.quickView.state !== 'dismissed') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.dismissActiveQuickView('escape');
+        }
+    }
+    handlePointHoverEnter(host, event) {
+        if (!this.quickView || this.showAccessibleData() || this.loadState() !== 'ready') {
+            return;
+        }
+        const resolved = resolveChartPointQuickView(this.renderConfig(), event);
+        if (!resolved) {
+            this.handlePointHoverLeave();
+            return;
+        }
+        const anchor = {
+            kind: 'virtual-rect',
+            anchorKey: event.anchorKey,
+            hostElement: host,
+            focusOrigin: host,
+            getViewportRect: () => event.getViewportRect(),
+            isValid: () => !this.destroyRef.destroyed
+                && this.loadState() === 'ready'
+                && !this.showAccessibleData()
+                && host.isConnected,
+        };
+        this.activeQuickViewAnchor = anchor;
+        this.quickView.openFromHover({
+            binding: resolved.binding,
+            sourceRecord: resolved.record,
+            anchor,
+            trigger: 'hover',
+        });
+    }
+    handlePointHoverLeave() {
+        if (this.activeQuickViewAnchor && this.quickView) {
+            this.quickView.notifyTriggerLeave(this.activeQuickViewAnchor);
+        }
+    }
+    dismissActiveQuickView(reason) {
+        if (!this.activeQuickViewAnchor || !this.quickView) {
+            this.activeQuickViewAnchor = null;
+            return;
+        }
+        this.quickView.dismissIfAnchoredTo(this.activeQuickViewAnchor, reason);
+        this.activeQuickViewAnchor = null;
+    }
     setWidgetShellActionHostActive(active) {
         this.widgetShellActionHostActive.set(active);
     }
@@ -3411,6 +4218,29 @@ class PraxisChartComponent {
     buildEventFilters(config, event, mapping) {
         const sourceValues = this.extractPointSourceValues(config, event);
         if (!mapping || !Object.keys(mapping).length) {
+            const categoryField = config.axes?.x?.field
+                ?? config.series.find((series) => series.categoryField)?.categoryField;
+            const secondaryCategoryField = config.series.find((series) => series.secondaryCategoryField)?.secondaryCategoryField
+                ?? (config.axes?.y?.type === 'category' ? config.axes.y.field : undefined);
+            const dimensionFields = new Set([categoryField, secondaryCategoryField].filter((field) => Boolean(field)));
+            const isCanonicalStats = config.dataSource?.kind === 'remote'
+                && config.dataSource.query?.sourceKind === 'praxis.stats';
+            const syntheticStatsKeys = new Set([
+                'key',
+                'label',
+                'secondaryKey',
+                'secondaryLabel',
+                'compositeKey',
+                'coordinates',
+                'count',
+                'from',
+                'to',
+                'mode',
+                'requestMode',
+                'start',
+                'end',
+                'granularity',
+            ]);
             const metricFields = new Set();
             for (const series of config.series) {
                 if (series.metric?.field) {
@@ -3425,8 +4255,31 @@ class PraxisChartComponent {
             }
             const defaultFilters = {};
             for (const [key, value] of Object.entries(sourceValues)) {
-                if (!metricFields.has(key)) {
-                    defaultFilters[key] = value;
+                if (metricFields.has(key)) {
+                    continue;
+                }
+                if (key === 'value' && !dimensionFields.has('value')) {
+                    continue;
+                }
+                if (key === 'secondaryCategory' && !dimensionFields.has('secondaryCategory')) {
+                    continue;
+                }
+                if (key === 'category' && categoryField && !dimensionFields.has('category')) {
+                    continue;
+                }
+                if (isCanonicalStats && syntheticStatsKeys.has(key) && !dimensionFields.has(key)) {
+                    continue;
+                }
+                defaultFilters[key] = value;
+            }
+            if (isCanonicalStats) {
+                if (categoryField && sourceValues['key'] !== undefined && sourceValues['key'] !== null) {
+                    defaultFilters[categoryField] = sourceValues['key'];
+                }
+                if (secondaryCategoryField
+                    && sourceValues['secondaryKey'] !== undefined
+                    && sourceValues['secondaryKey'] !== null) {
+                    defaultFilters[secondaryCategoryField] = sourceValues['secondaryKey'];
                 }
             }
             return defaultFilters;
@@ -3452,6 +4305,13 @@ class PraxisChartComponent {
         if (categoryField && values[categoryField] === undefined && event.category !== undefined) {
             values[categoryField] = event.category;
         }
+        const secondaryCategoryField = config.series.find((series) => series.secondaryCategoryField)?.secondaryCategoryField
+            ?? (config.axes?.y?.type === 'category' ? config.axes.y.field : undefined);
+        if (secondaryCategoryField
+            && values[secondaryCategoryField] === undefined
+            && values['secondaryCategory'] !== undefined) {
+            values[secondaryCategoryField] = values['secondaryCategory'];
+        }
         const series = config.series.find((candidate) => candidate.id === event.seriesId)
             ?? config.series.find((candidate) => candidate.name === event.seriesName)
             ?? config.series[0];
@@ -3698,6 +4558,7 @@ class PraxisChartComponent {
         }
         if (typeof requestAnimationFrame !== 'function') {
             this.pendingResizeOnReady = false;
+            this.dismissActiveQuickView('anchor-invalid');
             this.engine.resize();
             return;
         }
@@ -3713,6 +4574,7 @@ class PraxisChartComponent {
                 return;
             }
             this.pendingResizeOnReady = false;
+            this.dismissActiveQuickView('anchor-invalid');
             this.engine.resize();
         });
     }
@@ -3759,6 +4621,7 @@ class PraxisChartComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, resourceKey: { classPropertyName: "resourceKey", publicName: "resourceKey", isSignal: true, isRequired: false, 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", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved", chartDocumentPatchChange: "chartDocumentPatchChange" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()", "style.height": "resolvedHeight()", "style.min-height": "resolvedHostMinHeight()", "style.max-height": "resolvedMaxHeight()", "style.aspect-ratio": "resolvedAspectRatio()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section
       class="praxis-chart-shell"
+      (keydown)="handleShellKeydown($event)"
       [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
       [class.praxis-chart-shell-contained]="surfaceMode() === 'contained'"
       [class.praxis-chart-shell-embedded]="surfaceMode() === 'embedded'"
@@ -3929,6 +4792,8 @@ class PraxisChartComponent {
                         class="praxis-chart-point-action"
                         [attr.aria-label]="accessiblePointActionLabel(point)"
                         [attr.aria-pressed]="accessiblePointPressed(point)"
+                        [praxisQuickView]="accessiblePointQuickViewBinding(point)"
+                        [praxisQuickViewRecord]="accessiblePointQuickViewRecord(point)"
                         (click)="activateAccessiblePoint(point)"
                       >
                         {{ point.categoryLabel }}
@@ -3954,7 +4819,7 @@ class PraxisChartComponent {
         ></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}: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{box-sizing:border-box;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,.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-host--refreshing{opacity:.36;pointer-events:none;transition:opacity .18s ease}.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-loading--overlay{position:absolute;inset:0;z-index:3;background:color-mix(in srgb,var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) ) 72%,transparent)}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.praxis-chart-host--refreshing{transition:none}.praxis-chart-loading-chip,.praxis-chart-loading-bar{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}: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{box-sizing:border-box;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,.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-host--refreshing{opacity:.36;pointer-events:none;transition:opacity .18s ease}.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-loading--overlay{position:absolute;inset:0;z-index:3;background:color-mix(in srgb,var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) ) 72%,transparent)}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-state-loading .praxis-chart-state-title,.praxis-chart-state-loading .praxis-chart-state-description{background-image:var( --pdx-text-shimmer-gradient, linear-gradient( 105deg, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 0%, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 28%, var(--md-sys-color-primary, #1263b4) 44%, var(--md-sys-color-tertiary, #7c3aed) 56%, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 100% ) );background-size:260% 100%;background-position:200% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:praxis-chart-text-shimmer var(--pdx-text-shimmer-duration, 2.4s) linear infinite}@keyframes praxis-chart-text-shimmer{0%{background-position:200% 50%}to{background-position:-60% 50%}}.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}}@media(prefers-reduced-motion:reduce),(forced-colors:active),print{.praxis-chart-host--refreshing{transition:none}.praxis-chart-loading-chip,.praxis-chart-loading-bar{animation:none}.praxis-chart-state-loading .praxis-chart-state-title,.praxis-chart-state-loading .praxis-chart-state-description{animation:none;background-image:none;color:var( --pdx-text-shimmer-fallback-color, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20)) );-webkit-text-fill-color:currentColor}}@media(forced-colors:active){.praxis-chart-state-loading .praxis-chart-state-title,.praxis-chart-state-loading .praxis-chart-state-description{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "directive", type: PraxisQuickViewTriggerDirective, selector: "[praxisQuickView]", inputs: ["praxisQuickView", "praxisQuickViewRecord", "praxisQuickViewTriggerMode", "praxisQuickViewAnchorId", "praxisQuickViewSourceId", "praxisQuickViewEndpointKey", "praxisQuickViewApiUrlEntry", "praxisQuickViewQueryContext", "praxisQuickViewHoverOpenDelayMs", "praxisQuickViewHoverCloseDelayMs", "praxisQuickViewStopPropagation"], exportAs: ["praxisQuickView"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
@@ -3964,9 +4829,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         '[style.min-height]': 'resolvedHostMinHeight()',
                         '[style.max-height]': 'resolvedMaxHeight()',
                         '[style.aspect-ratio]': 'resolvedAspectRatio()',
-                    }, imports: [MatTooltipModule, PraxisIconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+                    }, imports: [MatTooltipModule, PraxisIconButtonComponent, PraxisQuickViewTriggerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <section
       class="praxis-chart-shell"
+      (keydown)="handleShellKeydown($event)"
       [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
       [class.praxis-chart-shell-contained]="surfaceMode() === 'contained'"
       [class.praxis-chart-shell-embedded]="surfaceMode() === 'embedded'"
@@ -4137,6 +5003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         class="praxis-chart-point-action"
                         [attr.aria-label]="accessiblePointActionLabel(point)"
                         [attr.aria-pressed]="accessiblePointPressed(point)"
+                        [praxisQuickView]="accessiblePointQuickViewBinding(point)"
+                        [praxisQuickViewRecord]="accessiblePointQuickViewRecord(point)"
                         (click)="activateAccessiblePoint(point)"
                       >
                         {{ point.categoryLabel }}
@@ -4162,7 +5030,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></div>
       }
     </section>
-  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}: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{box-sizing:border-box;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,.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-host--refreshing{opacity:.36;pointer-events:none;transition:opacity .18s ease}.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-loading--overlay{position:absolute;inset:0;z-index:3;background:color-mix(in srgb,var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) ) 72%,transparent)}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.praxis-chart-host--refreshing{transition:none}.praxis-chart-loading-chip,.praxis-chart-loading-bar{animation:none}}\n"] }]
+  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}: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{box-sizing:border-box;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,.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-host--refreshing{opacity:.36;pointer-events:none;transition:opacity .18s ease}.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-loading--overlay{position:absolute;inset:0;z-index:3;background:color-mix(in srgb,var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) ) 72%,transparent)}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-state-loading .praxis-chart-state-title,.praxis-chart-state-loading .praxis-chart-state-description{background-image:var( --pdx-text-shimmer-gradient, linear-gradient( 105deg, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 0%, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 28%, var(--md-sys-color-primary, #1263b4) 44%, var(--md-sys-color-tertiary, #7c3aed) 56%, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 100% ) );background-size:260% 100%;background-position:200% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:praxis-chart-text-shimmer var(--pdx-text-shimmer-duration, 2.4s) linear infinite}@keyframes praxis-chart-text-shimmer{0%{background-position:200% 50%}to{background-position:-60% 50%}}.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}}@media(prefers-reduced-motion:reduce),(forced-colors:active),print{.praxis-chart-host--refreshing{transition:none}.praxis-chart-loading-chip,.praxis-chart-loading-bar{animation:none}.praxis-chart-state-loading .praxis-chart-state-title,.praxis-chart-state-loading .praxis-chart-state-description{animation:none;background-image:none;color:var( --pdx-text-shimmer-fallback-color, var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20)) );-webkit-text-fill-color:currentColor}}@media(forced-colors:active){.praxis-chart-state-loading .praxis-chart-state-title,.praxis-chart-state-loading .praxis-chart-state-description{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], resourceKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceKey", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartDocumentPatchChange: [{ type: i0.Output, args: ["chartDocumentPatchChange"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
@@ -4244,6 +5112,24 @@ function buildAccessibleChartPoints(config, transformed, formatValue, pointFallb
             seriesFallback,
         }));
     }
+    if (transformed.mode === 'heatmap' && transformed.heatmap) {
+        const heatmap = transformed.heatmap;
+        return heatmap.cells
+            .filter((cell) => cell.rawValue !== null && cell.rawValue !== undefined)
+            .map((cell, index) => createAccessiblePoint({
+            id: cell.id,
+            config,
+            seriesId: heatmap.id,
+            seriesName: `${cell.yCategory} (${heatmap.name})`,
+            category: cell.xCategory,
+            value: cell.rawValue,
+            data: cell.data,
+            index,
+            formatValue,
+            pointFallback,
+            seriesFallback,
+        }));
+    }
     return transformed.series.flatMap((series) => series.points.flatMap((point, index) => {
         const value = accessiblePointValue(point);
         if (value === null || value === undefined) {
@@ -4291,7 +5177,7 @@ function createAccessiblePoint(options) {
 }
 function accessiblePointValue(point) {
     if (Array.isArray(point)) {
-        return point.length > 1 ? point[1] : point[0];
+        return point.length > 1 ? point[point.length - 1] : point[0];
     }
     if (point && typeof point === 'object' && 'value' in point) {
         return accessiblePointValue(point['value']);
@@ -5915,7 +6801,8 @@ class AnalyticsChartConfigAdapterService {
     toPraxisChartConfig(projection, options) {
         const chartType = this.resolveChartType(projection);
         const orientation = chartType === 'horizontal-bar' ? 'horizontal' : undefined;
-        const dimension = projection.bindings.primaryDimension;
+        const dimensions = this.statsBuilder.resolveDimensionBindings(projection);
+        const dimension = dimensions[0];
         const metrics = projection.bindings.primaryMetrics ?? [];
         if (!dimension?.field) {
             throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension for projection "${projection.id}".`);
@@ -5924,10 +6811,23 @@ class AnalyticsChartConfigAdapterService {
             throw new Error(`AnalyticsChartConfigAdapterService requires at least one metric for projection "${projection.id}".`);
         }
         const crossFilter = Boolean(projection.interactions?.crossFilter);
+        const pointSelection = Boolean(projection.interactions?.pointSelection);
+        const drillDown = Boolean(projection.interactions?.drillDown);
         const keyFilterField = dimension.keyFilterField?.trim();
+        const secondaryKeyFilterField = dimensions[1]?.keyFilterField?.trim();
         if (crossFilter && !keyFilterField) {
             throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension.keyFilterField when crossFilter is enabled for projection "${projection.id}".`);
         }
+        if (crossFilter && dimensions[1] && dimensions[1].keyFilterField !== undefined && !secondaryKeyFilterField) {
+            throw new Error(`AnalyticsChartConfigAdapterService requires secondaryDimension.keyFilterField to be non-empty when crossFilter is enabled for projection "${projection.id}".`);
+        }
+        const keyFilterMapping = keyFilterField
+            ? {
+                key: keyFilterField,
+                ...(secondaryKeyFilterField ? { secondaryKey: secondaryKeyFilterField } : {}),
+            }
+            : undefined;
+        const hasMappedEventActions = Boolean(keyFilterMapping && (crossFilter || pointSelection || drillDown));
         return {
             id: projection.id,
             type: chartType,
@@ -5940,17 +6840,37 @@ class AnalyticsChartConfigAdapterService {
             series: this.buildSeries(projection, chartType),
             dataSource: this.buildDataSource(projection),
             interactions: {
-                pointClick: Boolean(projection.interactions?.pointSelection || projection.interactions?.drillDown),
-                drillDown: Boolean(projection.interactions?.drillDown),
-                selection: Boolean(projection.interactions?.pointSelection),
+                pointClick: Boolean(pointSelection || drillDown),
+                drillDown,
+                selection: pointSelection,
                 crossFilter,
-                ...(crossFilter
+                ...(hasMappedEventActions
                     ? {
                         eventActions: {
-                            crossFilter: {
-                                action: 'emit',
-                                mapping: { key: keyFilterField },
-                            },
+                            ...(crossFilter
+                                ? {
+                                    crossFilter: {
+                                        action: 'emit',
+                                        mapping: { ...keyFilterMapping },
+                                    },
+                                }
+                                : {}),
+                            ...(pointSelection
+                                ? {
+                                    selectionChange: {
+                                        action: 'emit',
+                                        mapping: { ...keyFilterMapping },
+                                    },
+                                }
+                                : {}),
+                            ...(drillDown
+                                ? {
+                                    drillDown: {
+                                        action: 'emit',
+                                        mapping: { ...keyFilterMapping },
+                                    },
+                                }
+                                : {}),
                         },
                     }
                     : {}),
@@ -5958,20 +6878,40 @@ class AnalyticsChartConfigAdapterService {
         };
     }
     buildAxes(projection, chartType) {
-        const dimension = projection.bindings.primaryDimension;
+        const dimensions = this.statsBuilder.resolveDimensionBindings(projection);
+        const dimension = dimensions[0];
+        const secondaryDimension = dimensions[1];
+        const primaryField = this.statsBuilder.resolveEffectiveDimensionField(dimension, dimensions);
+        const secondaryField = secondaryDimension
+            ? this.statsBuilder.resolveEffectiveDimensionField(secondaryDimension, dimensions)
+            : undefined;
         const metrics = this.getDisplayMetrics(projection);
         const firstMetric = metrics[0];
         if (this.isCategorySliceChart(chartType)) {
             return {
                 x: {
-                    field: dimension.field,
+                    field: primaryField,
                     label: dimension.label ?? undefined,
                 },
             };
         }
+        if (chartType === 'heatmap') {
+            return {
+                x: {
+                    field: primaryField,
+                    label: dimension.label ?? undefined,
+                    type: 'category',
+                },
+                y: {
+                    field: secondaryField,
+                    label: secondaryDimension?.label ?? undefined,
+                    type: 'category',
+                },
+            };
+        }
         return {
             x: {
-                field: dimension.field,
+                field: primaryField,
                 label: dimension.label ?? undefined,
                 type: dimension.role === 'time' ? 'time' : 'category',
             },
@@ -5984,31 +6924,42 @@ class AnalyticsChartConfigAdapterService {
         };
     }
     buildSeries(projection, chartType) {
-        const dimension = projection.bindings.primaryDimension;
+        const dimensions = this.statsBuilder.resolveDimensionBindings(projection);
+        const dimension = dimensions[0];
+        const secondaryDimension = dimensions[1];
+        const primaryField = this.statsBuilder.resolveEffectiveDimensionField(dimension, dimensions);
+        const secondaryField = secondaryDimension
+            ? this.statsBuilder.resolveEffectiveDimensionField(secondaryDimension, dimensions)
+            : undefined;
         const comparison = projection.source.operation === 'comparison';
         return this.getDisplayMetrics(projection).flatMap((metric, index) => comparison
             ? ['current', 'previous'].map((period) => ({
                 id: `${projection.id}.${metric.field}.${period}`,
                 name: `${metric.label ?? metric.field} (${this.comparisonPeriodLabel(period)})`,
                 type: chartType,
-                categoryField: dimension.field,
+                categoryField: primaryField,
                 metric: { field: this.comparisonMetricField(metric.field, period), aggregation: this.mapAggregation(metric.aggregation) },
             }))
             : [{
                     id: `${projection.id}.${metric.field}.${index + 1}`,
                     name: metric.label ?? metric.field,
-                    type: chartType,
-                    categoryField: this.isCategorySliceChart(chartType) ? dimension.field : undefined,
+                    type: chartType === 'stacked-bar' ? 'bar' : chartType,
+                    categoryField: this.isCategorySliceChart(chartType) ? primaryField : undefined,
+                    ...(secondaryField ? { secondaryCategoryField: secondaryField } : {}),
+                    ...(chartType === 'stacked-bar' || chartType === 'stacked-area' ? { stackId: 'stack-1' } : {}),
                     metric: {
                         field: metric.field,
                         aggregation: this.mapAggregation(metric.aggregation),
                         label: metric.label ?? undefined,
                     },
-                    smooth: chartType === 'line' || chartType === 'area',
+                    smooth: chartType === 'line' || chartType === 'area' || chartType === 'stacked-area',
                 }]);
     }
     buildDataSource(projection) {
         const executionPlan = this.statsBuilder.buildExecutionPlan(projection);
+        const groupByRequest = executionPlan.operation === 'group-by'
+            ? executionPlan.statsRequest
+            : undefined;
         return {
             kind: 'remote',
             resourcePath: executionPlan.resourcePath,
@@ -6016,9 +6967,14 @@ class AnalyticsChartConfigAdapterService {
             query: {
                 sourceKind: 'praxis.stats',
                 statsOperation: executionPlan.operation,
+                ...(groupByRequest?.fillGaps !== undefined ? { fillGaps: groupByRequest.fillGaps } : {}),
+                ...(groupByRequest?.timezone ? { timezone: groupByRequest.timezone } : {}),
+                ...(groupByRequest?.periodField ? { periodField: groupByRequest.periodField } : {}),
+                ...(groupByRequest?.periodPreset ? { periodPreset: groupByRequest.periodPreset } : {}),
                 statsPath: executionPlan.statsPath,
                 statsRequest: executionPlan.statsRequest,
                 dimensions: executionPlan.dimensions,
+                ...(groupByRequest?.dimensions?.length ? { dimensionConfigs: groupByRequest.dimensions } : {}),
                 metrics: projection.source.operation === 'comparison'
                     ? this.getDisplayMetrics(projection).flatMap((metric) => ['current', 'previous'].map((period) => ({
                         field: this.comparisonMetricField(metric.field, period),
@@ -6032,6 +6988,7 @@ class AnalyticsChartConfigAdapterService {
         };
     }
     resolveChartType(projection) {
+        const dimensions = this.statsBuilder.resolveDimensionBindings(projection);
         if (projection.intent === 'trend' && projection.source.operation === 'timeseries') {
             return 'line';
         }
@@ -6039,10 +6996,10 @@ class AnalyticsChartConfigAdapterService {
             return 'horizontal-bar';
         }
         if (projection.intent === 'composition') {
-            return 'pie';
+            return dimensions.length > 1 ? 'stacked-bar' : 'pie';
         }
         if (projection.intent === 'distribution') {
-            return 'bar';
+            return dimensions.length > 1 ? 'heatmap' : 'bar';
         }
         return 'bar';
     }
@@ -6062,7 +7019,10 @@ class AnalyticsChartConfigAdapterService {
             case 'count':
             case 'distinct-count':
             case 'sum':
+            case 'avg-per-cycle-occurrence':
                 return normalizedAggregation;
+            case 'avg_per_cycle_occurrence':
+                return 'avg-per-cycle-occurrence';
             case '':
                 return undefined;
             default:
@@ -6123,6 +7083,7 @@ class PraxisAnalyticsPresentationComponent {
     queryRequest = output();
     loadStateChange = output();
     resolver = inject(AnalyticsPresentationResolver);
+    statsBuilder = inject(AnalyticsStatsRequestBuilderService);
     i18n = inject(PraxisI18nService);
     chartAdapter = inject(AnalyticsChartConfigAdapterService);
     tableAdapter = inject(AnalyticsTableConfigAdapterService);
@@ -6160,15 +7121,17 @@ class PraxisAnalyticsPresentationComponent {
     kpiSubtitle = computed(() => this.resolveText(this.subtitle()), ...(ngDevMode ? [{ debugName: "kpiSubtitle" }] : /* istanbul ignore next */ []));
     kpiItems = computed(() => {
         const projection = this.resolved().projection;
-        const dimension = projection?.bindings.primaryDimension;
+        const dimensions = projection ? this.statsBuilder.resolveDimensionBindings(projection) : [];
+        const dimension = dimensions[0];
         const metric = projection?.bindings.primaryMetrics[0];
         if (!projection || !dimension?.field || !metric?.field || !this.isKpiEligible(projection)) {
             return [];
         }
+        const effectiveDimField = this.statsBuilder.resolveEffectiveDimensionField(dimension, dimensions);
         return this.resultRows().map((row, index) => {
             const rawValue = row[metric.field];
             const value = typeof rawValue === 'number' && Number.isFinite(rawValue) ? rawValue : 0;
-            const label = stringifyValue(row[dimension.field]) ?? this.t('praxis.charts.analyticsPresentation.kpiUnknownBucket', 'Unidentified category');
+            const label = stringifyValue(row[effectiveDimField]) ?? this.t('praxis.charts.analyticsPresentation.kpiUnknownBucket', 'Unidentified category');
             return {
                 trackId: `${stringifyValue(row[ANALYTICS_TABLE_ROW_KEY_FIELD]) ?? label}-${index}`,
                 label,
@@ -6240,7 +7203,10 @@ class PraxisAnalyticsPresentationComponent {
         const projection = this.resolved().projection;
         if (!row || !projection)
             return;
-        const dimensionField = projection.bindings.primaryDimension?.field;
+        const dimensions = this.statsBuilder.resolveDimensionBindings(projection);
+        const dimensionField = dimensions[0]
+            ? this.statsBuilder.resolveEffectiveDimensionField(dimensions[0], dimensions)
+            : undefined;
         const metricField = projection.bindings.primaryMetrics[0]?.field;
         this.pointClick.emit({
             chartId: projection.id,
@@ -6318,8 +7284,10 @@ class PraxisAnalyticsPresentationComponent {
         }
     }
     isKpiEligible(projection) {
+        const dimensions = this.statsBuilder.resolveDimensionBindings(projection);
         return (projection.source.operation === 'group-by'
-            && !!projection.bindings.primaryDimension?.field
+            && dimensions.length === 1
+            && !!dimensions[0]?.field
             && projection.bindings.primaryMetrics.length === 1
             && !!projection.bindings.primaryMetrics[0]?.field
             && (projection.presentationHints?.preferredFamilies ?? []).includes('kpi'));
@@ -6340,11 +7308,11 @@ class PraxisAnalyticsPresentationComponent {
         return Object.entries(values).reduce((message, [name, value]) => message.replaceAll(`{${name}}`, value), this.t(key, fallback));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisAnalyticsPresentationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisAnalyticsPresentationComponent, isStandalone: true, selector: "praxis-analytics-presentation", inputs: { analytics: { classPropertyName: "analytics", publicName: "analytics", isSignal: true, isRequired: true, transformFunction: null }, projectionId: { classPropertyName: "projectionId", publicName: "projectionId", isSignal: true, isRequired: true, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, preferredFamily: { classPropertyName: "preferredFamily", publicName: "preferredFamily", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, motion: { classPropertyName: "motion", publicName: "motion", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { presentationChange: "presentationChange", pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('kpi')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'kpi'\" (click)=\"selectFamily('kpi')\">\n        {{ t('praxis.charts.analyticsPresentation.kpi', 'KPI') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"resultRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  } @else if (activeFamily() === 'kpi') {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <section class=\"analytics-presentation__kpi\" [attr.aria-label]=\"kpiTitle() || t('praxis.charts.analyticsPresentation.kpiCollection', 'Key metrics')\">\n        @if (kpiTitle(); as heading) {\n          <header class=\"analytics-presentation__kpi-header\">\n            <h3>{{ heading }}</h3>\n            @if (kpiSubtitle(); as description) {\n              <p>{{ description }}</p>\n            }\n          </header>\n        }\n        <div class=\"analytics-presentation__kpi-grid\" role=\"list\">\n          @for (item of kpiItems(); track item.trackId) {\n            <div role=\"listitem\">\n              <button\n                class=\"analytics-presentation__kpi-card\"\n                type=\"button\"\n                [attr.aria-label]=\"kpiItemAriaLabel(item.label, item.formattedValue, item.metricLabel)\"\n                (click)=\"handleKpiClick(item.row, item.label, item.value)\"\n              >\n                <strong>{{ item.formattedValue }}</strong>\n                <span>{{ item.label }}</span>\n                <small>{{ item.metricLabel }}</small>\n              </button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, var(--mat-sys-surface));color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}.analytics-presentation__kpi{display:grid;gap:16px;min-width:0}.analytics-presentation__kpi-header{display:grid;gap:4px}.analytics-presentation__kpi-header h3,.analytics-presentation__kpi-header p{margin:0}.analytics-presentation__kpi-header h3{color:var(--md-sys-color-on-surface, #1a1c1e);font-size:1rem;font-weight:650}.analytics-presentation__kpi-header p{color:var(--md-sys-color-on-surface-variant, #44474e);font-size:.875rem}.analytics-presentation__kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:12px;min-width:0}.analytics-presentation__kpi-card{display:grid;gap:6px;width:100%;height:100%;min-width:0;min-height:132px;align-content:center;padding:18px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;text-align:left;cursor:pointer}.analytics-presentation__kpi-card:hover{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-surface-container, #f0f1f3)}.analytics-presentation__kpi-card:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__kpi-card strong{overflow-wrap:anywhere;color:var(--md-sys-color-primary, #1263b4);font-size:clamp(1.75rem,5vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}.analytics-presentation__kpi-card span,.analytics-presentation__kpi-card small{overflow-wrap:anywhere}.analytics-presentation__kpi-card span{font-weight:600}.analytics-presentation__kpi-card small{color:var(--md-sys-color-on-surface-variant, #44474e)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "resourceKey", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "filterTeleport", "widgetId", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "authoringCapability", "dense"], outputs: ["filterCriteriaChange", "queryContextClear", "queryContextChange", "rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange", "drawerOpen", "drawerClose", "drawerTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisAnalyticsPresentationComponent, isStandalone: true, selector: "praxis-analytics-presentation", inputs: { analytics: { classPropertyName: "analytics", publicName: "analytics", isSignal: true, isRequired: true, transformFunction: null }, projectionId: { classPropertyName: "projectionId", publicName: "projectionId", isSignal: true, isRequired: true, transformFunction: null }, availableFamilies: { classPropertyName: "availableFamilies", publicName: "availableFamilies", isSignal: true, isRequired: false, transformFunction: null }, preferredFamily: { classPropertyName: "preferredFamily", publicName: "preferredFamily", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, motion: { classPropertyName: "motion", publicName: "motion", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { presentationChange: "presentationChange", pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('kpi')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'kpi'\" (click)=\"selectFamily('kpi')\">\n        {{ t('praxis.charts.analyticsPresentation.kpi', 'KPI') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state analytics-presentation__state--loading\" role=\"status\"><span class=\"analytics-presentation__loading-label\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</span></section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"resultRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  } @else if (activeFamily() === 'kpi') {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state analytics-presentation__state--loading\" role=\"status\"><span class=\"analytics-presentation__loading-label\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</span></section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <section class=\"analytics-presentation__kpi\" [attr.aria-label]=\"kpiTitle() || t('praxis.charts.analyticsPresentation.kpiCollection', 'Key metrics')\">\n        @if (kpiTitle(); as heading) {\n          <header class=\"analytics-presentation__kpi-header\">\n            <h3>{{ heading }}</h3>\n            @if (kpiSubtitle(); as description) {\n              <p>{{ description }}</p>\n            }\n          </header>\n        }\n        <div class=\"analytics-presentation__kpi-grid\" role=\"list\">\n          @for (item of kpiItems(); track item.trackId) {\n            <div role=\"listitem\">\n              <button\n                class=\"analytics-presentation__kpi-card\"\n                type=\"button\"\n                [attr.aria-label]=\"kpiItemAriaLabel(item.label, item.formattedValue, item.metricLabel)\"\n                (click)=\"handleKpiClick(item.row, item.label, item.value)\"\n              >\n                <strong>{{ item.formattedValue }}</strong>\n                <span>{{ item.label }}</span>\n                <small>{{ item.metricLabel }}</small>\n              </button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, var(--mat-sys-surface));color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}.analytics-presentation__loading-label{font-weight:600;background-image:var(--pdx-text-shimmer-gradient, linear-gradient(105deg, var(--md-sys-color-on-surface-variant, #44474e) 0%, var(--md-sys-color-on-surface-variant, #44474e) 28%, var(--md-sys-color-primary, #1263b4) 44%, var(--md-sys-color-tertiary, #7c3aed) 56%, var(--md-sys-color-on-surface-variant, #44474e) 72%, var(--md-sys-color-on-surface-variant, #44474e) 100%));background-size:260% 100%;background-position:200% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:praxis-analytics-loading-shimmer var(--pdx-text-shimmer-duration, 2.4s) linear infinite}@media(prefers-reduced-motion:reduce),(forced-colors:active),print{.analytics-presentation__loading-label{animation:none;background-image:none;color:var(--pdx-text-shimmer-fallback-color, var(--md-sys-color-on-surface, #1a1c1e));-webkit-text-fill-color:currentColor}}@media(forced-colors:active){.analytics-presentation__loading-label{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}@keyframes praxis-analytics-loading-shimmer{0%{background-position:200% 50%}to{background-position:-60% 50%}}.analytics-presentation__kpi{display:grid;gap:16px;min-width:0}.analytics-presentation__kpi-header{display:grid;gap:4px}.analytics-presentation__kpi-header h3,.analytics-presentation__kpi-header p{margin:0}.analytics-presentation__kpi-header h3{color:var(--md-sys-color-on-surface, #1a1c1e);font-size:1rem;font-weight:650}.analytics-presentation__kpi-header p{color:var(--md-sys-color-on-surface-variant, #44474e);font-size:.875rem}.analytics-presentation__kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:12px;min-width:0}.analytics-presentation__kpi-card{display:grid;gap:6px;width:100%;height:100%;min-width:0;min-height:132px;align-content:center;padding:18px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;text-align:left;cursor:pointer}.analytics-presentation__kpi-card:hover{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-surface-container, #f0f1f3)}.analytics-presentation__kpi-card:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__kpi-card strong{overflow-wrap:anywhere;color:var(--md-sys-color-primary, #1263b4);font-size:clamp(1.75rem,5vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}.analytics-presentation__kpi-card span,.analytics-presentation__kpi-card small{overflow-wrap:anywhere}.analytics-presentation__kpi-card span{font-weight:600}.analytics-presentation__kpi-card small{color:var(--md-sys-color-on-surface-variant, #44474e)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "resourceKey", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "filterTeleport", "widgetId", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "authoringCapability", "dense"], outputs: ["filterCriteriaChange", "queryContextClear", "queryContextChange", "rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange", "drawerOpen", "drawerClose", "drawerTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisAnalyticsPresentationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-analytics-presentation', imports: [PraxisChartComponent, PraxisTable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('kpi')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'kpi'\" (click)=\"selectFamily('kpi')\">\n        {{ t('praxis.charts.analyticsPresentation.kpi', 'KPI') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"resultRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  } @else if (activeFamily() === 'kpi') {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <section class=\"analytics-presentation__kpi\" [attr.aria-label]=\"kpiTitle() || t('praxis.charts.analyticsPresentation.kpiCollection', 'Key metrics')\">\n        @if (kpiTitle(); as heading) {\n          <header class=\"analytics-presentation__kpi-header\">\n            <h3>{{ heading }}</h3>\n            @if (kpiSubtitle(); as description) {\n              <p>{{ description }}</p>\n            }\n          </header>\n        }\n        <div class=\"analytics-presentation__kpi-grid\" role=\"list\">\n          @for (item of kpiItems(); track item.trackId) {\n            <div role=\"listitem\">\n              <button\n                class=\"analytics-presentation__kpi-card\"\n                type=\"button\"\n                [attr.aria-label]=\"kpiItemAriaLabel(item.label, item.formattedValue, item.metricLabel)\"\n                (click)=\"handleKpiClick(item.row, item.label, item.value)\"\n              >\n                <strong>{{ item.formattedValue }}</strong>\n                <span>{{ item.label }}</span>\n                <small>{{ item.metricLabel }}</small>\n              </button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, var(--mat-sys-surface));color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}.analytics-presentation__kpi{display:grid;gap:16px;min-width:0}.analytics-presentation__kpi-header{display:grid;gap:4px}.analytics-presentation__kpi-header h3,.analytics-presentation__kpi-header p{margin:0}.analytics-presentation__kpi-header h3{color:var(--md-sys-color-on-surface, #1a1c1e);font-size:1rem;font-weight:650}.analytics-presentation__kpi-header p{color:var(--md-sys-color-on-surface-variant, #44474e);font-size:.875rem}.analytics-presentation__kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:12px;min-width:0}.analytics-presentation__kpi-card{display:grid;gap:6px;width:100%;height:100%;min-width:0;min-height:132px;align-content:center;padding:18px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;text-align:left;cursor:pointer}.analytics-presentation__kpi-card:hover{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-surface-container, #f0f1f3)}.analytics-presentation__kpi-card:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__kpi-card strong{overflow-wrap:anywhere;color:var(--md-sys-color-primary, #1263b4);font-size:clamp(1.75rem,5vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}.analytics-presentation__kpi-card span,.analytics-presentation__kpi-card small{overflow-wrap:anywhere}.analytics-presentation__kpi-card span{font-weight:600}.analytics-presentation__kpi-card small{color:var(--md-sys-color-on-surface-variant, #44474e)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"] }]
+            args: [{ selector: 'praxis-analytics-presentation', imports: [PraxisChartComponent, PraxisTable], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"analytics-presentation\" [attr.aria-label]=\"projectionId()\">\n  <div class=\"analytics-presentation__toolbar\" role=\"group\" [attr.aria-label]=\"t('praxis.charts.analyticsPresentation.selectorLabel', 'Analytics presentation')\">\n    @if (eligibleFamilies().includes('chart')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'chart'\" (click)=\"selectFamily('chart')\">\n        {{ t('praxis.charts.analyticsPresentation.chart', 'Chart') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('analytic-table')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'analytic-table'\" (click)=\"selectFamily('analytic-table')\">\n        {{ t('praxis.charts.analyticsPresentation.table', 'Table') }}\n      </button>\n    }\n    @if (eligibleFamilies().includes('kpi')) {\n      <button type=\"button\" [attr.aria-pressed]=\"activeFamily() === 'kpi'\" (click)=\"selectFamily('kpi')\">\n        {{ t('praxis.charts.analyticsPresentation.kpi', 'KPI') }}\n      </button>\n    }\n  </div>\n\n  @if (diagnostic(); as message) {\n    <section class=\"analytics-presentation__state analytics-presentation__state--error\" role=\"alert\">\n      <strong>{{ t('praxis.charts.analyticsPresentation.unavailable', 'Presentation unavailable') }}</strong>\n      <span>{{ message }}</span>\n    </section>\n  } @else if (activeFamily() === 'chart' && chartConfig(); as config) {\n    <praxis-chart\n      [config]=\"config\"\n      [queryContext]=\"queryContext()\"\n      [enableCustomization]=\"enableCustomization()\"\n      (pointClick)=\"pointClick.emit($event)\"\n      (pointAction)=\"pointAction.emit($event)\"\n      (selectionChange)=\"selectionChange.emit($event)\"\n      (drillDown)=\"drillDown.emit($event)\"\n      (crossFilter)=\"crossFilter.emit($event)\"\n      (queryRequest)=\"queryRequest.emit($event)\"\n      (loadStateChange)=\"loadStateChange.emit($event)\"\n    />\n  } @else if (activeFamily() === 'analytic-table' && tableConfig(); as config) {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state analytics-presentation__state--loading\" role=\"status\"><span class=\"analytics-presentation__loading-label\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</span></section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <praxis-table\n        [config]=\"config\"\n        [data]=\"resultRows()\"\n        [tableId]=\"projectionId() + '-analytic-table'\"\n        (rowClick)=\"handleTableRowClick($event)\"\n      />\n    }\n  } @else if (activeFamily() === 'kpi') {\n    @if (isResultLoading()) {\n      <section class=\"analytics-presentation__state analytics-presentation__state--loading\" role=\"status\"><span class=\"analytics-presentation__loading-label\">{{ t('praxis.charts.analyticsPresentation.loading', 'Loading analytics\u2026') }}</span></section>\n    } @else if (isResultEmpty()) {\n      <section class=\"analytics-presentation__state\" role=\"status\">{{ t('praxis.charts.analyticsPresentation.empty', 'No data available.') }}</section>\n    } @else {\n      <section class=\"analytics-presentation__kpi\" [attr.aria-label]=\"kpiTitle() || t('praxis.charts.analyticsPresentation.kpiCollection', 'Key metrics')\">\n        @if (kpiTitle(); as heading) {\n          <header class=\"analytics-presentation__kpi-header\">\n            <h3>{{ heading }}</h3>\n            @if (kpiSubtitle(); as description) {\n              <p>{{ description }}</p>\n            }\n          </header>\n        }\n        <div class=\"analytics-presentation__kpi-grid\" role=\"list\">\n          @for (item of kpiItems(); track item.trackId) {\n            <div role=\"listitem\">\n              <button\n                class=\"analytics-presentation__kpi-card\"\n                type=\"button\"\n                [attr.aria-label]=\"kpiItemAriaLabel(item.label, item.formattedValue, item.metricLabel)\"\n                (click)=\"handleKpiClick(item.row, item.label, item.value)\"\n              >\n                <strong>{{ item.formattedValue }}</strong>\n                <span>{{ item.label }}</span>\n                <small>{{ item.metricLabel }}</small>\n              </button>\n            </div>\n          }\n        </div>\n      </section>\n    }\n  }\n</section>\n", styles: [":host{display:block;min-width:0}.analytics-presentation{display:grid;gap:12px;min-width:0}.analytics-presentation__toolbar{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.analytics-presentation__toolbar button{min-height:40px;padding:0 14px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:999px;background:var(--md-sys-color-surface, var(--mat-sys-surface));color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;cursor:pointer}.analytics-presentation__toolbar button[aria-pressed=true]{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-primary-container, #d7e3ff);color:var(--md-sys-color-on-primary-container, #001b3e)}.analytics-presentation__toolbar button:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__state{min-height:220px;display:grid;place-content:center;gap:6px;padding:24px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);text-align:center}.analytics-presentation__state--error{border-color:var(--md-sys-color-error, #ba1a1a);color:var(--md-sys-color-error, #ba1a1a)}.analytics-presentation__loading-label{font-weight:600;background-image:var(--pdx-text-shimmer-gradient, linear-gradient(105deg, var(--md-sys-color-on-surface-variant, #44474e) 0%, var(--md-sys-color-on-surface-variant, #44474e) 28%, var(--md-sys-color-primary, #1263b4) 44%, var(--md-sys-color-tertiary, #7c3aed) 56%, var(--md-sys-color-on-surface-variant, #44474e) 72%, var(--md-sys-color-on-surface-variant, #44474e) 100%));background-size:260% 100%;background-position:200% 50%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:praxis-analytics-loading-shimmer var(--pdx-text-shimmer-duration, 2.4s) linear infinite}@media(prefers-reduced-motion:reduce),(forced-colors:active),print{.analytics-presentation__loading-label{animation:none;background-image:none;color:var(--pdx-text-shimmer-fallback-color, var(--md-sys-color-on-surface, #1a1c1e));-webkit-text-fill-color:currentColor}}@media(forced-colors:active){.analytics-presentation__loading-label{color:CanvasText!important;-webkit-text-fill-color:CanvasText!important}}@keyframes praxis-analytics-loading-shimmer{0%{background-position:200% 50%}to{background-position:-60% 50%}}.analytics-presentation__kpi{display:grid;gap:16px;min-width:0}.analytics-presentation__kpi-header{display:grid;gap:4px}.analytics-presentation__kpi-header h3,.analytics-presentation__kpi-header p{margin:0}.analytics-presentation__kpi-header h3{color:var(--md-sys-color-on-surface, #1a1c1e);font-size:1rem;font-weight:650}.analytics-presentation__kpi-header p{color:var(--md-sys-color-on-surface-variant, #44474e);font-size:.875rem}.analytics-presentation__kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,176px),1fr));gap:12px;min-width:0}.analytics-presentation__kpi-card{display:grid;gap:6px;width:100%;height:100%;min-width:0;min-height:132px;align-content:center;padding:18px;border:1px solid var(--md-sys-color-outline-variant, #c4c7c5);border-radius:16px;background:var(--md-sys-color-surface-container-low, #f7f8fa);color:var(--md-sys-color-on-surface, #1a1c1e);font:inherit;text-align:left;cursor:pointer}.analytics-presentation__kpi-card:hover{border-color:var(--md-sys-color-primary, #1263b4);background:var(--md-sys-color-surface-container, #f0f1f3)}.analytics-presentation__kpi-card:focus-visible{outline:3px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 45%,transparent);outline-offset:2px}.analytics-presentation__kpi-card strong{overflow-wrap:anywhere;color:var(--md-sys-color-primary, #1263b4);font-size:clamp(1.75rem,5vw,2.5rem);font-variant-numeric:tabular-nums;line-height:1}.analytics-presentation__kpi-card span,.analytics-presentation__kpi-card small{overflow-wrap:anywhere}.analytics-presentation__kpi-card span{font-weight:600}.analytics-presentation__kpi-card small{color:var(--md-sys-color-on-surface-variant, #44474e)}@media(max-width:600px){.analytics-presentation__toolbar{justify-content:stretch}.analytics-presentation__toolbar button{flex:1 1 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { analytics: [{ type: i0.Input, args: [{ isSignal: true, alias: "analytics", required: true }] }], projectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "projectionId", required: true }] }], availableFamilies: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFamilies", required: false }] }], preferredFamily: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredFamily", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], motion: [{ type: i0.Input, args: [{ isSignal: true, alias: "motion", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], presentationChange: [{ type: i0.Output, args: ["presentationChange"] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
 function stringifyValue(value) {
     return value === null || value === undefined ? undefined : String(value);
@@ -6609,6 +7577,7 @@ class EChartsOptionBuilderService {
                         name: gauge.name,
                         value: gauge.value,
                         itemStyle: gaugeColor ? { color: gaugeColor } : undefined,
+                        ...(this.pointTooltipSuppression(config, config.series[0]?.id, config.series[0]?.name, gauge.data) ?? {}),
                     }],
             };
             return {
@@ -6664,6 +7633,7 @@ class EChartsOptionBuilderService {
                     name: slice.name,
                     value: slice.value,
                     itemStyle: slice.color ? { color: slice.color } : undefined,
+                    ...(this.pointTooltipSuppression(config, config.series[0]?.id, config.series[0]?.name, slice.data) ?? {}),
                 })),
             };
             return {
@@ -6718,6 +7688,7 @@ class EChartsOptionBuilderService {
                     name: slice.name,
                     value: slice.value,
                     itemStyle: slice.color ? { color: slice.color } : undefined,
+                    ...(this.pointTooltipSuppression(config, config.series[0]?.id, config.series[0]?.name, slice.data) ?? {}),
                 })),
             };
             const baseOption = {
@@ -6788,6 +7759,7 @@ class EChartsOptionBuilderService {
                     name: slice.name,
                     value: slice.value,
                     itemStyle: slice.color ? { color: slice.color } : undefined,
+                    ...(this.pointTooltipSuppression(config, config.series[0]?.id, config.series[0]?.name, slice.data) ?? {}),
                 })),
             };
             return {
@@ -6806,6 +7778,122 @@ class EChartsOptionBuilderService {
                 series: [treemapSeries],
             };
         }
+        if (transformed.mode === 'heatmap' && transformed.heatmap) {
+            const heatmap = transformed.heatmap;
+            const format = this.primaryValueFormat(config);
+            const labelsVisible = heatmap.labelsVisible ?? false;
+            const basePrimaryColor = heatmap.color ?? palette[0] ?? '#1263b4';
+            const baseSecondaryColor = palette[1] ?? '#0f766e';
+            const baseAccentColor = palette[2] ?? '#f08c00';
+            const isDarkSurface = this.isLightTextColor(textColor);
+            const lowStopColor = isDarkSurface ? '#1e293b' : '#e2e8f0';
+            const defaultCellBorderColor = isDarkSurface
+                ? 'rgba(15, 23, 42, 0.55)'
+                : 'rgba(255, 255, 255, 0.65)';
+            const heatmapSeries = {
+                id: heatmap.id,
+                name: heatmap.name,
+                type: 'heatmap',
+                universalTransition,
+                label: {
+                    show: labelsVisible,
+                    color: textColor,
+                    formatter: labelsVisible
+                        ? (params) => this.formatValue(params.value, format)
+                        : undefined,
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 8,
+                        shadowColor: 'rgba(15, 23, 42, 0.28)',
+                    },
+                },
+                itemStyle: {
+                    borderWidth: 1,
+                    borderColor: config.theme?.backgroundColor ?? defaultCellBorderColor,
+                    borderRadius: 2,
+                },
+                data: heatmap.cells.map((cell) => ({
+                    ...cell.data,
+                    name: `${cell.xCategory} • ${cell.yCategory}`,
+                    value: cell.value,
+                    ...(this.pointTooltipSuppression(config, heatmap.id, heatmap.name, cell.data) ?? {}),
+                })),
+            };
+            const hasChartTitle = this.hasText(config.title) || this.hasText(config.subtitle);
+            return {
+                ...motion,
+                aria: accessibility,
+                backgroundColor: config.theme?.backgroundColor,
+                color: palette,
+                title: this.buildTitle(config, 'left', textColor),
+                tooltip: tooltipEnabled
+                    ? {
+                        trigger: 'item',
+                        confine: true,
+                        appendToBody: false,
+                        formatter: (params) => this.formatHeatmapTooltip(params, heatmap, format),
+                    }
+                    : undefined,
+                legend: { show: false },
+                grid: {
+                    top: hasChartTitle ? CARTESIAN_GRID_TOP_WITH_TITLE : CARTESIAN_GRID_TOP_WITHOUT_TITLE,
+                    right: 28,
+                    bottom: legendVisible ? 68 : 40,
+                    left: 56,
+                    outerBoundsMode: 'same',
+                    outerBoundsContain: 'axisLabel',
+                },
+                xAxis: {
+                    type: 'category',
+                    name: config.axes?.x?.label,
+                    nameTextStyle: { color: textColor },
+                    data: heatmap.xCategories,
+                    nameLocation: 'middle',
+                    nameGap: 24,
+                    splitArea: { show: true },
+                    axisLabel: {
+                        show: config.axes?.x?.labels?.visible ?? true,
+                        color: textColor,
+                        rotate: config.axes?.x?.labels?.rotate ?? 0,
+                        hideOverlap: true,
+                        formatter: this.axisLabelFormatter(config.axes?.x?.labels?.format),
+                    },
+                },
+                yAxis: {
+                    type: 'category',
+                    name: config.axes?.y?.label,
+                    nameTextStyle: { color: textColor },
+                    data: heatmap.yCategories,
+                    nameLocation: 'middle',
+                    nameGap: 44,
+                    splitArea: { show: true },
+                    axisLabel: {
+                        show: config.axes?.y?.labels?.visible ?? true,
+                        color: textColor,
+                        hideOverlap: true,
+                        formatter: this.axisLabelFormatter(config.axes?.y?.labels?.format),
+                    },
+                },
+                visualMap: {
+                    type: 'continuous',
+                    show: legendVisible,
+                    min: heatmap.min,
+                    max: heatmap.max,
+                    calculable: true,
+                    orient: 'horizontal',
+                    left: 'center',
+                    bottom: 10,
+                    itemWidth: 12,
+                    itemHeight: 140,
+                    textStyle: { color: textColor, fontSize: 11 },
+                    inRange: {
+                        color: [lowStopColor, baseSecondaryColor, basePrimaryColor, baseAccentColor],
+                    },
+                },
+                series: [heatmapSeries],
+            };
+        }
         if (transformed.mode === 'scatter') {
             const scatterSeries = transformed.series.map((series) => ({
                 id: series.id,
@@ -6820,7 +7908,7 @@ class EChartsOptionBuilderService {
                         : undefined,
                 },
                 itemStyle: series.color ? { color: series.color } : undefined,
-                data: series.points,
+                data: series.points.map((point) => this.decorateSeriesPointWithQuickViewTooltipSuppression(config, series.id, series.name, point)),
             }));
             return {
                 ...motion,
@@ -6956,7 +8044,7 @@ class EChartsOptionBuilderService {
                         : undefined,
                 },
                 itemStyle: series.color ? { color: series.color } : undefined,
-                data: series.points,
+                data: series.points.map((point) => this.decorateSeriesPointWithQuickViewTooltipSuppression(config, series.id, series.name, point)),
             })),
         };
     }
@@ -7020,14 +8108,18 @@ class EChartsOptionBuilderService {
         const title = this.i18n.resolve(config.title).trim();
         const seriesCount = transformed.mode === 'gauge'
             ? transformed.gauge ? 1 : 0
-            : transformed.slices.length
-                ? 1
-                : transformed.series.length;
+            : transformed.mode === 'heatmap'
+                ? transformed.heatmap ? 1 : 0
+                : transformed.slices.length
+                    ? 1
+                    : transformed.series.length;
         const pointCount = transformed.mode === 'gauge'
             ? transformed.gauge ? 1 : 0
-            : transformed.slices.length
-                ? transformed.slices.length
-                : transformed.series.reduce((total, series) => total + series.points.length, 0);
+            : transformed.mode === 'heatmap'
+                ? transformed.heatmap?.cells.length ?? 0
+                : transformed.slices.length
+                    ? transformed.slices.length
+                    : transformed.series.reduce((total, series) => total + series.points.length, 0);
         const params = {
             title,
             type: this.chartTypeLabel(config.type),
@@ -7061,6 +8153,7 @@ class EChartsOptionBuilderService {
             pyramid: 'Pyramid',
             treemap: 'Treemap',
             gauge: 'Gauge',
+            heatmap: 'Heatmap',
         };
         return this.t(`praxis.charts.runtime.accessibility.chartType.${type}`, fallbacks[type]);
     }
@@ -7070,6 +8163,24 @@ class EChartsOptionBuilderService {
     resolveTextColor(config) {
         return config.theme?.textColor ?? '#4b5563';
     }
+    isLightTextColor(color) {
+        const trimmed = String(color || '').trim();
+        const hex6 = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/.exec(trimmed);
+        if (hex6) {
+            const r = Number.parseInt(hex6[1], 16) / 255;
+            const g = Number.parseInt(hex6[2], 16) / 255;
+            const b = Number.parseInt(hex6[3], 16) / 255;
+            return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.6;
+        }
+        const hex3 = /^#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])$/.exec(trimmed);
+        if (hex3) {
+            const r = Number.parseInt(hex3[1] + hex3[1], 16) / 255;
+            const g = Number.parseInt(hex3[2] + hex3[2], 16) / 255;
+            const b = Number.parseInt(hex3[3] + hex3[3], 16) / 255;
+            return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.6;
+        }
+        return false;
+    }
     hasText(value) {
         const text = this.resolveText(value);
         return !!text && text.trim().length > 0;
@@ -7203,24 +8314,106 @@ class EChartsOptionBuilderService {
             },
         ];
     }
-    primaryValueFormat(config) {
-        return config.series.find((series) => series.axis !== 'secondary')?.labels?.format
-            ?? config.axes?.y?.labels?.format
-            ?? config.series[0]?.labels?.format;
+    primaryValueFormat(config) {
+        return config.series.find((series) => series.axis !== 'secondary')?.labels?.format
+            ?? config.axes?.y?.labels?.format
+            ?? config.series[0]?.labels?.format;
+    }
+    buildCartesianTooltip(config) {
+        const hasQuickView = hasChartQuickViewBinding(config);
+        const tooltip = {
+            trigger: config.theme?.tooltip?.trigger ?? 'axis',
+            confine: true,
+            appendToBody: false,
+            valueFormatter: (value) => this.formatValue(value, this.primaryValueFormat(config)),
+        };
+        if (this.usesCanonicalStatsTime(config)) {
+            return {
+                ...tooltip,
+                formatter: (params) => {
+                    if (hasQuickView && this.shouldSuppressTooltipForParams(params, config)) {
+                        return '';
+                    }
+                    return this.formatCanonicalTimeTooltip(params, config);
+                },
+            };
+        }
+        if (hasQuickView) {
+            return {
+                ...tooltip,
+                formatter: (params) => {
+                    if (this.shouldSuppressTooltipForParams(params, config)) {
+                        return '';
+                    }
+                    return this.formatDefaultCartesianTooltip(params, config);
+                },
+            };
+        }
+        return tooltip;
+    }
+    pointTooltipSuppression(config, seriesId, seriesName, data) {
+        const eligible = resolveChartPointQuickView(config, {
+            seriesId,
+            seriesName,
+            data,
+        });
+        return eligible ? { tooltip: { show: false } } : undefined;
     }
-    buildCartesianTooltip(config) {
-        const tooltip = {
-            trigger: config.theme?.tooltip?.trigger ?? 'axis',
-            confine: true,
-            appendToBody: false,
-            valueFormatter: (value) => this.formatValue(value, this.primaryValueFormat(config)),
+    decorateSeriesPointWithQuickViewTooltipSuppression(config, seriesId, seriesName, point) {
+        if (!point || typeof point !== 'object' || Array.isArray(point)) {
+            return point;
+        }
+        const suppression = this.pointTooltipSuppression(config, seriesId, seriesName, point);
+        if (!suppression) {
+            return point;
+        }
+        return {
+            ...point,
+            ...suppression,
         };
-        return this.usesCanonicalStatsTime(config)
-            ? {
-                ...tooltip,
-                formatter: (params) => this.formatCanonicalTimeTooltip(params, config),
-            }
-            : tooltip;
+    }
+    shouldSuppressTooltipForParams(params, config) {
+        const items = (Array.isArray(params) ? params : [params])
+            .filter((item) => !!item && typeof item === 'object');
+        if (!items.length) {
+            return false;
+        }
+        return items.some((item) => {
+            const data = this.tooltipPointData(item['data']);
+            const seriesId = item['seriesId'] == null ? undefined : String(item['seriesId']);
+            const seriesName = item['seriesName'] == null ? undefined : String(item['seriesName']);
+            return resolveChartPointQuickView(config, {
+                seriesId,
+                seriesName,
+                data,
+            }) !== null;
+        });
+    }
+    formatDefaultCartesianTooltip(params, config) {
+        const items = (Array.isArray(params) ? params : [params])
+            .filter((item) => !!item && typeof item === 'object');
+        if (!items.length) {
+            return '';
+        }
+        const first = items[0];
+        const header = this.nonEmptyText(first['axisValueLabel'])
+            ?? this.nonEmptyText(first['name'])
+            ?? '';
+        const lines = items.map((item) => {
+            const itemData = this.tooltipPointData(item['data']);
+            const seriesId = item['seriesId'] == null ? undefined : String(item['seriesId']);
+            const format = seriesId
+                ? this.seriesLabelFormat(config, seriesId) ?? this.primaryValueFormat(config)
+                : this.primaryValueFormat(config);
+            const value = this.formatValue(item['value'] ?? itemData['value'], format);
+            const seriesName = this.nonEmptyText(item['seriesName']);
+            return seriesName
+                ? `${escapeTooltipHtml(seriesName)}: ${escapeTooltipHtml(value)}`
+                : escapeTooltipHtml(value);
+        });
+        return [escapeTooltipHtml(header), ...lines]
+            .filter((part) => part.length > 0)
+            .join('<br/>');
     }
     usesCanonicalStatsTime(config) {
         if (config.dataSource?.kind !== 'remote'
@@ -7282,6 +8475,37 @@ class EChartsOptionBuilderService {
             ? value
             : {};
     }
+    formatHeatmapTooltip(params, heatmap, format) {
+        const item = Array.isArray(params) ? params[0] : params;
+        if (!item || typeof item !== 'object') {
+            return '';
+        }
+        const record = item;
+        const data = this.tooltipPointData(record['data']);
+        const rawTuple = Array.isArray(record['value'])
+            ? record['value']
+            : (Array.isArray(data['value']) ? data['value'] : []);
+        const xIdx = Number(rawTuple[0]);
+        const yIdx = Number(rawTuple[1]);
+        const rawVal = rawTuple.length >= 3 ? rawTuple[2] : record['value'];
+        const xLabel = this.nonEmptyText(data['category'])
+            ?? (Number.isInteger(xIdx) ? heatmap.xCategories[xIdx] : undefined)
+            ?? '';
+        const yLabel = this.nonEmptyText(data['secondaryCategory'])
+            ?? (Number.isInteger(yIdx) ? heatmap.yCategories[yIdx] : undefined)
+            ?? '';
+        const header = [xLabel, yLabel].filter(Boolean).join(' • ')
+            || this.nonEmptyText(record['name'])
+            || '';
+        const valueText = rawVal === null || rawVal === undefined
+            ? this.t('praxis.charts.runtime.accessibility.notAvailable', 'Not available')
+            : this.formatValue(rawVal, format);
+        const seriesName = this.nonEmptyText(record['seriesName']) ?? heatmap.name;
+        const line = seriesName
+            ? `${escapeTooltipHtml(seriesName)}: ${escapeTooltipHtml(valueText)}`
+            : escapeTooltipHtml(valueText);
+        return [escapeTooltipHtml(header), line].filter(Boolean).join('<br/>');
+    }
     nonEmptyText(value) {
         if (value === null || value === undefined) {
             return undefined;
@@ -7544,6 +8768,7 @@ use([
     FunnelChart,
     GaugeChart,
     GridComponent,
+    HeatmapChart,
     LegendComponent,
     LineChart,
     PieChart,
@@ -7554,6 +8779,7 @@ use([
     TransformComponent,
     TreemapChart,
     UniversalTransition,
+    VisualMapComponent,
 ]);
 class EChartsEngineAdapter {
     optionBuilder;
@@ -7589,6 +8815,9 @@ class EChartsEngineAdapter {
         this.lastStructuralSignature = nextStructuralSignature;
         this.detachHandlers();
         chart.off('click');
+        chart.off('mouseover');
+        chart.off('mouseout');
+        chart.off('globalout');
         chart.on('click', (params) => {
             this.lastSeriesClickAt = Date.now();
             this.lastGridClick = undefined;
@@ -7602,6 +8831,45 @@ class EChartsEngineAdapter {
                 data,
             });
         });
+        chart.on('mouseover', (params) => {
+            const data = pointData(params?.name, params?.data ?? params?.value);
+            const category = this.resolvePointCategory(payload, data, params?.name);
+            const quickViewTarget = resolveChartPointQuickView(payload.config, {
+                seriesId: params?.seriesId,
+                seriesName: params?.seriesName,
+                data,
+            });
+            if (quickViewTarget) {
+                chart.dispatchAction?.({ type: 'hideTip' });
+            }
+            const anchorKey = `${payload.config.id ?? 'chart'}:${params?.seriesId ?? params?.seriesIndex ?? 0}:${params?.dataIndex ?? category ?? ''}`;
+            payload.onPointHoverEnter?.({
+                chartId: payload.config.id,
+                seriesId: params?.seriesId,
+                seriesName: params?.seriesName,
+                category,
+                value: pointValue(params?.value ?? params?.data),
+                data,
+                anchorKey,
+                getViewportRect: () => this.resolvePointViewportRect(host, chart, params),
+            });
+        });
+        chart.on('mouseout', (params) => {
+            const data = pointData(params?.name, params?.data ?? params?.value);
+            payload.onPointHoverLeave?.({
+                chartId: payload.config.id,
+                seriesId: params?.seriesId,
+                seriesName: params?.seriesName,
+                category: this.resolvePointCategory(payload, data, params?.name),
+                value: pointValue(params?.value ?? params?.data),
+                data,
+            });
+        });
+        chart.on('globalout', () => {
+            payload.onPointHoverLeave?.({
+                chartId: payload.config.id,
+            });
+        });
         const zrender = chart?.getZr?.();
         this.zrenderClickHandler = (event) => {
             const occurredAt = Date.now();
@@ -7643,6 +8911,9 @@ class EChartsEngineAdapter {
     disposeChart() {
         this.detachHandlers();
         this.chart?.off('click');
+        this.chart?.off('mouseover');
+        this.chart?.off('mouseout');
+        this.chart?.off('globalout');
         this.chart?.dispose();
         this.chart = undefined;
         this.currentHost = undefined;
@@ -7650,6 +8921,111 @@ class EChartsEngineAdapter {
         this.lastSeriesClickAt = 0;
         this.lastGridClick = undefined;
     }
+    resolvePointViewportRect(host, chart, params) {
+        if (!host.isConnected) {
+            return null;
+        }
+        const hostRect = host.getBoundingClientRect();
+        if (hostRect.width <= 0 || hostRect.height <= 0) {
+            return null;
+        }
+        const target = params?.event?.target;
+        if (target && typeof target.getBoundingRect === 'function') {
+            try {
+                const rawRect = target.getBoundingRect();
+                if (rawRect && Number.isFinite(rawRect.x) && Number.isFinite(rawRect.y)) {
+                    let localLeft = Number(rawRect.x);
+                    let localTop = Number(rawRect.y);
+                    let localWidth = Math.max(8, Number(rawRect.width) || 12);
+                    let localHeight = Math.max(8, Number(rawRect.height) || 12);
+                    if (typeof target.transformCoordToGlobal === 'function') {
+                        const p1 = target.transformCoordToGlobal(rawRect.x, rawRect.y);
+                        const p2 = target.transformCoordToGlobal(rawRect.x + (Number(rawRect.width) || 0), rawRect.y + (Number(rawRect.height) || 0));
+                        if (Array.isArray(p1)
+                            && Array.isArray(p2)
+                            && Number.isFinite(p1[0])
+                            && Number.isFinite(p1[1])
+                            && Number.isFinite(p2[0])
+                            && Number.isFinite(p2[1])) {
+                            localLeft = Math.min(p1[0], p2[0]);
+                            localTop = Math.min(p1[1], p2[1]);
+                            localWidth = Math.max(8, Math.abs(p2[0] - p1[0]));
+                            localHeight = Math.max(8, Math.abs(p2[1] - p1[1]));
+                        }
+                    }
+                    if (localWidth < hostRect.width || localHeight < hostRect.height) {
+                        const x = Math.round(hostRect.left + localLeft);
+                        const y = Math.round(hostRect.top + localTop);
+                        return {
+                            x,
+                            y,
+                            left: x,
+                            top: y,
+                            width: Math.round(localWidth),
+                            height: Math.round(localHeight),
+                        };
+                    }
+                }
+            }
+            catch {
+                // Fallback to pixel conversion / event offset below.
+            }
+        }
+        const anyChart = chart;
+        if (typeof anyChart?.convertToPixel === 'function') {
+            try {
+                const seriesIndex = Number.isInteger(params?.seriesIndex) ? params.seriesIndex : 0;
+                const coordInput = Array.isArray(params?.value)
+                    ? params.value
+                    : Number.isInteger(params?.dataIndex)
+                        ? [params.dataIndex, pointValue(params?.value ?? params?.data)]
+                        : undefined;
+                if (coordInput !== undefined) {
+                    const pixel = anyChart.convertToPixel({ seriesIndex }, coordInput)
+                        ?? anyChart.convertToPixel({ gridIndex: 0 }, coordInput);
+                    if (Array.isArray(pixel) && Number.isFinite(pixel[0]) && Number.isFinite(pixel[1])) {
+                        const x = Math.round(hostRect.left + Number(pixel[0]) - 6);
+                        const y = Math.round(hostRect.top + Number(pixel[1]) - 6);
+                        return {
+                            x,
+                            y,
+                            left: x,
+                            top: y,
+                            width: 12,
+                            height: 12,
+                        };
+                    }
+                }
+            }
+            catch {
+                // Fallback to pointer offset below.
+            }
+        }
+        const offsetX = Number(params?.event?.offsetX);
+        const offsetY = Number(params?.event?.offsetY);
+        if (Number.isFinite(offsetX) && Number.isFinite(offsetY)) {
+            const x = Math.round(hostRect.left + offsetX - 6);
+            const y = Math.round(hostRect.top + offsetY - 6);
+            return {
+                x,
+                y,
+                left: x,
+                top: y,
+                width: 12,
+                height: 12,
+            };
+        }
+        const fallbackX = Math.round(hostRect.left + Math.min(24, Math.max(8, hostRect.width / 2)));
+        const fallbackY = Math.round(hostRect.top + Math.min(24, Math.max(8, hostRect.height / 2)));
+        return {
+            x: fallbackX,
+            y: fallbackY,
+            left: fallbackX,
+            top: fallbackY,
+            width: 16,
+            height: 16,
+        };
+    }
     resolveStructuralSignature(config) {
         const mode = config.type === 'pie' || config.type === 'donut'
             ? 'pie'
@@ -7659,9 +9035,11 @@ class EChartsEngineAdapter {
                     ? 'treemap'
                     : config.type === 'gauge'
                         ? 'gauge'
-                        : config.type === 'scatter'
-                            ? 'scatter'
-                            : 'cartesian';
+                        : config.type === 'heatmap'
+                            ? 'heatmap'
+                            : config.type === 'scatter'
+                                ? 'scatter'
+                                : 'cartesian';
         const orientation = config.orientation === 'horizontal' || config.type === 'horizontal-bar'
             ? 'horizontal'
             : 'vertical';
@@ -7732,7 +9110,64 @@ class EChartsEngineAdapter {
         const option = chart.getOption?.();
         const xAxis = firstOptionEntry(option?.xAxis);
         const yAxis = firstOptionEntry(option?.yAxis);
-        const horizontal = yAxis?.type === 'category';
+        const isTwoDimensionalCategoryGrid = xAxis?.type === 'category' && yAxis?.type === 'category';
+        if (isTwoDimensionalCategoryGrid) {
+            const xCategories = Array.isArray(xAxis?.data) ? xAxis.data : [];
+            const yCategories = Array.isArray(yAxis?.data) ? yAxis.data : [];
+            if (!xCategories.length || !yCategories.length) {
+                return;
+            }
+            const converted = chart.convertFromPixel({ gridIndex: 0 }, point);
+            const xIndex = Math.round(Number(converted?.[0]));
+            const yIndex = Math.round(Number(converted?.[1]));
+            if (!Number.isInteger(xIndex)
+                || xIndex < 0
+                || xIndex >= xCategories.length
+                || !Number.isInteger(yIndex)
+                || yIndex < 0
+                || yIndex >= yCategories.length) {
+                return;
+            }
+            const xCategoryValue = xCategories[xIndex] == null ? undefined : String(xCategories[xIndex]);
+            const yCategoryValue = yCategories[yIndex] == null ? undefined : String(yCategories[yIndex]);
+            const categoryField = payload.config.axes?.x?.field
+                ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
+            const secondaryField = payload.config.series.find((series) => series.secondaryCategoryField)?.secondaryCategoryField
+                ?? (payload.config.axes?.y?.type === 'category' ? payload.config.axes.y.field : undefined);
+            const signature = JSON.stringify({
+                chartId: payload.config.id,
+                category: xCategoryValue,
+                secondaryCategory: yCategoryValue,
+                xIndex,
+                yIndex,
+            });
+            if (this.isDuplicateGridClick(signature, occurredAt)) {
+                return;
+            }
+            const sourceRow = payload.data.find((row) => {
+                const rowX = String((categoryField ? row[categoryField] : undefined) ?? row['label'] ?? '');
+                const rowY = String((secondaryField ? row[secondaryField] : undefined) ?? row['secondaryLabel'] ?? '');
+                return rowX === (xCategoryValue ?? '') && rowY === (yCategoryValue ?? '');
+            });
+            const data = {
+                ...(sourceRow ?? {}),
+                category: xCategoryValue,
+                secondaryCategory: yCategoryValue,
+            };
+            if (categoryField && xCategoryValue !== undefined && data[categoryField] === undefined) {
+                data[categoryField] = xCategoryValue;
+            }
+            if (secondaryField && yCategoryValue !== undefined && data[secondaryField] === undefined) {
+                data[secondaryField] = yCategoryValue;
+            }
+            payload.onPointClick?.({
+                chartId: payload.config.id,
+                category: xCategoryValue,
+                data,
+            });
+            return;
+        }
+        const horizontal = yAxis?.type === 'category' && xAxis?.type !== 'category';
         const categories = (horizontal ? yAxis?.data : xAxis?.data) ?? [];
         if (!Array.isArray(categories) || categories.length === 0) {
             return;
@@ -7799,7 +9234,7 @@ function firstOptionEntry(value) {
 }
 function pointValue(value) {
     if (Array.isArray(value)) {
-        return value.length > 1 ? value[1] : value[0];
+        return value.length > 1 ? value[value.length - 1] : value[0];
     }
     if (value && typeof value === 'object' && 'value' in value) {
         return pointValue(value.value);
@@ -9696,6 +11131,20 @@ function resolveShowcaseStateMode(config, remoteRuntimeState = 'idle') {
     }
     return 'ready';
 }
+const INTERNAL_CHART_ROW_FIELDS = new Set([
+    'key',
+    'label',
+    'secondaryKey',
+    'secondaryLabel',
+    'compositeKey',
+    'coordinates',
+    'value',
+    'count',
+    'from',
+    'to',
+    'mode',
+    'requestMode',
+]);
 function buildTableConfig(config, rows) {
     const tableConfig = createDefaultTableConfig();
     const toolbar = tableConfig.toolbar;
@@ -9711,6 +11160,7 @@ function buildTableConfig(config, rows) {
     const appearance = tableConfig.appearance;
     const categoryField = config.axes?.x?.field || config.series[0]?.categoryField;
     const categoryLabel = config.axes?.x?.label || categoryField;
+    const secondaryCategoryField = config.series[0]?.secondaryCategoryField?.trim();
     const sampleRow = rows[0] || {};
     const seriesColumns = config.series
         .map((series) => {
@@ -9724,7 +11174,9 @@ function buildTableConfig(config, rows) {
         };
     })
         .filter((column) => column !== null);
-    const fallbackColumns = Object.keys(sampleRow).map((field) => ({
+    const fallbackColumns = Object.keys(sampleRow)
+        .filter((field) => !INTERNAL_CHART_ROW_FIELDS.has(field))
+        .map((field) => ({
         field,
         header: field,
     }));
@@ -9734,7 +11186,18 @@ function buildTableConfig(config, rows) {
                 header: categoryLabel || categoryField,
             }]
         : [];
-    const dedupedColumns = [...categoryColumn, ...seriesColumns, ...fallbackColumns].filter((column, index, source) => source.findIndex((candidate) => candidate.field === column.field) === index);
+    const secondaryCategoryColumn = secondaryCategoryField
+        ? [{
+                field: secondaryCategoryField,
+                header: secondaryCategoryField,
+            }]
+        : [];
+    const dedupedColumns = [
+        ...categoryColumn,
+        ...secondaryCategoryColumn,
+        ...seriesColumns,
+        ...fallbackColumns,
+    ].filter((column, index, source) => source.findIndex((candidate) => candidate.field === column.field) === index);
     tableConfig.columns = dedupedColumns;
     toolbar.visible = false;
     pagination.enabled = rows.length > 10;
@@ -10133,6 +11596,7 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.runtime.accessibility.chartType.pyramid': 'Pyramid',
     'praxis.charts.runtime.accessibility.chartType.treemap': 'Treemap',
     'praxis.charts.runtime.accessibility.chartType.gauge': 'Gauge',
+    'praxis.charts.runtime.accessibility.chartType.heatmap': 'Heatmap',
     'praxis.charts.runtime.comparisonCurrent': 'Current',
     'praxis.charts.runtime.comparisonPrevious': 'Previous',
     'praxis.charts.widget.missingDocument': 'This widget does not have a canonical chart document yet. Runtime inputs are preserved until a canonical chartDocument is provided by the host.',
@@ -10173,6 +11637,7 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.field.comparisonMode': 'Comparison mode',
     'praxis.charts.editor.field.dimension': 'Dimension',
     'praxis.charts.editor.field.dimensionRole': 'Dimension role',
+    'praxis.charts.editor.field.dimensionExtraction': 'Temporal extraction',
     'praxis.charts.editor.field.metric': 'Metric',
     'praxis.charts.editor.field.metricLabel': 'Metric label',
     'praxis.charts.editor.field.metricAggregation': 'Aggregation',
@@ -10326,6 +11791,8 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.specialization.scatterHint': 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.',
     'praxis.charts.editor.specialization.gaugeTitle': 'Gauge scale',
     'praxis.charts.editor.specialization.gaugeHint': 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.',
+    'praxis.charts.editor.specialization.heatmapTitle': 'Heatmap matrix guidance',
+    'praxis.charts.editor.specialization.heatmapHint': 'Heatmap charts render a 2D matrix requiring two dimensions (X and Y axes) and one metric, using group-by for remote stats.',
     'praxis.charts.editor.events.pointClickTitle': 'Point click',
     'praxis.charts.editor.events.selectionChangeTitle': 'Selection change',
     'praxis.charts.editor.events.drillDownTitle': 'Drill down',
@@ -10368,10 +11835,16 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.dimensionRole.segment': 'segment',
     'praxis.charts.editor.dimensionRole.time': 'time',
     'praxis.charts.editor.dimensionRole.value': 'value',
+    'praxis.charts.editor.dimensionExtraction.none': 'None',
+    'praxis.charts.editor.dimensionExtraction.HOUR_OF_DAY': 'Hour of day',
+    'praxis.charts.editor.dimensionExtraction.DAY_OF_WEEK': 'Day of week',
+    'praxis.charts.editor.dimensionExtraction.DAY_OF_MONTH': 'Day of month',
+    'praxis.charts.editor.dimensionExtraction.MONTH_OF_YEAR': 'Month of year',
     'praxis.charts.editor.metricAggregation.sum': 'sum',
     'praxis.charts.editor.metricAggregation.count': 'count',
     'praxis.charts.editor.metricAggregation.distinct-count': 'distinct count',
     'praxis.charts.editor.metricAggregation.avg': 'avg',
+    'praxis.charts.editor.metricAggregation.avg-per-cycle-occurrence': 'avg per cycle occurrence',
     'praxis.charts.editor.metricAggregation.min': 'min',
     'praxis.charts.editor.metricAggregation.max': 'max',
     'praxis.charts.editor.metricAxis.primary': 'primary',
@@ -10398,6 +11871,7 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.kind.pyramid': 'Pyramid',
     'praxis.charts.editor.kind.treemap': 'Treemap',
     'praxis.charts.editor.kind.gauge': 'Gauge',
+    'praxis.charts.editor.kind.heatmap': 'Heatmap',
     'praxis.charts.analyticsPresentation.selectorLabel': 'Analytics presentation',
     'praxis.charts.analyticsPresentation.chart': 'Chart',
     'praxis.charts.analyticsPresentation.table': 'Table',
@@ -10462,6 +11936,7 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.runtime.accessibility.chartType.pyramid': 'Pirâmide',
     'praxis.charts.runtime.accessibility.chartType.treemap': 'Mapa de árvore',
     'praxis.charts.runtime.accessibility.chartType.gauge': 'Velocímetro',
+    'praxis.charts.runtime.accessibility.chartType.heatmap': 'Mapa de calor',
     'praxis.charts.runtime.comparisonCurrent': 'Atual',
     'praxis.charts.runtime.comparisonPrevious': 'Anterior',
     'praxis.charts.widget.missingDocument': 'Este widget ainda não possui um documento canônico de gráfico. Os inputs runtime são preservados até o host fornecer um chartDocument canônico.',
@@ -10502,6 +11977,7 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.field.comparisonMode': 'Modo de comparação',
     'praxis.charts.editor.field.dimension': 'Dimensão',
     'praxis.charts.editor.field.dimensionRole': 'Papel da dimensão',
+    'praxis.charts.editor.field.dimensionExtraction': 'Extração temporal',
     'praxis.charts.editor.field.metric': 'Métrica',
     'praxis.charts.editor.field.metricLabel': 'Rótulo da métrica',
     'praxis.charts.editor.field.metricAggregation': 'Agregação',
@@ -10655,6 +12131,8 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.specialization.scatterHint': 'Com uma métrica, o scatter usa a primeira dimensão em X e a métrica em Y. Com duas métricas, a dimensão identifica o bucket agrupado e as métricas ocupam X e Y.',
     'praxis.charts.editor.specialization.gaugeTitle': 'Escala do velocímetro',
     'praxis.charts.editor.specialization.gaugeHint': 'O velocímetro renderiza exatamente um bucket e uma métrica. Stats remotos usam agrupar por com limite 1; valores fora da escala falham em vez de serem limitados silenciosamente.',
+    'praxis.charts.editor.specialization.heatmapTitle': 'Guia da matriz de calor (heatmap)',
+    'praxis.charts.editor.specialization.heatmapHint': 'O mapa de calor renderiza uma matriz 2D exigindo duas dimensões (eixos X e Y) e uma métrica, utilizando agrupar por para stats remotos.',
     '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',
@@ -10697,10 +12175,16 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.dimensionRole.segment': 'segmento',
     'praxis.charts.editor.dimensionRole.time': 'tempo',
     'praxis.charts.editor.dimensionRole.value': 'valor',
+    'praxis.charts.editor.dimensionExtraction.none': 'Nenhuma',
+    'praxis.charts.editor.dimensionExtraction.HOUR_OF_DAY': 'Hora do dia',
+    'praxis.charts.editor.dimensionExtraction.DAY_OF_WEEK': 'Dia da semana',
+    'praxis.charts.editor.dimensionExtraction.DAY_OF_MONTH': 'Dia do mês',
+    'praxis.charts.editor.dimensionExtraction.MONTH_OF_YEAR': 'Mês do ano',
     'praxis.charts.editor.metricAggregation.sum': 'soma',
     'praxis.charts.editor.metricAggregation.count': 'contagem',
     'praxis.charts.editor.metricAggregation.distinct-count': 'contagem distinta',
     'praxis.charts.editor.metricAggregation.avg': 'média',
+    'praxis.charts.editor.metricAggregation.avg-per-cycle-occurrence': 'média por ocorrência do ciclo',
     'praxis.charts.editor.metricAggregation.min': 'mínimo',
     'praxis.charts.editor.metricAggregation.max': 'máximo',
     'praxis.charts.editor.metricAxis.primary': 'primário',
@@ -10727,6 +12211,7 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.kind.pyramid': 'Pirâmide',
     'praxis.charts.editor.kind.treemap': 'Mapa de árvore',
     'praxis.charts.editor.kind.gauge': 'Velocímetro',
+    'praxis.charts.editor.kind.heatmap': 'Mapa de calor (Heatmap)',
     'praxis.charts.analyticsPresentation.selectorLabel': 'Apresentação analítica',
     'praxis.charts.analyticsPresentation.chart': 'Gráfico',
     'praxis.charts.analyticsPresentation.table': 'Tabela',
@@ -11610,6 +13095,76 @@ const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
         },
     },
 };
+const PRAXIS_CHART_BACKEND_MOCK_HEATMAP_MATRIX = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|internal:false',
+        schemaHash: 'published-hash-incident-heatmap-matrix-v1',
+        resourcePath: 'api/human-resources/vw-indicadores-incidentes',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'incident-weekday-hour-heatmap',
+        canvasItem: { col: 1, row: 21, colSpan: 12, rowSpan: 5 },
+        shell: {
+            title: 'Matriz Dia da Semana x Hora',
+            subtitle: 'Heatmap 2D com extracoes ciclicas e media por ocorrencia de ciclo',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'heatmap',
+            preset: 'distribution',
+            chartId: 'incident-weekday-hour-heatmap',
+            title: { key: 'charts.incidents.heatmap.title', fallback: 'Matriz Dia da Semana x Hora' },
+            subtitle: {
+                key: 'charts.incidents.heatmap.subtitle',
+                fallback: 'Media por ocorrencia de ciclo em 7x24 via praxis.stats group-by',
+            },
+            sizing: { mode: 'fixed', height: 380 },
+            source: {
+                kind: 'praxis.stats',
+                resource: '/api/human-resources/vw-indicadores-incidentes',
+                operation: 'group-by',
+                options: {
+                    timezone: 'America/Sao_Paulo',
+                    periodPreset: 'LAST_30_DAYS',
+                    fillGaps: true,
+                    orderBy: 'key-asc',
+                    limit: 168,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'ocorridoEm',
+                    label: 'Dia da semana',
+                    role: 'category',
+                    extraction: 'DAY_OF_WEEK',
+                },
+                {
+                    field: 'ocorridoEm',
+                    label: 'Hora do dia',
+                    role: 'series',
+                    extraction: 'HOUR_OF_DAY',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'count',
+                    label: 'Media por ocorrencia',
+                    aggregation: 'avg-per-cycle-occurrence',
+                    format: 'decimal',
+                },
+            ],
+            legend: { enabled: false },
+            tooltip: { enabled: true },
+            theme: {
+                palette: ['#e0f2fe', '#0284c7', '#1e3a8a'],
+            },
+        },
+    },
+};
 
 function buildPraxisChartMockWidgetPage(adapter) {
     return {
@@ -12165,7 +13720,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: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton"], outputs: ["pageChange", "persistenceChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "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: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "authoringCapabilities", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId", "showWidgetAssistantButton", "blockMutations"], outputs: ["pageChange", "persistenceChange", "pageAuthoringChange", "widgetEvent", "widgetSelectionChange", "widgetAssistantRequested", "widgetDiagnosticsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
             type: Component,
@@ -12324,7 +13879,7 @@ class ChartEditorPreviewMapperService {
             && localData.length > 0;
         const baseRows = hasLocalData
             ? localData.map((row) => ({ ...row }))
-            : this.buildRows(document, domainCategories);
+            : this.buildRows(document, domainCategories, config);
         return {
             config,
             data: variationIndex % 2 === 1
@@ -12385,8 +13940,11 @@ class ChartEditorPreviewMapperService {
             return nextRow;
         });
     }
-    buildRows(document, domainCategories) {
-        const dimensionField = document.dimensions?.[0]?.field?.trim();
+    buildRows(document, domainCategories, config) {
+        const rawDimensionField = document.dimensions?.[0]?.field?.trim();
+        const dimensionField = document.dimensions?.[0]?.extraction && config?.axes?.x?.field?.trim()
+            ? config.axes.x.field.trim()
+            : rawDimensionField;
         const metrics = document.metrics ?? [];
         if (!dimensionField || !metrics.length) {
             return [];
@@ -12435,6 +13993,30 @@ class ChartEditorPreviewMapperService {
             : cleanedDomainCategories.length > 0
                 ? cleanedDomainCategories
                 : ['Alpha', 'Beta', 'Gamma'];
+        const resolvedSecondaryField = (config?.axes?.y?.type === 'category'
+            ? config.axes.y.field?.trim()
+            : config?.series?.[0]?.secondaryCategoryField?.trim()) || document.dimensions?.[1]?.field?.trim();
+        if (document.kind === 'heatmap') {
+            const secondaryField = resolvedSecondaryField && resolvedSecondaryField !== dimensionField
+                ? resolvedSecondaryField
+                : `${dimensionField}_secondary`;
+            const primaryMetricField = metrics[0]?.field;
+            if (!primaryMetricField) {
+                return [];
+            }
+            const seriesSlots = ['08:00', '12:00', '18:00'];
+            const rows = [];
+            categories.slice(0, 3).forEach((category, xIdx) => {
+                seriesSlots.forEach((slot, yIdx) => {
+                    rows.push({
+                        [dimensionField]: category,
+                        [secondaryField]: slot,
+                        [primaryMetricField]: (xIdx + 1) * 12 + yIdx * 8,
+                    });
+                });
+            });
+            return rows;
+        }
         return categories.map((category, index) => {
             const row = {
                 [dimensionField]: category,
@@ -12503,6 +14085,7 @@ class PraxisChartConfigEditor {
         'pyramid',
         'treemap',
         'gauge',
+        'heatmap',
     ];
     sourceKinds = ['praxis.stats', 'derived'];
     operations = ['group-by', 'timeseries', 'distribution', 'comparison'];
@@ -12523,7 +14106,21 @@ class PraxisChartConfigEditor {
         'PREVIOUS_CALENDAR_PERIOD',
     ];
     dimensionRoles = ['category', 'series', 'segment', 'time', 'value'];
-    metricAggregations = ['sum', 'count', 'distinct-count', 'avg', 'min', 'max'];
+    dimensionExtractions = [
+        'HOUR_OF_DAY',
+        'DAY_OF_WEEK',
+        'DAY_OF_MONTH',
+        'MONTH_OF_YEAR',
+    ];
+    metricAggregations = [
+        'sum',
+        'count',
+        'distinct-count',
+        'avg',
+        'avg-per-cycle-occurrence',
+        'min',
+        'max',
+    ];
     metricAxes = ['primary', 'secondary'];
     metricSeriesKinds = ['bar', 'line', 'area'];
     motionPresets = ['subtle', 'standard', 'expressive'];
@@ -12756,6 +14353,26 @@ class PraxisChartConfigEditor {
     }
     setKind(value) {
         this.patchDocument((document) => {
+            if (value === 'heatmap') {
+                const currentDims = document.dimensions ?? [];
+                const firstDim = currentDims[0] ?? { field: '', role: 'category' };
+                const secondDim = currentDims[1]
+                    ? { ...currentDims[1], role: 'series' }
+                    : { field: '', role: 'series' };
+                return {
+                    ...document,
+                    kind: value,
+                    gauge: undefined,
+                    dimensions: [firstDim, secondDim],
+                    metrics: document.metrics?.slice(0, 1),
+                    source: document.source.kind === 'praxis.stats'
+                        ? {
+                            ...document.source,
+                            operation: 'group-by',
+                        }
+                        : document.source,
+                };
+            }
             if (value !== 'gauge') {
                 return {
                     ...document,
@@ -12984,7 +14601,7 @@ class PraxisChartConfigEditor {
         void this.resolveSelectedResource(resource, option);
     }
     setOperation(value) {
-        if (this.doc().kind === 'gauge' && value !== 'group-by') {
+        if ((this.doc().kind === 'gauge' || this.doc().kind === 'heatmap') && value !== 'group-by') {
             return;
         }
         this.patchDocument((document) => {
@@ -13122,18 +14739,36 @@ class PraxisChartConfigEditor {
         this.setGaugeScaleValue('max', value);
     }
     addDimension() {
+        if (!this.canAddDimension()) {
+            return;
+        }
+        this.patchDocument((document) => {
+            const currentDims = document.dimensions ?? [];
+            const nextRole = currentDims.length === 1 ? 'series' : 'category';
+            return {
+                ...document,
+                dimensions: [
+                    ...currentDims,
+                    { field: '', role: nextRole },
+                ],
+            };
+        });
+    }
+    removeDimension(index) {
+        if (!this.canRemoveDimension()) {
+            return;
+        }
         this.patchDocument((document) => ({
             ...document,
-            dimensions: [
-                ...(document.dimensions ?? []),
-                { field: '', role: 'category' },
-            ],
+            dimensions: (document.dimensions ?? []).filter((_, currentIndex) => currentIndex !== index),
         }));
     }
-    removeDimension(index) {
+    setDimensionExtraction(index, extraction) {
         this.patchDocument((document) => ({
             ...document,
-            dimensions: (document.dimensions ?? []).filter((_, currentIndex) => currentIndex !== index),
+            dimensions: (document.dimensions ?? []).map((dimension, currentIndex) => currentIndex === index
+                ? { ...dimension, extraction: extraction || undefined }
+                : dimension),
         }));
     }
     setDimensionField(index, field) {
@@ -13223,12 +14858,31 @@ class PraxisChartConfigEditor {
         }));
     }
     setMetricAggregation(index, aggregation) {
-        this.patchDocument((document) => ({
-            ...document,
-            metrics: (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
+        this.patchDocument((document) => {
+            const nextMetrics = (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
                 ? { ...metric, aggregation }
-                : metric),
-        }));
+                : metric);
+            if (aggregation === 'avg-per-cycle-occurrence' && document.source.kind === 'praxis.stats') {
+                const currentOpts = document.source.options ?? {};
+                const hasPeriod = Boolean(currentOpts.periodPreset);
+                return {
+                    ...document,
+                    metrics: nextMetrics,
+                    source: {
+                        ...document.source,
+                        options: {
+                            ...currentOpts,
+                            timezone: currentOpts.timezone || 'UTC',
+                            ...(hasPeriod ? {} : { periodPreset: 'LAST_30_DAYS' }),
+                        },
+                    },
+                };
+            }
+            return {
+                ...document,
+                metrics: nextMetrics,
+            };
+        });
     }
     setMetricAxis(index, axis) {
         this.patchDocument((document) => ({
@@ -13450,7 +15104,7 @@ class PraxisChartConfigEditor {
         const availableOperations = !selectedResource
             ? this.resourceOptions().length ? this.operations : []
             : selectedResource.operations?.length ? selectedResource.operations : [];
-        if (this.doc().kind === 'gauge') {
+        if (this.doc().kind === 'gauge' || this.doc().kind === 'heatmap') {
             return availableOperations.filter((operation) => operation === 'group-by');
         }
         return availableOperations;
@@ -13618,8 +15272,28 @@ class PraxisChartConfigEditor {
     metrics() {
         return this.doc().metrics ?? [];
     }
-    canAddMetric() {
+    canAddDimension() {
+        const count = this.dimensions().length;
         if (this.doc().kind === 'gauge') {
+            return count < 1;
+        }
+        if (this.doc().kind === 'heatmap') {
+            return count < 2;
+        }
+        if (this.doc().source.kind === 'praxis.stats' && this.doc().source.operation === 'group-by') {
+            return count < 2;
+        }
+        return true;
+    }
+    canRemoveDimension() {
+        const count = this.dimensions().length;
+        if (this.doc().kind === 'heatmap') {
+            return count > 2;
+        }
+        return count > 1;
+    }
+    canAddMetric() {
+        if (this.doc().kind === 'gauge' || this.doc().kind === 'heatmap') {
             return false;
         }
         return this.doc().kind !== 'scatter' || this.metrics().length < 2;
@@ -13666,9 +15340,18 @@ class PraxisChartConfigEditor {
     metricAggregationOptions(fieldName) {
         const field = this.fieldOptions('metric').find((option) => option.field === fieldName) ??
             this.availableFields().find((option) => option.field === fieldName);
-        const availableAggregations = field?.aggregations?.length
+        const hasTemporalExtraction = (this.doc().dimensions ?? []).some((dim) => Boolean(dim.extraction));
+        const currentUsesCycleOccurrence = (this.doc().metrics ?? []).some((metric) => metric.aggregation === 'avg-per-cycle-occurrence');
+        const baseAggregations = field?.aggregations?.length
             ? field.aggregations.filter((aggregation) => this.metricAggregations.includes(aggregation))
-            : this.metricAggregations;
+            : this.metricAggregations.filter((aggregation) => aggregation !== 'avg-per-cycle-occurrence'
+                || hasTemporalExtraction
+                || currentUsesCycleOccurrence);
+        const availableAggregations = (hasTemporalExtraction || currentUsesCycleOccurrence)
+            && !baseAggregations.includes('avg-per-cycle-occurrence')
+            && (this.doc().source.kind !== 'praxis.stats' || this.doc().source.operation === 'group-by')
+            ? [...baseAggregations, 'avg-per-cycle-occurrence']
+            : baseAggregations;
         return this.doc().source.kind === 'praxis.stats' && this.doc().source.operation === 'comparison'
             ? availableAggregations.filter((aggregation) => ['count', 'distinct-count', 'sum'].includes(aggregation))
             : availableAggregations;
@@ -13710,6 +15393,9 @@ class PraxisChartConfigEditor {
     showGaugePanel() {
         return this.doc().kind === 'gauge';
     }
+    showHeatmapPanel() {
+        return this.doc().kind === 'heatmap';
+    }
     gaugeMinValue() {
         const min = this.doc().gauge?.scale.min;
         return min === undefined ? '' : String(min);
@@ -13922,7 +15608,9 @@ class PraxisChartConfigEditor {
         const isTemporal = doc.kind === 'line' ||
             doc.kind === 'area' ||
             (doc.source.kind === 'praxis.stats' && doc.source.operation === 'timeseries');
-        const isStacked = doc.kind === 'stacked-bar' || doc.kind === 'stacked-area';
+        const isStacked = doc.kind === 'stacked-bar' ||
+            doc.kind === 'stacked-area' ||
+            doc.kind === 'heatmap';
         const tokenize = (raw) => String(raw || '')
             .trim()
             .normalize('NFD')
@@ -14080,7 +15768,9 @@ class PraxisChartConfigEditor {
             (!currentDimField ||
                 currentDimField === 'category' ||
                 (validDimSet.size > 0 && !validDimSet.has(currentDimField)));
-        const isStacked = this.doc().kind === 'stacked-bar' || this.doc().kind === 'stacked-area';
+        const isStacked = this.doc().kind === 'stacked-bar' ||
+            this.doc().kind === 'stacked-area' ||
+            this.doc().kind === 'heatmap';
         const seriesNeedsCalibration = isStacked &&
             Boolean(rec.seriesField) &&
             (!currentSeriesField ||
@@ -14226,12 +15916,18 @@ class PraxisChartConfigEditor {
                 && Number.isFinite(scaleMin)
                 && Number.isFinite(scaleMax)
                 && scaleMax > scaleMin;
+            const fallbackDimensions = base.kind === 'heatmap'
+                ? [
+                    validDimensions[0] ?? { field: 'category', role: 'category' },
+                    validDimensions[1] ?? { field: 'series', role: 'series' },
+                ]
+                : validDimensions.length
+                    ? validDimensions
+                    : [{ field: 'category', role: 'category' }];
             const syntheticContract = {
                 ...structuredClone(base),
                 source: { kind: 'derived' },
-                dimensions: validDimensions.length
-                    ? validDimensions
-                    : [{ field: 'category', role: 'category' }],
+                dimensions: fallbackDimensions,
                 metrics: fallbackMetrics,
                 gauge: base.kind === 'gauge'
                     ? {
@@ -14909,7 +16605,7 @@ class PraxisChartConfigEditor {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, localDataInput: { classPropertyName: "localDataInput", publicName: "localData", 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", localDataChange: "localDataChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\" [class.editor-shell--preview-active]=\"activeSection() === 'preview'\">\n  <div class=\"editor-nav\" role=\"toolbar\" [attr.aria-label]=\"t('praxis.charts.editor.sectionsNav', 'Se\u00E7\u00F5es do editor')\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.id]=\"'chart-editor-tab-' + section.id\"\n        aria-controls=\"chart-editor-tabpanel\"\n        [attr.aria-pressed]=\"activeSection() === section.id\"\n        [tabIndex]=\"activeSection() === section.id ? 0 : -1\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        [class.editor-nav__preview-btn]=\"section.id === 'preview'\"\n        [class.editor-nav__has-error]=\"sectionHasError(section.id)\"\n        (click)=\"setSection(section.id)\"\n        (keydown)=\"onSectionNavKeydown($event, $index)\"\n      >\n        <span>{{ t(section.labelKey, section.fallback) }}</span>\n        @if (sectionIssueCount(section.id) > 0) {\n          <span\n            class=\"editor-nav__badge\"\n            aria-hidden=\"true\"\n            [class.editor-nav__badge--error]=\"sectionHasError(section.id)\"\n            [attr.data-testid]=\"'chart-editor-section-badge-' + section.id\"\n          >\n            {{ sectionIssueCount(section.id) }}\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div\n      class=\"editor-form\"\n      id=\"chart-editor-tabpanel\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'chart-editor-tab-' + activeSection()\"\n    >\n      @switch (activeSection()) {\n        @case ('general') {\n          <mat-card class=\"editor-card\">\n            <mat-card-content class=\"editor-grid\">\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                  @for (kind of chartKinds; track kind) {\n                    <mat-option [value]=\"kind\">\n                      {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                  @for (mode of sizingModes; track mode) {\n                    <mat-option [value]=\"mode\">\n                      {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                    </mat-option>\n                  }\n                </mat-select>\n                <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n              </mat-form-field>\n\n              @if (sizingModeValue() === 'fixed') {\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                </mat-form-field>\n              }\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n              </mat-form-field>\n            </mat-card-content>\n          </mat-card>\n        }\n\n        @case ('data') {\n          <div class=\"editor-stack\">\n            <mat-card class=\"editor-card\">\n              <mat-card-content class=\"editor-stack\">\n                <p class=\"editor-caption\" data-testid=\"chart-editor-effective-origin\">\n                  {{ effectiveDataOriginSummary() }}\n                </p>\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-resource\"\n                        [ngModel]=\"resourceValue()\"\n                        (ngModelChange)=\"setResource($event)\"\n                        (openedChange)=\"setResourceSearchTerm('')\"\n                        [disabled]=\"isReadonly() || resourceCatalogUnavailable()\"\n                      >\n                        @if (selectedResourceOption(); as selectedRes) {\n                          <mat-select-trigger>\n                            <span class=\"editor-select-trigger\">\n                              <mat-icon class=\"editor-select-trigger__icon\" [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                              <span class=\"editor-select-trigger__label\">{{ selectedRes.label }}</span>\n                              <span class=\"editor-select-trigger__code\">{{ selectedRes.path }}</span>\n                            </span>\n                          </mat-select-trigger>\n                        }\n                        <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                          <mat-icon aria-hidden=\"true\">search</mat-icon>\n                          <input\n                            type=\"search\"\n                            data-testid=\"chart-editor-resource-search\"\n                            [placeholder]=\"t('praxis.charts.editor.field.resourceSearchPlaceholder', 'Search by name, key, or endpoint...')\"\n                            [ngModel]=\"resourceSearchTerm()\"\n                            (ngModelChange)=\"setResourceSearchTerm($event)\"\n                            (keydown)=\"onSelectSearchKeydown($event)\"\n                          />\n                        </div>\n                        @for (resource of filteredResourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\" class=\"editor-rich-mat-option\">\n                            <div class=\"editor-rich-option\">\n                              <span class=\"editor-rich-option__icon\" aria-hidden=\"true\">\n                                <mat-icon [praxisIcon]=\"resource.icon || 'api'\"></mat-icon>\n                              </span>\n                              <div class=\"editor-rich-option__body\">\n                                <div class=\"editor-rich-option__header\">\n                                  <span class=\"editor-rich-option__label\">{{ resource.label }}</span>\n                                  @if (resource.group) {\n                                    <span class=\"editor-rich-option__badge\">{{ resource.group }}</span>\n                                  }\n                                  @if (resource.readOnly) {\n                                    <span class=\"editor-rich-option__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                                  }\n                                </div>\n                                <span class=\"editor-rich-option__code\">\n                                  {{ resource.path }}{{ resource.id && resource.id !== resource.path && resource.id !== resource.label ? ' \u00B7 ' + resource.id : '' }}\n                                </span>\n                                @if (resource.description) {\n                                  <span class=\"editor-rich-option__description\">{{ resource.description }}</span>\n                                }\n                              </div>\n                            </div>\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || isResolvingResource() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (isResolvingResource()) {\n                        <mat-hint data-testid=\"chart-editor-resolving-resource\">\n                          {{ t('praxis.charts.editor.catalog.resolvingResource', 'Resolving governed stats operations and fields for the selected resource...') }}\n                        </mat-hint>\n                      } @else if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (doc().source.kind === 'praxis.stats' && selectedResourceOption(); as selectedRes) {\n                  <div class=\"editor-resource-summary\" data-testid=\"chart-editor-resource-summary\">\n                    <span class=\"editor-resource-summary__icon\" aria-hidden=\"true\">\n                      <mat-icon [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                    </span>\n                    <div class=\"editor-resource-summary__body\">\n                      <div class=\"editor-resource-summary__header\">\n                        <strong>{{ selectedRes.label }}</strong>\n                        @if (selectedRes.group) {\n                          <span class=\"editor-resource-summary__badge\">{{ selectedRes.group }}</span>\n                        }\n                        @if (selectedRes.readOnly) {\n                          <span class=\"editor-resource-summary__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                        }\n                      </div>\n                      <span class=\"editor-resource-summary__code\">\n                        {{ selectedRes.path }}{{ selectedRes.id && selectedRes.id !== selectedRes.path && selectedRes.id !== selectedRes.label ? ' \u00B7 ' + selectedRes.id : '' }}\n                      </span>\n                      @if (selectedRes.description) {\n                        <p class=\"editor-resource-summary__description\">{{ selectedRes.description }}</p>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-card-content>\n            </mat-card>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            (openedChange)=\"setFieldSearchTerm('')\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                              <mat-icon aria-hidden=\"true\">search</mat-icon>\n                              <input\n                                type=\"search\"\n                                [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                [ngModel]=\"fieldSearchTerm()\"\n                                (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                (keydown)=\"onSelectSearchKeydown($event)\"\n                              />\n                            </div>\n                            @for (field of filteredFieldOptions('time', comparisonPeriodFieldValue()); track field.field) {\n                              <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                <div class=\"editor-rich-option\">\n                                  <div class=\"editor-rich-option__body\">\n                                    <div class=\"editor-rich-option__header\">\n                                      <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                      @if (field.type) {\n                                        <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                      }\n                                    </div>\n                                    @if (field.label && field.label !== field.field) {\n                                      <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                    }\n                                    @if (field.description) {\n                                      <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                        }\n                        @if (!fieldOptions('time').length) {\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (doc().source.kind === 'derived') {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-local-data\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.localData.title', 'Local dataset (inputs.data)') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.localData.caption', 'Edit the local records rendered when the data source is derived.') }}\n                      </p>\n\n                      @if (canConsolidateGaugeLocalData()) {\n                        <div class=\"editor-row-actions\">\n                          <button\n                            mat-stroked-button\n                            type=\"button\"\n                            data-testid=\"chart-local-data-consolidate-gauge\"\n                            (click)=\"consolidateGaugeLocalData()\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            {{ t('praxis.charts.editor.localData.consolidateGauge', 'Consolidate to 1 bucket for gauge') }}\n                          </button>\n                        </div>\n                      }\n\n                      @if (localDataRows().length) {\n                        @for (row of localDataRows(); track $index; let rowIndex = $index) {\n                          <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-local-data-row-' + rowIndex\">\n                            <div class=\"editor-grid\">\n                              @for (dimField of localDataDimensionFields(); track dimField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ dimField }}</mat-label>\n                                  <input\n                                    matInput\n                                    [attr.data-testid]=\"'chart-local-data-dim-' + rowIndex + '-' + dimField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, dimField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, dimField, $event, 'dimension')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                              @for (metricField of localDataMetricFields(); track metricField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ metricField }}</mat-label>\n                                  <input\n                                    matInput\n                                    type=\"number\"\n                                    [attr.data-testid]=\"'chart-local-data-metric-' + rowIndex + '-' + metricField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, metricField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, metricField, $event, 'metric')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                            </div>\n                            <div class=\"editor-row-actions\">\n                              <button\n                                mat-button\n                                type=\"button\"\n                                [attr.data-testid]=\"'chart-local-data-remove-row-' + rowIndex\"\n                                (click)=\"removeLocalDataRow(rowIndex)\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                {{ t('praxis.charts.editor.localData.removeRow', 'Remove record') }}\n                              </button>\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"editor-empty\" data-testid=\"chart-local-data-empty\">\n                          {{ t('praxis.charts.editor.localData.empty', 'No local records configured yet. Add a record to replace the synthetic preview sample.') }}\n                        </div>\n                      }\n\n                      <div>\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-local-data-add-row\"\n                          (click)=\"addLocalDataRow()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          {{ t('praxis.charts.editor.localData.addRow', 'Add record') }}\n                        </button>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content class=\"editor-stack\">\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                  <p class=\"editor-caption\" data-testid=\"chart-editor-motion-hint\">\n                    {{ t('praxis.charts.editor.motion.hint', 'Controls initial entrance timing and smooth transitions when filters or query context change, with automatic volume thresholds for high-density datasets.') }}\n                  </p>\n\n                  <div>\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-simulate-motion\"\n                      (click)=\"simulateMotionTransition()\"\n                      [disabled]=\"normalizedDocument().motion?.enabled === false || !effectivePreview()\"\n                    >\n                      {{ t('praxis.charts.editor.motion.simulate', 'Simulate transition') }}\n                    </button>\n                  </div>\n                </mat-card-content>\n              </mat-card>\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-toggle-cluster\">\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                    <div class=\"editor-grid\">\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                    </div>\n\n                    @if (canApplyDomainSemanticPalette()) {\n                      <div class=\"editor-row-actions\">\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-editor-apply-domain-palette\"\n                          (click)=\"applyDomainSemanticPalette()\"\n                          [disabled]=\"isReadonly()\"\n                          [title]=\"t('praxis.charts.editor.appearance.applyDomainPaletteHint', 'Generates a custom palette with semantic colors (success, warning, danger, info) from the dimension categories.')\"\n                        >\n                          <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                          {{ t('praxis.charts.editor.appearance.applyDomainPalette', 'Apply domain semantic colors') }}\n                        </button>\n                      </div>\n                    }\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\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of tokenPaletteSwatches(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                          </span>\n                        }\n                      </div>\n                    } @else {\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of customPaletteColors(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <input\n                              type=\"color\"\n                              class=\"editor-palette-color-input\"\n                              [attr.data-testid]=\"'chart-editor-palette-color-' + $index\"\n                              [value]=\"swatchHexValue(swatch, $index)\"\n                              (input)=\"setCustomPaletteColorAt($index, $any($event.target).value)\"\n                              [disabled]=\"isReadonly()\"\n                            />\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                            <button\n                              type=\"button\"\n                              class=\"editor-palette-swatch-remove\"\n                              [attr.data-testid]=\"'chart-editor-palette-remove-' + $index\"\n                              (click)=\"removeCustomPaletteColor($index)\"\n                              [disabled]=\"isReadonly()\"\n                              [attr.aria-label]=\"t('praxis.charts.editor.appearance.removePaletteColor', 'Remove color')\"\n                            >\n                              \u00D7\n                            </button>\n                          </span>\n                        }\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          class=\"editor-palette-add-btn\"\n                          data-testid=\"chart-editor-add-palette-color\"\n                          (click)=\"addCustomPaletteColor()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          + {{ t('praxis.charts.editor.appearance.addPaletteColor', 'Add color') }}\n                        </button>\n                      </div>\n\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=\"2\"\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-state-group\">\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=\"1\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [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 (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (canApplySemanticAnalyticsMapping()) {\n                  <div class=\"editor-row-actions\">\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-smart-map-analytics\"\n                      (click)=\"applySemanticAnalyticsMapping()\"\n                      [disabled]=\"isReadonly()\"\n                      [title]=\"t('praxis.charts.editor.analytics.smartMapHint', 'Automatically selects the best dimension, metric, and aggregation from the governed field catalog.')\"\n                    >\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ t('praxis.charts.editor.analytics.smartMap', 'Suggest dimension & metric from schema') }}\n                    </button>\n                  </div>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select\n                                [ngModel]=\"dimension.field || ''\"\n                                (ngModelChange)=\"setDimensionField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('dimension', dimension.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('dimension').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select\n                                [ngModel]=\"metric.field || ''\"\n                                (ngModelChange)=\"setMetricField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('metric', metric.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('metric').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content>\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                </mat-card-content>\n              </mat-card>\n            }\n          }\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\" [class.editor-issue--warning]=\"issue.severity === 'warning'\">\n                  <div class=\"editor-issue__header\">\n                    <strong>{{ issue.field }}</strong>\n                    @if (issueTargetSection(issue); as targetSection) {\n                      <button\n                        mat-button\n                        type=\"button\"\n                        class=\"editor-issue__jump\"\n                        [attr.data-testid]=\"'chart-editor-issue-jump-' + issue.code\"\n                        [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(targetSection) })\"\n                        (click)=\"setSection(targetSection)\"\n                      >\n                        {{ sectionLabel(targetSection) }} \u2192\n                      </button>\n                    }\n                  </div>\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()) {\n            <div\n              class=\"editor-empty editor-empty--actionable editor-preview-degraded\"\n              data-testid=\"chart-editor-preview-degraded-warning\"\n            >\n              <span>{{\n                effectivePreview()\n                  ? t('praxis.charts.editor.preview.degradedNotice', 'Aesthetic simulation active with synthetic sample data while contract validation issues remain open.')\n                  : t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.')\n              }}</span>\n              @if (firstInvalidSection(); as invalidSection) {\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"chart-editor-preview-jump-invalid\"\n                  [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(invalidSection) })\"\n                  (click)=\"setSection(invalidSection)\"\n                >\n                  {{ sectionLabel(invalidSection) }} \u2192\n                </button>\n              }\n            </div>\n          }\n          @if (effectivePreview(); 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            <p class=\"editor-caption\" data-testid=\"chart-editor-preview-origin\">\n              {{\n                doc().source.kind === 'praxis.stats'\n                  ? t('praxis.charts.editor.preview.originStatsSynthetic', 'Previewing synthetic sample for governed backend stats (praxis.stats).')\n                  : chartPreview.dataOrigin === 'local'\n                    ? t('praxis.charts.editor.preview.originLocal', 'Previewing widget local dataset (inputs.data).')\n                    : t('praxis.charts.editor.preview.originSynthetic', 'Previewing synthetic sample data (no local dataset records).')\n              }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:16px;min-width:0}.editor-nav{display:flex;gap:6px;flex-wrap:wrap;padding:4px;border-radius:14px;background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .04));border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent)}.editor-nav button{border-radius:10px;border-color:transparent;display:inline-flex;align-items:center;gap:6px}.editor-nav button.active{background:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 22%,transparent);color:var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4));border-color:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 48%,transparent);font-weight:600}.editor-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;font-size:.7rem;font-weight:700;line-height:1;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 24%,transparent);color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface, inherit))}.editor-nav__badge--error{background:color-mix(in srgb,var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e)) 24%,transparent);color:var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e))}:host ::ng-deep .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mat-mdc-form-field-error-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding-top:4px;line-height:1.35}:host ::ng-deep .mat-mdc-form-field-bottom-align:before{display:none}.editor-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 72%,transparent);background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .03))}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}.editor-toggle-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}.editor-stack{display:grid;gap:14px}.editor-state-group{padding-top:14px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 48%,transparent)}.editor-state-group:first-child{padding-top:0;border-top:0}.editor-palette-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.editor-palette-swatch-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 68%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 88%,transparent);font-size:.76rem}.editor-palette-swatch-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(128,128,128,.35);flex-shrink:0}.editor-palette-color-input{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.editor-palette-swatch-code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.74rem;color:var(--md-sys-color-on-surface, inherit)}.editor-palette-swatch-remove{appearance:none;border:0;background:transparent;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.95rem;line-height:1;padding:0 2px;cursor:pointer}.editor-row-card{padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 54%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 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:12px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 10%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 24%,transparent)}.editor-issue--warning{background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 26%,transparent)}.editor-issue__header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}.editor-issue strong{display:block;font-size:.84rem}.editor-issue__jump{min-height:26px;padding:0 8px;font-size:.76rem}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem;line-height:1.45}.editor-empty{padding:16px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 52%,transparent);border:1px dashed color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent);color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem}.editor-empty--actionable{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.editor-select-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}.editor-select-trigger__icon{width:18px;height:18px;font-size:18px;flex-shrink:0;color:var(--md-sys-color-primary, #1263b4)}.editor-select-trigger__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.editor-select-trigger__code{flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,currentColor 8%,transparent);color:color-mix(in srgb,currentColor 72%,transparent)}::ng-deep .editor-select-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--md-sys-color-surface-container-highest, #f4f6fa);border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 45%,transparent)}::ng-deep .editor-select-search mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-on-surface-variant, #5a5d67);flex-shrink:0}::ng-deep .editor-select-search input{width:100%;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:.85rem}::ng-deep .mat-mdc-option.editor-rich-mat-option{min-height:54px;height:auto;padding-block:8px;align-items:flex-start}::ng-deep .editor-rich-option{display:flex;align-items:flex-start;gap:10px;min-width:0;width:100%;line-height:1.25}::ng-deep .editor-rich-option__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}::ng-deep .editor-rich-option__icon mat-icon{width:16px;height:16px;font-size:16px}::ng-deep .editor-rich-option__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}::ng-deep .editor-rich-option__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}::ng-deep .editor-rich-option__label{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__badge,.editor-resource-summary__badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:.68rem;font-weight:600;background:color-mix(in srgb,currentColor 10%,transparent);color:color-mix(in srgb,currentColor 78%,transparent);white-space:nowrap}::ng-deep .editor-rich-option__code,.editor-resource-summary__code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;color:var(--md-sys-color-primary, #1263b4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__description,.editor-resource-summary__description{margin:0;font-size:.75rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.editor-resource-summary{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 6%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent)}.editor-resource-summary__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.editor-resource-summary__icon mat-icon{width:16px;height:16px;font-size:16px}.editor-resource-summary__body{display:grid;gap:2px;min-width:0;flex:1 1 auto}.editor-resource-summary__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}.editor-preview-degraded{margin-bottom:12px;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-style:solid;border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 32%,transparent)}@container praxis-chart-editor (min-width: 841px){.editor-nav__preview-btn:not(.active){display:none}}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-shell--preview-active .editor-form{display:none}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i7.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: "directive", type: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "resourceKey", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, localDataInput: { classPropertyName: "localDataInput", publicName: "localData", 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", localDataChange: "localDataChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\" [class.editor-shell--preview-active]=\"activeSection() === 'preview'\">\n  <div class=\"editor-nav\" role=\"toolbar\" [attr.aria-label]=\"t('praxis.charts.editor.sectionsNav', 'Se\u00E7\u00F5es do editor')\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.id]=\"'chart-editor-tab-' + section.id\"\n        aria-controls=\"chart-editor-tabpanel\"\n        [attr.aria-pressed]=\"activeSection() === section.id\"\n        [tabIndex]=\"activeSection() === section.id ? 0 : -1\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        [class.editor-nav__preview-btn]=\"section.id === 'preview'\"\n        [class.editor-nav__has-error]=\"sectionHasError(section.id)\"\n        (click)=\"setSection(section.id)\"\n        (keydown)=\"onSectionNavKeydown($event, $index)\"\n      >\n        <span>{{ t(section.labelKey, section.fallback) }}</span>\n        @if (sectionIssueCount(section.id) > 0) {\n          <span\n            class=\"editor-nav__badge\"\n            aria-hidden=\"true\"\n            [class.editor-nav__badge--error]=\"sectionHasError(section.id)\"\n            [attr.data-testid]=\"'chart-editor-section-badge-' + section.id\"\n          >\n            {{ sectionIssueCount(section.id) }}\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div\n      class=\"editor-form\"\n      id=\"chart-editor-tabpanel\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'chart-editor-tab-' + activeSection()\"\n    >\n      @switch (activeSection()) {\n        @case ('general') {\n          <mat-card class=\"editor-card\">\n            <mat-card-content class=\"editor-grid\">\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                  @for (kind of chartKinds; track kind) {\n                    <mat-option [value]=\"kind\">\n                      {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                  @for (mode of sizingModes; track mode) {\n                    <mat-option [value]=\"mode\">\n                      {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                    </mat-option>\n                  }\n                </mat-select>\n                <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n              </mat-form-field>\n\n              @if (sizingModeValue() === 'fixed') {\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                </mat-form-field>\n              }\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n              </mat-form-field>\n            </mat-card-content>\n          </mat-card>\n        }\n\n        @case ('data') {\n          <div class=\"editor-stack\">\n            <mat-card class=\"editor-card\">\n              <mat-card-content class=\"editor-stack\">\n                <p class=\"editor-caption\" data-testid=\"chart-editor-effective-origin\">\n                  {{ effectiveDataOriginSummary() }}\n                </p>\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-resource\"\n                        [ngModel]=\"resourceValue()\"\n                        (ngModelChange)=\"setResource($event)\"\n                        (openedChange)=\"setResourceSearchTerm('')\"\n                        [disabled]=\"isReadonly() || resourceCatalogUnavailable()\"\n                      >\n                        @if (selectedResourceOption(); as selectedRes) {\n                          <mat-select-trigger>\n                            <span class=\"editor-select-trigger\">\n                              <mat-icon class=\"editor-select-trigger__icon\" [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                              <span class=\"editor-select-trigger__label\">{{ selectedRes.label }}</span>\n                              <span class=\"editor-select-trigger__code\">{{ selectedRes.path }}</span>\n                            </span>\n                          </mat-select-trigger>\n                        }\n                        <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                          <mat-icon aria-hidden=\"true\">search</mat-icon>\n                          <input\n                            type=\"search\"\n                            data-testid=\"chart-editor-resource-search\"\n                            [placeholder]=\"t('praxis.charts.editor.field.resourceSearchPlaceholder', 'Search by name, key, or endpoint...')\"\n                            [ngModel]=\"resourceSearchTerm()\"\n                            (ngModelChange)=\"setResourceSearchTerm($event)\"\n                            (keydown)=\"onSelectSearchKeydown($event)\"\n                          />\n                        </div>\n                        @for (resource of filteredResourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\" class=\"editor-rich-mat-option\">\n                            <div class=\"editor-rich-option\">\n                              <span class=\"editor-rich-option__icon\" aria-hidden=\"true\">\n                                <mat-icon [praxisIcon]=\"resource.icon || 'api'\"></mat-icon>\n                              </span>\n                              <div class=\"editor-rich-option__body\">\n                                <div class=\"editor-rich-option__header\">\n                                  <span class=\"editor-rich-option__label\">{{ resource.label }}</span>\n                                  @if (resource.group) {\n                                    <span class=\"editor-rich-option__badge\">{{ resource.group }}</span>\n                                  }\n                                  @if (resource.readOnly) {\n                                    <span class=\"editor-rich-option__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                                  }\n                                </div>\n                                <span class=\"editor-rich-option__code\">\n                                  {{ resource.path }}{{ resource.id && resource.id !== resource.path && resource.id !== resource.label ? ' \u00B7 ' + resource.id : '' }}\n                                </span>\n                                @if (resource.description) {\n                                  <span class=\"editor-rich-option__description\">{{ resource.description }}</span>\n                                }\n                              </div>\n                            </div>\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || isResolvingResource() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (isResolvingResource()) {\n                        <mat-hint data-testid=\"chart-editor-resolving-resource\">\n                          {{ t('praxis.charts.editor.catalog.resolvingResource', 'Resolving governed stats operations and fields for the selected resource...') }}\n                        </mat-hint>\n                      } @else if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (doc().source.kind === 'praxis.stats' && selectedResourceOption(); as selectedRes) {\n                  <div class=\"editor-resource-summary\" data-testid=\"chart-editor-resource-summary\">\n                    <span class=\"editor-resource-summary__icon\" aria-hidden=\"true\">\n                      <mat-icon [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                    </span>\n                    <div class=\"editor-resource-summary__body\">\n                      <div class=\"editor-resource-summary__header\">\n                        <strong>{{ selectedRes.label }}</strong>\n                        @if (selectedRes.group) {\n                          <span class=\"editor-resource-summary__badge\">{{ selectedRes.group }}</span>\n                        }\n                        @if (selectedRes.readOnly) {\n                          <span class=\"editor-resource-summary__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                        }\n                      </div>\n                      <span class=\"editor-resource-summary__code\">\n                        {{ selectedRes.path }}{{ selectedRes.id && selectedRes.id !== selectedRes.path && selectedRes.id !== selectedRes.label ? ' \u00B7 ' + selectedRes.id : '' }}\n                      </span>\n                      @if (selectedRes.description) {\n                        <p class=\"editor-resource-summary__description\">{{ selectedRes.description }}</p>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-card-content>\n            </mat-card>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            (openedChange)=\"setFieldSearchTerm('')\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                              <mat-icon aria-hidden=\"true\">search</mat-icon>\n                              <input\n                                type=\"search\"\n                                [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                [ngModel]=\"fieldSearchTerm()\"\n                                (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                (keydown)=\"onSelectSearchKeydown($event)\"\n                              />\n                            </div>\n                            @for (field of filteredFieldOptions('time', comparisonPeriodFieldValue()); track field.field) {\n                              <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                <div class=\"editor-rich-option\">\n                                  <div class=\"editor-rich-option__body\">\n                                    <div class=\"editor-rich-option__header\">\n                                      <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                      @if (field.type) {\n                                        <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                      }\n                                    </div>\n                                    @if (field.label && field.label !== field.field) {\n                                      <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                    }\n                                    @if (field.description) {\n                                      <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                        }\n                        @if (!fieldOptions('time').length) {\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (doc().source.kind === 'derived') {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-local-data\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.localData.title', 'Local dataset (inputs.data)') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.localData.caption', 'Edit the local records rendered when the data source is derived.') }}\n                      </p>\n\n                      @if (canConsolidateGaugeLocalData()) {\n                        <div class=\"editor-row-actions\">\n                          <button\n                            mat-stroked-button\n                            type=\"button\"\n                            data-testid=\"chart-local-data-consolidate-gauge\"\n                            (click)=\"consolidateGaugeLocalData()\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            {{ t('praxis.charts.editor.localData.consolidateGauge', 'Consolidate to 1 bucket for gauge') }}\n                          </button>\n                        </div>\n                      }\n\n                      @if (localDataRows().length) {\n                        @for (row of localDataRows(); track $index; let rowIndex = $index) {\n                          <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-local-data-row-' + rowIndex\">\n                            <div class=\"editor-grid\">\n                              @for (dimField of localDataDimensionFields(); track dimField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ dimField }}</mat-label>\n                                  <input\n                                    matInput\n                                    [attr.data-testid]=\"'chart-local-data-dim-' + rowIndex + '-' + dimField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, dimField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, dimField, $event, 'dimension')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                              @for (metricField of localDataMetricFields(); track metricField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ metricField }}</mat-label>\n                                  <input\n                                    matInput\n                                    type=\"number\"\n                                    [attr.data-testid]=\"'chart-local-data-metric-' + rowIndex + '-' + metricField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, metricField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, metricField, $event, 'metric')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                            </div>\n                            <div class=\"editor-row-actions\">\n                              <button\n                                mat-button\n                                type=\"button\"\n                                [attr.data-testid]=\"'chart-local-data-remove-row-' + rowIndex\"\n                                (click)=\"removeLocalDataRow(rowIndex)\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                {{ t('praxis.charts.editor.localData.removeRow', 'Remove record') }}\n                              </button>\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"editor-empty\" data-testid=\"chart-local-data-empty\">\n                          {{ t('praxis.charts.editor.localData.empty', 'No local records configured yet. Add a record to replace the synthetic preview sample.') }}\n                        </div>\n                      }\n\n                      <div>\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-local-data-add-row\"\n                          (click)=\"addLocalDataRow()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          {{ t('praxis.charts.editor.localData.addRow', 'Add record') }}\n                        </button>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content class=\"editor-stack\">\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                  <p class=\"editor-caption\" data-testid=\"chart-editor-motion-hint\">\n                    {{ t('praxis.charts.editor.motion.hint', 'Controls initial entrance timing and smooth transitions when filters or query context change, with automatic volume thresholds for high-density datasets.') }}\n                  </p>\n\n                  <div>\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-simulate-motion\"\n                      (click)=\"simulateMotionTransition()\"\n                      [disabled]=\"normalizedDocument().motion?.enabled === false || !effectivePreview()\"\n                    >\n                      {{ t('praxis.charts.editor.motion.simulate', 'Simulate transition') }}\n                    </button>\n                  </div>\n                </mat-card-content>\n              </mat-card>\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-toggle-cluster\">\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                    <div class=\"editor-grid\">\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                    </div>\n\n                    @if (canApplyDomainSemanticPalette()) {\n                      <div class=\"editor-row-actions\">\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-editor-apply-domain-palette\"\n                          (click)=\"applyDomainSemanticPalette()\"\n                          [disabled]=\"isReadonly()\"\n                          [title]=\"t('praxis.charts.editor.appearance.applyDomainPaletteHint', 'Generates a custom palette with semantic colors (success, warning, danger, info) from the dimension categories.')\"\n                        >\n                          <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                          {{ t('praxis.charts.editor.appearance.applyDomainPalette', 'Apply domain semantic colors') }}\n                        </button>\n                      </div>\n                    }\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\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of tokenPaletteSwatches(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                          </span>\n                        }\n                      </div>\n                    } @else {\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of customPaletteColors(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <input\n                              type=\"color\"\n                              class=\"editor-palette-color-input\"\n                              [attr.data-testid]=\"'chart-editor-palette-color-' + $index\"\n                              [value]=\"swatchHexValue(swatch, $index)\"\n                              (input)=\"setCustomPaletteColorAt($index, $any($event.target).value)\"\n                              [disabled]=\"isReadonly()\"\n                            />\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                            <button\n                              type=\"button\"\n                              class=\"editor-palette-swatch-remove\"\n                              [attr.data-testid]=\"'chart-editor-palette-remove-' + $index\"\n                              (click)=\"removeCustomPaletteColor($index)\"\n                              [disabled]=\"isReadonly()\"\n                              [attr.aria-label]=\"t('praxis.charts.editor.appearance.removePaletteColor', 'Remove color')\"\n                            >\n                              \u00D7\n                            </button>\n                          </span>\n                        }\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          class=\"editor-palette-add-btn\"\n                          data-testid=\"chart-editor-add-palette-color\"\n                          (click)=\"addCustomPaletteColor()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          + {{ t('praxis.charts.editor.appearance.addPaletteColor', 'Add color') }}\n                        </button>\n                      </div>\n\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=\"2\"\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-state-group\">\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=\"1\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [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 (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showHeatmapPanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-heatmap-panel\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.heatmapTitle', 'Heatmap matrix guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.heatmapHint', 'Heatmap charts render a 2D matrix requiring two dimensions (X and Y axes) and one metric, using group-by for remote stats.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (canApplySemanticAnalyticsMapping()) {\n                  <div class=\"editor-row-actions\">\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-smart-map-analytics\"\n                      (click)=\"applySemanticAnalyticsMapping()\"\n                      [disabled]=\"isReadonly()\"\n                      [title]=\"t('praxis.charts.editor.analytics.smartMapHint', 'Automatically selects the best dimension, metric, and aggregation from the governed field catalog.')\"\n                    >\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ t('praxis.charts.editor.analytics.smartMap', 'Suggest dimension & metric from schema') }}\n                    </button>\n                  </div>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select\n                                [ngModel]=\"dimension.field || ''\"\n                                (ngModelChange)=\"setDimensionField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('dimension', dimension.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('dimension').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-extraction-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionExtraction', 'Temporal extraction') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.extraction || ''\" (ngModelChange)=\"setDimensionExtraction($index, $event)\" [disabled]=\"isReadonly()\">\n                              <mat-option [value]=\"''\">\n                                {{ t('praxis.charts.editor.dimensionExtraction.none', 'None') }}\n                              </mat-option>\n                              @for (extraction of dimensionExtractions; track extraction) {\n                                <mat-option [value]=\"extraction\">\n                                  {{ t('praxis.charts.editor.dimensionExtraction.' + extraction, extraction) }}\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() || !canRemoveDimension()\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly() || !canAddDimension()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select\n                                [ngModel]=\"metric.field || ''\"\n                                (ngModelChange)=\"setMetricField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('metric', metric.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('metric').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content>\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                </mat-card-content>\n              </mat-card>\n            }\n          }\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\" [class.editor-issue--warning]=\"issue.severity === 'warning'\">\n                  <div class=\"editor-issue__header\">\n                    <strong>{{ issue.field }}</strong>\n                    @if (issueTargetSection(issue); as targetSection) {\n                      <button\n                        mat-button\n                        type=\"button\"\n                        class=\"editor-issue__jump\"\n                        [attr.data-testid]=\"'chart-editor-issue-jump-' + issue.code\"\n                        [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(targetSection) })\"\n                        (click)=\"setSection(targetSection)\"\n                      >\n                        {{ sectionLabel(targetSection) }} \u2192\n                      </button>\n                    }\n                  </div>\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()) {\n            <div\n              class=\"editor-empty editor-empty--actionable editor-preview-degraded\"\n              data-testid=\"chart-editor-preview-degraded-warning\"\n            >\n              <span>{{\n                effectivePreview()\n                  ? t('praxis.charts.editor.preview.degradedNotice', 'Aesthetic simulation active with synthetic sample data while contract validation issues remain open.')\n                  : t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.')\n              }}</span>\n              @if (firstInvalidSection(); as invalidSection) {\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"chart-editor-preview-jump-invalid\"\n                  [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(invalidSection) })\"\n                  (click)=\"setSection(invalidSection)\"\n                >\n                  {{ sectionLabel(invalidSection) }} \u2192\n                </button>\n              }\n            </div>\n          }\n          @if (effectivePreview(); 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            <p class=\"editor-caption\" data-testid=\"chart-editor-preview-origin\">\n              {{\n                doc().source.kind === 'praxis.stats'\n                  ? t('praxis.charts.editor.preview.originStatsSynthetic', 'Previewing synthetic sample for governed backend stats (praxis.stats).')\n                  : chartPreview.dataOrigin === 'local'\n                    ? t('praxis.charts.editor.preview.originLocal', 'Previewing widget local dataset (inputs.data).')\n                    : t('praxis.charts.editor.preview.originSynthetic', 'Previewing synthetic sample data (no local dataset records).')\n              }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:16px;min-width:0}.editor-nav{display:flex;gap:6px;flex-wrap:wrap;padding:4px;border-radius:14px;background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .04));border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent)}.editor-nav button{border-radius:10px;border-color:transparent;display:inline-flex;align-items:center;gap:6px}.editor-nav button.active{background:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 22%,transparent);color:var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4));border-color:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 48%,transparent);font-weight:600}.editor-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;font-size:.7rem;font-weight:700;line-height:1;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 24%,transparent);color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface, inherit))}.editor-nav__badge--error{background:color-mix(in srgb,var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e)) 24%,transparent);color:var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e))}:host ::ng-deep .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mat-mdc-form-field-error-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding-top:4px;line-height:1.35}:host ::ng-deep .mat-mdc-form-field-bottom-align:before{display:none}.editor-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 72%,transparent);background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .03))}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}.editor-toggle-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}.editor-stack{display:grid;gap:14px}.editor-state-group{padding-top:14px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 48%,transparent)}.editor-state-group:first-child{padding-top:0;border-top:0}.editor-palette-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.editor-palette-swatch-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 68%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 88%,transparent);font-size:.76rem}.editor-palette-swatch-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(128,128,128,.35);flex-shrink:0}.editor-palette-color-input{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.editor-palette-swatch-code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.74rem;color:var(--md-sys-color-on-surface, inherit)}.editor-palette-swatch-remove{appearance:none;border:0;background:transparent;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.95rem;line-height:1;padding:0 2px;cursor:pointer}.editor-row-card{padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 54%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 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:12px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 10%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 24%,transparent)}.editor-issue--warning{background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 26%,transparent)}.editor-issue__header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}.editor-issue strong{display:block;font-size:.84rem}.editor-issue__jump{min-height:26px;padding:0 8px;font-size:.76rem}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem;line-height:1.45}.editor-empty{padding:16px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 52%,transparent);border:1px dashed color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent);color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem}.editor-empty--actionable{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.editor-select-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}.editor-select-trigger__icon{width:18px;height:18px;font-size:18px;flex-shrink:0;color:var(--md-sys-color-primary, #1263b4)}.editor-select-trigger__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.editor-select-trigger__code{flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,currentColor 8%,transparent);color:color-mix(in srgb,currentColor 72%,transparent)}::ng-deep .editor-select-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--md-sys-color-surface-container-highest, #f4f6fa);border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 45%,transparent)}::ng-deep .editor-select-search mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-on-surface-variant, #5a5d67);flex-shrink:0}::ng-deep .editor-select-search input{width:100%;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:.85rem}::ng-deep .mat-mdc-option.editor-rich-mat-option{min-height:54px;height:auto;padding-block:8px;align-items:flex-start}::ng-deep .editor-rich-option{display:flex;align-items:flex-start;gap:10px;min-width:0;width:100%;line-height:1.25}::ng-deep .editor-rich-option__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}::ng-deep .editor-rich-option__icon mat-icon{width:16px;height:16px;font-size:16px}::ng-deep .editor-rich-option__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}::ng-deep .editor-rich-option__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}::ng-deep .editor-rich-option__label{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__badge,.editor-resource-summary__badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:.68rem;font-weight:600;background:color-mix(in srgb,currentColor 10%,transparent);color:color-mix(in srgb,currentColor 78%,transparent);white-space:nowrap}::ng-deep .editor-rich-option__code,.editor-resource-summary__code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;color:var(--md-sys-color-primary, #1263b4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__description,.editor-resource-summary__description{margin:0;font-size:.75rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.editor-resource-summary{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 6%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent)}.editor-resource-summary__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.editor-resource-summary__icon mat-icon{width:16px;height:16px;font-size:16px}.editor-resource-summary__body{display:grid;gap:2px;min-width:0;flex:1 1 auto}.editor-resource-summary__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}.editor-preview-degraded{margin-bottom:12px;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-style:solid;border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 32%,transparent)}@container praxis-chart-editor (min-width: 841px){.editor-nav__preview-btn:not(.active){display:none}}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-shell--preview-active .editor-form{display:none}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.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: i7.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: "directive", type: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.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: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "resourceKey", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved", "chartDocumentPatchChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
             type: Component,
@@ -14924,7 +16620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSlideToggleModule,
                         PraxisIconDirective,
                         PraxisChartComponent
-                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\" [class.editor-shell--preview-active]=\"activeSection() === 'preview'\">\n  <div class=\"editor-nav\" role=\"toolbar\" [attr.aria-label]=\"t('praxis.charts.editor.sectionsNav', 'Se\u00E7\u00F5es do editor')\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.id]=\"'chart-editor-tab-' + section.id\"\n        aria-controls=\"chart-editor-tabpanel\"\n        [attr.aria-pressed]=\"activeSection() === section.id\"\n        [tabIndex]=\"activeSection() === section.id ? 0 : -1\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        [class.editor-nav__preview-btn]=\"section.id === 'preview'\"\n        [class.editor-nav__has-error]=\"sectionHasError(section.id)\"\n        (click)=\"setSection(section.id)\"\n        (keydown)=\"onSectionNavKeydown($event, $index)\"\n      >\n        <span>{{ t(section.labelKey, section.fallback) }}</span>\n        @if (sectionIssueCount(section.id) > 0) {\n          <span\n            class=\"editor-nav__badge\"\n            aria-hidden=\"true\"\n            [class.editor-nav__badge--error]=\"sectionHasError(section.id)\"\n            [attr.data-testid]=\"'chart-editor-section-badge-' + section.id\"\n          >\n            {{ sectionIssueCount(section.id) }}\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div\n      class=\"editor-form\"\n      id=\"chart-editor-tabpanel\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'chart-editor-tab-' + activeSection()\"\n    >\n      @switch (activeSection()) {\n        @case ('general') {\n          <mat-card class=\"editor-card\">\n            <mat-card-content class=\"editor-grid\">\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                  @for (kind of chartKinds; track kind) {\n                    <mat-option [value]=\"kind\">\n                      {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                  @for (mode of sizingModes; track mode) {\n                    <mat-option [value]=\"mode\">\n                      {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                    </mat-option>\n                  }\n                </mat-select>\n                <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n              </mat-form-field>\n\n              @if (sizingModeValue() === 'fixed') {\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                </mat-form-field>\n              }\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n              </mat-form-field>\n            </mat-card-content>\n          </mat-card>\n        }\n\n        @case ('data') {\n          <div class=\"editor-stack\">\n            <mat-card class=\"editor-card\">\n              <mat-card-content class=\"editor-stack\">\n                <p class=\"editor-caption\" data-testid=\"chart-editor-effective-origin\">\n                  {{ effectiveDataOriginSummary() }}\n                </p>\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-resource\"\n                        [ngModel]=\"resourceValue()\"\n                        (ngModelChange)=\"setResource($event)\"\n                        (openedChange)=\"setResourceSearchTerm('')\"\n                        [disabled]=\"isReadonly() || resourceCatalogUnavailable()\"\n                      >\n                        @if (selectedResourceOption(); as selectedRes) {\n                          <mat-select-trigger>\n                            <span class=\"editor-select-trigger\">\n                              <mat-icon class=\"editor-select-trigger__icon\" [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                              <span class=\"editor-select-trigger__label\">{{ selectedRes.label }}</span>\n                              <span class=\"editor-select-trigger__code\">{{ selectedRes.path }}</span>\n                            </span>\n                          </mat-select-trigger>\n                        }\n                        <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                          <mat-icon aria-hidden=\"true\">search</mat-icon>\n                          <input\n                            type=\"search\"\n                            data-testid=\"chart-editor-resource-search\"\n                            [placeholder]=\"t('praxis.charts.editor.field.resourceSearchPlaceholder', 'Search by name, key, or endpoint...')\"\n                            [ngModel]=\"resourceSearchTerm()\"\n                            (ngModelChange)=\"setResourceSearchTerm($event)\"\n                            (keydown)=\"onSelectSearchKeydown($event)\"\n                          />\n                        </div>\n                        @for (resource of filteredResourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\" class=\"editor-rich-mat-option\">\n                            <div class=\"editor-rich-option\">\n                              <span class=\"editor-rich-option__icon\" aria-hidden=\"true\">\n                                <mat-icon [praxisIcon]=\"resource.icon || 'api'\"></mat-icon>\n                              </span>\n                              <div class=\"editor-rich-option__body\">\n                                <div class=\"editor-rich-option__header\">\n                                  <span class=\"editor-rich-option__label\">{{ resource.label }}</span>\n                                  @if (resource.group) {\n                                    <span class=\"editor-rich-option__badge\">{{ resource.group }}</span>\n                                  }\n                                  @if (resource.readOnly) {\n                                    <span class=\"editor-rich-option__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                                  }\n                                </div>\n                                <span class=\"editor-rich-option__code\">\n                                  {{ resource.path }}{{ resource.id && resource.id !== resource.path && resource.id !== resource.label ? ' \u00B7 ' + resource.id : '' }}\n                                </span>\n                                @if (resource.description) {\n                                  <span class=\"editor-rich-option__description\">{{ resource.description }}</span>\n                                }\n                              </div>\n                            </div>\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || isResolvingResource() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (isResolvingResource()) {\n                        <mat-hint data-testid=\"chart-editor-resolving-resource\">\n                          {{ t('praxis.charts.editor.catalog.resolvingResource', 'Resolving governed stats operations and fields for the selected resource...') }}\n                        </mat-hint>\n                      } @else if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (doc().source.kind === 'praxis.stats' && selectedResourceOption(); as selectedRes) {\n                  <div class=\"editor-resource-summary\" data-testid=\"chart-editor-resource-summary\">\n                    <span class=\"editor-resource-summary__icon\" aria-hidden=\"true\">\n                      <mat-icon [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                    </span>\n                    <div class=\"editor-resource-summary__body\">\n                      <div class=\"editor-resource-summary__header\">\n                        <strong>{{ selectedRes.label }}</strong>\n                        @if (selectedRes.group) {\n                          <span class=\"editor-resource-summary__badge\">{{ selectedRes.group }}</span>\n                        }\n                        @if (selectedRes.readOnly) {\n                          <span class=\"editor-resource-summary__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                        }\n                      </div>\n                      <span class=\"editor-resource-summary__code\">\n                        {{ selectedRes.path }}{{ selectedRes.id && selectedRes.id !== selectedRes.path && selectedRes.id !== selectedRes.label ? ' \u00B7 ' + selectedRes.id : '' }}\n                      </span>\n                      @if (selectedRes.description) {\n                        <p class=\"editor-resource-summary__description\">{{ selectedRes.description }}</p>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-card-content>\n            </mat-card>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            (openedChange)=\"setFieldSearchTerm('')\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                              <mat-icon aria-hidden=\"true\">search</mat-icon>\n                              <input\n                                type=\"search\"\n                                [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                [ngModel]=\"fieldSearchTerm()\"\n                                (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                (keydown)=\"onSelectSearchKeydown($event)\"\n                              />\n                            </div>\n                            @for (field of filteredFieldOptions('time', comparisonPeriodFieldValue()); track field.field) {\n                              <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                <div class=\"editor-rich-option\">\n                                  <div class=\"editor-rich-option__body\">\n                                    <div class=\"editor-rich-option__header\">\n                                      <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                      @if (field.type) {\n                                        <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                      }\n                                    </div>\n                                    @if (field.label && field.label !== field.field) {\n                                      <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                    }\n                                    @if (field.description) {\n                                      <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                        }\n                        @if (!fieldOptions('time').length) {\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (doc().source.kind === 'derived') {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-local-data\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.localData.title', 'Local dataset (inputs.data)') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.localData.caption', 'Edit the local records rendered when the data source is derived.') }}\n                      </p>\n\n                      @if (canConsolidateGaugeLocalData()) {\n                        <div class=\"editor-row-actions\">\n                          <button\n                            mat-stroked-button\n                            type=\"button\"\n                            data-testid=\"chart-local-data-consolidate-gauge\"\n                            (click)=\"consolidateGaugeLocalData()\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            {{ t('praxis.charts.editor.localData.consolidateGauge', 'Consolidate to 1 bucket for gauge') }}\n                          </button>\n                        </div>\n                      }\n\n                      @if (localDataRows().length) {\n                        @for (row of localDataRows(); track $index; let rowIndex = $index) {\n                          <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-local-data-row-' + rowIndex\">\n                            <div class=\"editor-grid\">\n                              @for (dimField of localDataDimensionFields(); track dimField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ dimField }}</mat-label>\n                                  <input\n                                    matInput\n                                    [attr.data-testid]=\"'chart-local-data-dim-' + rowIndex + '-' + dimField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, dimField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, dimField, $event, 'dimension')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                              @for (metricField of localDataMetricFields(); track metricField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ metricField }}</mat-label>\n                                  <input\n                                    matInput\n                                    type=\"number\"\n                                    [attr.data-testid]=\"'chart-local-data-metric-' + rowIndex + '-' + metricField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, metricField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, metricField, $event, 'metric')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                            </div>\n                            <div class=\"editor-row-actions\">\n                              <button\n                                mat-button\n                                type=\"button\"\n                                [attr.data-testid]=\"'chart-local-data-remove-row-' + rowIndex\"\n                                (click)=\"removeLocalDataRow(rowIndex)\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                {{ t('praxis.charts.editor.localData.removeRow', 'Remove record') }}\n                              </button>\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"editor-empty\" data-testid=\"chart-local-data-empty\">\n                          {{ t('praxis.charts.editor.localData.empty', 'No local records configured yet. Add a record to replace the synthetic preview sample.') }}\n                        </div>\n                      }\n\n                      <div>\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-local-data-add-row\"\n                          (click)=\"addLocalDataRow()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          {{ t('praxis.charts.editor.localData.addRow', 'Add record') }}\n                        </button>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content class=\"editor-stack\">\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                  <p class=\"editor-caption\" data-testid=\"chart-editor-motion-hint\">\n                    {{ t('praxis.charts.editor.motion.hint', 'Controls initial entrance timing and smooth transitions when filters or query context change, with automatic volume thresholds for high-density datasets.') }}\n                  </p>\n\n                  <div>\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-simulate-motion\"\n                      (click)=\"simulateMotionTransition()\"\n                      [disabled]=\"normalizedDocument().motion?.enabled === false || !effectivePreview()\"\n                    >\n                      {{ t('praxis.charts.editor.motion.simulate', 'Simulate transition') }}\n                    </button>\n                  </div>\n                </mat-card-content>\n              </mat-card>\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-toggle-cluster\">\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                    <div class=\"editor-grid\">\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                    </div>\n\n                    @if (canApplyDomainSemanticPalette()) {\n                      <div class=\"editor-row-actions\">\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-editor-apply-domain-palette\"\n                          (click)=\"applyDomainSemanticPalette()\"\n                          [disabled]=\"isReadonly()\"\n                          [title]=\"t('praxis.charts.editor.appearance.applyDomainPaletteHint', 'Generates a custom palette with semantic colors (success, warning, danger, info) from the dimension categories.')\"\n                        >\n                          <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                          {{ t('praxis.charts.editor.appearance.applyDomainPalette', 'Apply domain semantic colors') }}\n                        </button>\n                      </div>\n                    }\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\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of tokenPaletteSwatches(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                          </span>\n                        }\n                      </div>\n                    } @else {\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of customPaletteColors(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <input\n                              type=\"color\"\n                              class=\"editor-palette-color-input\"\n                              [attr.data-testid]=\"'chart-editor-palette-color-' + $index\"\n                              [value]=\"swatchHexValue(swatch, $index)\"\n                              (input)=\"setCustomPaletteColorAt($index, $any($event.target).value)\"\n                              [disabled]=\"isReadonly()\"\n                            />\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                            <button\n                              type=\"button\"\n                              class=\"editor-palette-swatch-remove\"\n                              [attr.data-testid]=\"'chart-editor-palette-remove-' + $index\"\n                              (click)=\"removeCustomPaletteColor($index)\"\n                              [disabled]=\"isReadonly()\"\n                              [attr.aria-label]=\"t('praxis.charts.editor.appearance.removePaletteColor', 'Remove color')\"\n                            >\n                              \u00D7\n                            </button>\n                          </span>\n                        }\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          class=\"editor-palette-add-btn\"\n                          data-testid=\"chart-editor-add-palette-color\"\n                          (click)=\"addCustomPaletteColor()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          + {{ t('praxis.charts.editor.appearance.addPaletteColor', 'Add color') }}\n                        </button>\n                      </div>\n\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=\"2\"\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-state-group\">\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=\"1\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [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 (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (canApplySemanticAnalyticsMapping()) {\n                  <div class=\"editor-row-actions\">\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-smart-map-analytics\"\n                      (click)=\"applySemanticAnalyticsMapping()\"\n                      [disabled]=\"isReadonly()\"\n                      [title]=\"t('praxis.charts.editor.analytics.smartMapHint', 'Automatically selects the best dimension, metric, and aggregation from the governed field catalog.')\"\n                    >\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ t('praxis.charts.editor.analytics.smartMap', 'Suggest dimension & metric from schema') }}\n                    </button>\n                  </div>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select\n                                [ngModel]=\"dimension.field || ''\"\n                                (ngModelChange)=\"setDimensionField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('dimension', dimension.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('dimension').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select\n                                [ngModel]=\"metric.field || ''\"\n                                (ngModelChange)=\"setMetricField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('metric', metric.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('metric').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content>\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                </mat-card-content>\n              </mat-card>\n            }\n          }\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\" [class.editor-issue--warning]=\"issue.severity === 'warning'\">\n                  <div class=\"editor-issue__header\">\n                    <strong>{{ issue.field }}</strong>\n                    @if (issueTargetSection(issue); as targetSection) {\n                      <button\n                        mat-button\n                        type=\"button\"\n                        class=\"editor-issue__jump\"\n                        [attr.data-testid]=\"'chart-editor-issue-jump-' + issue.code\"\n                        [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(targetSection) })\"\n                        (click)=\"setSection(targetSection)\"\n                      >\n                        {{ sectionLabel(targetSection) }} \u2192\n                      </button>\n                    }\n                  </div>\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()) {\n            <div\n              class=\"editor-empty editor-empty--actionable editor-preview-degraded\"\n              data-testid=\"chart-editor-preview-degraded-warning\"\n            >\n              <span>{{\n                effectivePreview()\n                  ? t('praxis.charts.editor.preview.degradedNotice', 'Aesthetic simulation active with synthetic sample data while contract validation issues remain open.')\n                  : t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.')\n              }}</span>\n              @if (firstInvalidSection(); as invalidSection) {\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"chart-editor-preview-jump-invalid\"\n                  [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(invalidSection) })\"\n                  (click)=\"setSection(invalidSection)\"\n                >\n                  {{ sectionLabel(invalidSection) }} \u2192\n                </button>\n              }\n            </div>\n          }\n          @if (effectivePreview(); 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            <p class=\"editor-caption\" data-testid=\"chart-editor-preview-origin\">\n              {{\n                doc().source.kind === 'praxis.stats'\n                  ? t('praxis.charts.editor.preview.originStatsSynthetic', 'Previewing synthetic sample for governed backend stats (praxis.stats).')\n                  : chartPreview.dataOrigin === 'local'\n                    ? t('praxis.charts.editor.preview.originLocal', 'Previewing widget local dataset (inputs.data).')\n                    : t('praxis.charts.editor.preview.originSynthetic', 'Previewing synthetic sample data (no local dataset records).')\n              }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:16px;min-width:0}.editor-nav{display:flex;gap:6px;flex-wrap:wrap;padding:4px;border-radius:14px;background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .04));border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent)}.editor-nav button{border-radius:10px;border-color:transparent;display:inline-flex;align-items:center;gap:6px}.editor-nav button.active{background:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 22%,transparent);color:var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4));border-color:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 48%,transparent);font-weight:600}.editor-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;font-size:.7rem;font-weight:700;line-height:1;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 24%,transparent);color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface, inherit))}.editor-nav__badge--error{background:color-mix(in srgb,var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e)) 24%,transparent);color:var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e))}:host ::ng-deep .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mat-mdc-form-field-error-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding-top:4px;line-height:1.35}:host ::ng-deep .mat-mdc-form-field-bottom-align:before{display:none}.editor-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 72%,transparent);background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .03))}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}.editor-toggle-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}.editor-stack{display:grid;gap:14px}.editor-state-group{padding-top:14px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 48%,transparent)}.editor-state-group:first-child{padding-top:0;border-top:0}.editor-palette-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.editor-palette-swatch-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 68%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 88%,transparent);font-size:.76rem}.editor-palette-swatch-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(128,128,128,.35);flex-shrink:0}.editor-palette-color-input{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.editor-palette-swatch-code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.74rem;color:var(--md-sys-color-on-surface, inherit)}.editor-palette-swatch-remove{appearance:none;border:0;background:transparent;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.95rem;line-height:1;padding:0 2px;cursor:pointer}.editor-row-card{padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 54%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 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:12px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 10%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 24%,transparent)}.editor-issue--warning{background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 26%,transparent)}.editor-issue__header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}.editor-issue strong{display:block;font-size:.84rem}.editor-issue__jump{min-height:26px;padding:0 8px;font-size:.76rem}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem;line-height:1.45}.editor-empty{padding:16px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 52%,transparent);border:1px dashed color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent);color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem}.editor-empty--actionable{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.editor-select-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}.editor-select-trigger__icon{width:18px;height:18px;font-size:18px;flex-shrink:0;color:var(--md-sys-color-primary, #1263b4)}.editor-select-trigger__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.editor-select-trigger__code{flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,currentColor 8%,transparent);color:color-mix(in srgb,currentColor 72%,transparent)}::ng-deep .editor-select-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--md-sys-color-surface-container-highest, #f4f6fa);border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 45%,transparent)}::ng-deep .editor-select-search mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-on-surface-variant, #5a5d67);flex-shrink:0}::ng-deep .editor-select-search input{width:100%;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:.85rem}::ng-deep .mat-mdc-option.editor-rich-mat-option{min-height:54px;height:auto;padding-block:8px;align-items:flex-start}::ng-deep .editor-rich-option{display:flex;align-items:flex-start;gap:10px;min-width:0;width:100%;line-height:1.25}::ng-deep .editor-rich-option__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}::ng-deep .editor-rich-option__icon mat-icon{width:16px;height:16px;font-size:16px}::ng-deep .editor-rich-option__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}::ng-deep .editor-rich-option__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}::ng-deep .editor-rich-option__label{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__badge,.editor-resource-summary__badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:.68rem;font-weight:600;background:color-mix(in srgb,currentColor 10%,transparent);color:color-mix(in srgb,currentColor 78%,transparent);white-space:nowrap}::ng-deep .editor-rich-option__code,.editor-resource-summary__code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;color:var(--md-sys-color-primary, #1263b4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__description,.editor-resource-summary__description{margin:0;font-size:.75rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.editor-resource-summary{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 6%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent)}.editor-resource-summary__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.editor-resource-summary__icon mat-icon{width:16px;height:16px;font-size:16px}.editor-resource-summary__body{display:grid;gap:2px;min-width:0;flex:1 1 auto}.editor-resource-summary__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}.editor-preview-degraded{margin-bottom:12px;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-style:solid;border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 32%,transparent)}@container praxis-chart-editor (min-width: 841px){.editor-nav__preview-btn:not(.active){display:none}}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-shell--preview-active .editor-form{display:none}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
+                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\" [class.editor-shell--preview-active]=\"activeSection() === 'preview'\">\n  <div class=\"editor-nav\" role=\"toolbar\" [attr.aria-label]=\"t('praxis.charts.editor.sectionsNav', 'Se\u00E7\u00F5es do editor')\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.id]=\"'chart-editor-tab-' + section.id\"\n        aria-controls=\"chart-editor-tabpanel\"\n        [attr.aria-pressed]=\"activeSection() === section.id\"\n        [tabIndex]=\"activeSection() === section.id ? 0 : -1\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        [class.editor-nav__preview-btn]=\"section.id === 'preview'\"\n        [class.editor-nav__has-error]=\"sectionHasError(section.id)\"\n        (click)=\"setSection(section.id)\"\n        (keydown)=\"onSectionNavKeydown($event, $index)\"\n      >\n        <span>{{ t(section.labelKey, section.fallback) }}</span>\n        @if (sectionIssueCount(section.id) > 0) {\n          <span\n            class=\"editor-nav__badge\"\n            aria-hidden=\"true\"\n            [class.editor-nav__badge--error]=\"sectionHasError(section.id)\"\n            [attr.data-testid]=\"'chart-editor-section-badge-' + section.id\"\n          >\n            {{ sectionIssueCount(section.id) }}\n          </span>\n        }\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div\n      class=\"editor-form\"\n      id=\"chart-editor-tabpanel\"\n      role=\"tabpanel\"\n      [attr.aria-labelledby]=\"'chart-editor-tab-' + activeSection()\"\n    >\n      @switch (activeSection()) {\n        @case ('general') {\n          <mat-card class=\"editor-card\">\n            <mat-card-content class=\"editor-grid\">\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                  @for (kind of chartKinds; track kind) {\n                    <mat-option [value]=\"kind\">\n                      {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                    </mat-option>\n                  }\n                </mat-select>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                  @for (mode of sizingModes; track mode) {\n                    <mat-option [value]=\"mode\">\n                      {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                    </mat-option>\n                  }\n                </mat-select>\n                <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n              </mat-form-field>\n\n              @if (sizingModeValue() === 'fixed') {\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                </mat-form-field>\n              }\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n              </mat-form-field>\n\n              <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n              </mat-form-field>\n            </mat-card-content>\n          </mat-card>\n        }\n\n        @case ('data') {\n          <div class=\"editor-stack\">\n            <mat-card class=\"editor-card\">\n              <mat-card-content class=\"editor-stack\">\n                <p class=\"editor-caption\" data-testid=\"chart-editor-effective-origin\">\n                  {{ effectiveDataOriginSummary() }}\n                </p>\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-resource\"\n                        [ngModel]=\"resourceValue()\"\n                        (ngModelChange)=\"setResource($event)\"\n                        (openedChange)=\"setResourceSearchTerm('')\"\n                        [disabled]=\"isReadonly() || resourceCatalogUnavailable()\"\n                      >\n                        @if (selectedResourceOption(); as selectedRes) {\n                          <mat-select-trigger>\n                            <span class=\"editor-select-trigger\">\n                              <mat-icon class=\"editor-select-trigger__icon\" [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                              <span class=\"editor-select-trigger__label\">{{ selectedRes.label }}</span>\n                              <span class=\"editor-select-trigger__code\">{{ selectedRes.path }}</span>\n                            </span>\n                          </mat-select-trigger>\n                        }\n                        <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                          <mat-icon aria-hidden=\"true\">search</mat-icon>\n                          <input\n                            type=\"search\"\n                            data-testid=\"chart-editor-resource-search\"\n                            [placeholder]=\"t('praxis.charts.editor.field.resourceSearchPlaceholder', 'Search by name, key, or endpoint...')\"\n                            [ngModel]=\"resourceSearchTerm()\"\n                            (ngModelChange)=\"setResourceSearchTerm($event)\"\n                            (keydown)=\"onSelectSearchKeydown($event)\"\n                          />\n                        </div>\n                        @for (resource of filteredResourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\" class=\"editor-rich-mat-option\">\n                            <div class=\"editor-rich-option\">\n                              <span class=\"editor-rich-option__icon\" aria-hidden=\"true\">\n                                <mat-icon [praxisIcon]=\"resource.icon || 'api'\"></mat-icon>\n                              </span>\n                              <div class=\"editor-rich-option__body\">\n                                <div class=\"editor-rich-option__header\">\n                                  <span class=\"editor-rich-option__label\">{{ resource.label }}</span>\n                                  @if (resource.group) {\n                                    <span class=\"editor-rich-option__badge\">{{ resource.group }}</span>\n                                  }\n                                  @if (resource.readOnly) {\n                                    <span class=\"editor-rich-option__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                                  }\n                                </div>\n                                <span class=\"editor-rich-option__code\">\n                                  {{ resource.path }}{{ resource.id && resource.id !== resource.path && resource.id !== resource.label ? ' \u00B7 ' + resource.id : '' }}\n                                </span>\n                                @if (resource.description) {\n                                  <span class=\"editor-rich-option__description\">{{ resource.description }}</span>\n                                }\n                              </div>\n                            </div>\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || isResolvingResource() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (isResolvingResource()) {\n                        <mat-hint data-testid=\"chart-editor-resolving-resource\">\n                          {{ t('praxis.charts.editor.catalog.resolvingResource', 'Resolving governed stats operations and fields for the selected resource...') }}\n                        </mat-hint>\n                      } @else if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (doc().source.kind === 'praxis.stats' && selectedResourceOption(); as selectedRes) {\n                  <div class=\"editor-resource-summary\" data-testid=\"chart-editor-resource-summary\">\n                    <span class=\"editor-resource-summary__icon\" aria-hidden=\"true\">\n                      <mat-icon [praxisIcon]=\"selectedRes.icon || 'api'\"></mat-icon>\n                    </span>\n                    <div class=\"editor-resource-summary__body\">\n                      <div class=\"editor-resource-summary__header\">\n                        <strong>{{ selectedRes.label }}</strong>\n                        @if (selectedRes.group) {\n                          <span class=\"editor-resource-summary__badge\">{{ selectedRes.group }}</span>\n                        }\n                        @if (selectedRes.readOnly) {\n                          <span class=\"editor-resource-summary__badge\">{{ t('praxis.charts.editor.catalog.readOnly', 'Read-only') }}</span>\n                        }\n                      </div>\n                      <span class=\"editor-resource-summary__code\">\n                        {{ selectedRes.path }}{{ selectedRes.id && selectedRes.id !== selectedRes.path && selectedRes.id !== selectedRes.label ? ' \u00B7 ' + selectedRes.id : '' }}\n                      </span>\n                      @if (selectedRes.description) {\n                        <p class=\"editor-resource-summary__description\">{{ selectedRes.description }}</p>\n                      }\n                    </div>\n                  </div>\n                }\n              </mat-card-content>\n            </mat-card>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            (openedChange)=\"setFieldSearchTerm('')\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                              <mat-icon aria-hidden=\"true\">search</mat-icon>\n                              <input\n                                type=\"search\"\n                                [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                [ngModel]=\"fieldSearchTerm()\"\n                                (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                (keydown)=\"onSelectSearchKeydown($event)\"\n                              />\n                            </div>\n                            @for (field of filteredFieldOptions('time', comparisonPeriodFieldValue()); track field.field) {\n                              <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                <div class=\"editor-rich-option\">\n                                  <div class=\"editor-rich-option__body\">\n                                    <div class=\"editor-rich-option__header\">\n                                      <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                      @if (field.type) {\n                                        <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                      }\n                                    </div>\n                                    @if (field.label && field.label !== field.field) {\n                                      <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                    }\n                                    @if (field.description) {\n                                      <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                        }\n                        @if (!fieldOptions('time').length) {\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (doc().source.kind === 'derived') {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-local-data\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.localData.title', 'Local dataset (inputs.data)') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.localData.caption', 'Edit the local records rendered when the data source is derived.') }}\n                      </p>\n\n                      @if (canConsolidateGaugeLocalData()) {\n                        <div class=\"editor-row-actions\">\n                          <button\n                            mat-stroked-button\n                            type=\"button\"\n                            data-testid=\"chart-local-data-consolidate-gauge\"\n                            (click)=\"consolidateGaugeLocalData()\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            {{ t('praxis.charts.editor.localData.consolidateGauge', 'Consolidate to 1 bucket for gauge') }}\n                          </button>\n                        </div>\n                      }\n\n                      @if (localDataRows().length) {\n                        @for (row of localDataRows(); track $index; let rowIndex = $index) {\n                          <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-local-data-row-' + rowIndex\">\n                            <div class=\"editor-grid\">\n                              @for (dimField of localDataDimensionFields(); track dimField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ dimField }}</mat-label>\n                                  <input\n                                    matInput\n                                    [attr.data-testid]=\"'chart-local-data-dim-' + rowIndex + '-' + dimField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, dimField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, dimField, $event, 'dimension')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                              @for (metricField of localDataMetricFields(); track metricField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ metricField }}</mat-label>\n                                  <input\n                                    matInput\n                                    type=\"number\"\n                                    [attr.data-testid]=\"'chart-local-data-metric-' + rowIndex + '-' + metricField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, metricField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, metricField, $event, 'metric')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                            </div>\n                            <div class=\"editor-row-actions\">\n                              <button\n                                mat-button\n                                type=\"button\"\n                                [attr.data-testid]=\"'chart-local-data-remove-row-' + rowIndex\"\n                                (click)=\"removeLocalDataRow(rowIndex)\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                {{ t('praxis.charts.editor.localData.removeRow', 'Remove record') }}\n                              </button>\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"editor-empty\" data-testid=\"chart-local-data-empty\">\n                          {{ t('praxis.charts.editor.localData.empty', 'No local records configured yet. Add a record to replace the synthetic preview sample.') }}\n                        </div>\n                      }\n\n                      <div>\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-local-data-add-row\"\n                          (click)=\"addLocalDataRow()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          {{ t('praxis.charts.editor.localData.addRow', 'Add record') }}\n                        </button>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content class=\"editor-stack\">\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                  <p class=\"editor-caption\" data-testid=\"chart-editor-motion-hint\">\n                    {{ t('praxis.charts.editor.motion.hint', 'Controls initial entrance timing and smooth transitions when filters or query context change, with automatic volume thresholds for high-density datasets.') }}\n                  </p>\n\n                  <div>\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-simulate-motion\"\n                      (click)=\"simulateMotionTransition()\"\n                      [disabled]=\"normalizedDocument().motion?.enabled === false || !effectivePreview()\"\n                    >\n                      {{ t('praxis.charts.editor.motion.simulate', 'Simulate transition') }}\n                    </button>\n                  </div>\n                </mat-card-content>\n              </mat-card>\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-toggle-cluster\">\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                    <div class=\"editor-grid\">\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                    </div>\n\n                    @if (canApplyDomainSemanticPalette()) {\n                      <div class=\"editor-row-actions\">\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-editor-apply-domain-palette\"\n                          (click)=\"applyDomainSemanticPalette()\"\n                          [disabled]=\"isReadonly()\"\n                          [title]=\"t('praxis.charts.editor.appearance.applyDomainPaletteHint', 'Generates a custom palette with semantic colors (success, warning, danger, info) from the dimension categories.')\"\n                        >\n                          <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                          {{ t('praxis.charts.editor.appearance.applyDomainPalette', 'Apply domain semantic colors') }}\n                        </button>\n                      </div>\n                    }\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\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of tokenPaletteSwatches(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                          </span>\n                        }\n                      </div>\n                    } @else {\n                      <div class=\"editor-palette-swatches\" data-testid=\"chart-editor-palette-swatches\">\n                        @for (swatch of customPaletteColors(); track $index) {\n                          <span class=\"editor-palette-swatch-chip\" [title]=\"swatch\">\n                            <span class=\"editor-palette-swatch-dot\" [style.background]=\"swatch\"></span>\n                            <input\n                              type=\"color\"\n                              class=\"editor-palette-color-input\"\n                              [attr.data-testid]=\"'chart-editor-palette-color-' + $index\"\n                              [value]=\"swatchHexValue(swatch, $index)\"\n                              (input)=\"setCustomPaletteColorAt($index, $any($event.target).value)\"\n                              [disabled]=\"isReadonly()\"\n                            />\n                            <code class=\"editor-palette-swatch-code\">{{ swatch }}</code>\n                            <button\n                              type=\"button\"\n                              class=\"editor-palette-swatch-remove\"\n                              [attr.data-testid]=\"'chart-editor-palette-remove-' + $index\"\n                              (click)=\"removeCustomPaletteColor($index)\"\n                              [disabled]=\"isReadonly()\"\n                              [attr.aria-label]=\"t('praxis.charts.editor.appearance.removePaletteColor', 'Remove color')\"\n                            >\n                              \u00D7\n                            </button>\n                          </span>\n                        }\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          class=\"editor-palette-add-btn\"\n                          data-testid=\"chart-editor-add-palette-color\"\n                          (click)=\"addCustomPaletteColor()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          + {{ t('praxis.charts.editor.appearance.addPaletteColor', 'Add color') }}\n                        </button>\n                      </div>\n\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=\"2\"\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-state-group\">\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=\"1\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-state-group\">\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=\"1\" [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 (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showHeatmapPanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-heatmap-panel\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.heatmapTitle', 'Heatmap matrix guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.heatmapHint', 'Heatmap charts render a 2D matrix requiring two dimensions (X and Y axes) and one metric, using group-by for remote stats.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (canApplySemanticAnalyticsMapping()) {\n                  <div class=\"editor-row-actions\">\n                    <button\n                      mat-stroked-button\n                      type=\"button\"\n                      data-testid=\"chart-editor-smart-map-analytics\"\n                      (click)=\"applySemanticAnalyticsMapping()\"\n                      [disabled]=\"isReadonly()\"\n                      [title]=\"t('praxis.charts.editor.analytics.smartMapHint', 'Automatically selects the best dimension, metric, and aggregation from the governed field catalog.')\"\n                    >\n                      <mat-icon aria-hidden=\"true\">auto_fix_high</mat-icon>\n                      {{ t('praxis.charts.editor.analytics.smartMap', 'Suggest dimension & metric from schema') }}\n                    </button>\n                  </div>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select\n                                [ngModel]=\"dimension.field || ''\"\n                                (ngModelChange)=\"setDimensionField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('dimension', dimension.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('dimension').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-extraction-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionExtraction', 'Temporal extraction') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.extraction || ''\" (ngModelChange)=\"setDimensionExtraction($index, $event)\" [disabled]=\"isReadonly()\">\n                              <mat-option [value]=\"''\">\n                                {{ t('praxis.charts.editor.dimensionExtraction.none', 'None') }}\n                              </mat-option>\n                              @for (extraction of dimensionExtractions; track extraction) {\n                                <mat-option [value]=\"extraction\">\n                                  {{ t('praxis.charts.editor.dimensionExtraction.' + extraction, extraction) }}\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() || !canRemoveDimension()\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly() || !canAddDimension()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select\n                                [ngModel]=\"metric.field || ''\"\n                                (ngModelChange)=\"setMetricField($index, $event)\"\n                                (openedChange)=\"setFieldSearchTerm('')\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                <div class=\"editor-select-search\" (click)=\"$event.stopPropagation()\">\n                                  <mat-icon aria-hidden=\"true\">search</mat-icon>\n                                  <input\n                                    type=\"search\"\n                                    [placeholder]=\"t('praxis.charts.editor.field.fieldSearchPlaceholder', 'Search field...')\"\n                                    [ngModel]=\"fieldSearchTerm()\"\n                                    (ngModelChange)=\"setFieldSearchTerm($event)\"\n                                    (keydown)=\"onSelectSearchKeydown($event)\"\n                                  />\n                                </div>\n                                @for (field of filteredFieldOptions('metric', metric.field); track field.field) {\n                                  <mat-option [value]=\"field.field\" class=\"editor-rich-mat-option\">\n                                    <div class=\"editor-rich-option\">\n                                      <div class=\"editor-rich-option__body\">\n                                        <div class=\"editor-rich-option__header\">\n                                          <span class=\"editor-rich-option__label\">{{ field.label || field.field }}</span>\n                                          @if (field.type) {\n                                            <span class=\"editor-rich-option__badge\">{{ field.type }}</span>\n                                          }\n                                        </div>\n                                        @if (field.label && field.label !== field.field) {\n                                          <span class=\"editor-rich-option__code\">{{ field.field }}</span>\n                                        }\n                                        @if (field.description) {\n                                          <span class=\"editor-rich-option__description\">{{ field.description }}</span>\n                                        }\n                                      </div>\n                                    </div>\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                            }\n                            @if (!fieldOptions('metric').length) {\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <mat-card class=\"editor-card\">\n                <mat-card-content>\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                </mat-card-content>\n              </mat-card>\n            }\n          }\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\" [class.editor-issue--warning]=\"issue.severity === 'warning'\">\n                  <div class=\"editor-issue__header\">\n                    <strong>{{ issue.field }}</strong>\n                    @if (issueTargetSection(issue); as targetSection) {\n                      <button\n                        mat-button\n                        type=\"button\"\n                        class=\"editor-issue__jump\"\n                        [attr.data-testid]=\"'chart-editor-issue-jump-' + issue.code\"\n                        [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(targetSection) })\"\n                        (click)=\"setSection(targetSection)\"\n                      >\n                        {{ sectionLabel(targetSection) }} \u2192\n                      </button>\n                    }\n                  </div>\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()) {\n            <div\n              class=\"editor-empty editor-empty--actionable editor-preview-degraded\"\n              data-testid=\"chart-editor-preview-degraded-warning\"\n            >\n              <span>{{\n                effectivePreview()\n                  ? t('praxis.charts.editor.preview.degradedNotice', 'Aesthetic simulation active with synthetic sample data while contract validation issues remain open.')\n                  : t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.')\n              }}</span>\n              @if (firstInvalidSection(); as invalidSection) {\n                <button\n                  mat-stroked-button\n                  type=\"button\"\n                  data-testid=\"chart-editor-preview-jump-invalid\"\n                  [attr.aria-label]=\"t('praxis.charts.editor.issues.jumpToSection', 'Go to {{ section }}', { section: sectionLabel(invalidSection) })\"\n                  (click)=\"setSection(invalidSection)\"\n                >\n                  {{ sectionLabel(invalidSection) }} \u2192\n                </button>\n              }\n            </div>\n          }\n          @if (effectivePreview(); 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            <p class=\"editor-caption\" data-testid=\"chart-editor-preview-origin\">\n              {{\n                doc().source.kind === 'praxis.stats'\n                  ? t('praxis.charts.editor.preview.originStatsSynthetic', 'Previewing synthetic sample for governed backend stats (praxis.stats).')\n                  : chartPreview.dataOrigin === 'local'\n                    ? t('praxis.charts.editor.preview.originLocal', 'Previewing widget local dataset (inputs.data).')\n                    : t('praxis.charts.editor.preview.originSynthetic', 'Previewing synthetic sample data (no local dataset records).')\n              }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:16px;min-width:0}.editor-nav{display:flex;gap:6px;flex-wrap:wrap;padding:4px;border-radius:14px;background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .04));border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent)}.editor-nav button{border-radius:10px;border-color:transparent;display:inline-flex;align-items:center;gap:6px}.editor-nav button.active{background:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 22%,transparent);color:var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4));border-color:color-mix(in srgb,var(--pfx-settings-panel-primary, var(--md-sys-color-primary, #1263b4)) 48%,transparent);font-weight:600}.editor-nav__badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:6px;border-radius:999px;font-size:.7rem;font-weight:700;line-height:1;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 24%,transparent);color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface, inherit))}.editor-nav__badge--error{background:color-mix(in srgb,var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e)) 24%,transparent);color:var(--pfx-settings-panel-error, var(--md-sys-color-error, #b3261e))}:host ::ng-deep .mat-mdc-form-field-hint-wrapper,:host ::ng-deep .mat-mdc-form-field-error-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;padding-top:4px;line-height:1.35}:host ::ng-deep .mat-mdc-form-field-bottom-align:before{display:none}.editor-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 72%,transparent);background:var(--md-sys-color-surface-container-low, rgba(18, 99, 180, .03))}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}.editor-toggle-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}.editor-stack{display:grid;gap:14px}.editor-state-group{padding-top:14px;border-top:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 48%,transparent)}.editor-state-group:first-child{padding-top:0;border-top:0}.editor-palette-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.editor-palette-swatch-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 68%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 88%,transparent);font-size:.76rem}.editor-palette-swatch-dot{width:16px;height:16px;border-radius:50%;border:1px solid rgba(128,128,128,.35);flex-shrink:0}.editor-palette-color-input{width:22px;height:22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.editor-palette-swatch-code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.74rem;color:var(--md-sys-color-on-surface, inherit)}.editor-palette-swatch-remove{appearance:none;border:0;background:transparent;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.95rem;line-height:1;padding:0 2px;cursor:pointer}.editor-row-card{padding:14px;border-radius:14px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 54%,transparent);background:color-mix(in srgb,var(--pfx-settings-panel-surface, var(--md-sys-color-surface-container, transparent)) 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:12px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 10%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 24%,transparent)}.editor-issue--warning{background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 26%,transparent)}.editor-issue__header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:4px}.editor-issue strong{display:block;font-size:.84rem}.editor-issue__jump{min-height:26px;padding:0 8px;font-size:.76rem}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem;line-height:1.45}.editor-empty{padding:16px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 52%,transparent);border:1px dashed color-mix(in srgb,var(--md-sys-color-outline-variant, var(--md-sys-color-outline, #c5c7ce)) 64%,transparent);color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.88rem}.editor-empty--actionable{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.editor-select-trigger{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}.editor-select-trigger__icon{width:18px;height:18px;font-size:18px;flex-shrink:0;color:var(--md-sys-color-primary, #1263b4)}.editor-select-trigger__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.editor-select-trigger__code{flex-shrink:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;padding:1px 6px;border-radius:6px;background:color-mix(in srgb,currentColor 8%,transparent);color:color-mix(in srgb,currentColor 72%,transparent)}::ng-deep .editor-select-search{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--md-sys-color-surface-container-highest, #f4f6fa);border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 45%,transparent)}::ng-deep .editor-select-search mat-icon{width:18px;height:18px;font-size:18px;color:var(--md-sys-color-on-surface-variant, #5a5d67);flex-shrink:0}::ng-deep .editor-select-search input{width:100%;border:0;outline:none;background:transparent;color:inherit;font:inherit;font-size:.85rem}::ng-deep .mat-mdc-option.editor-rich-mat-option{min-height:54px;height:auto;padding-block:8px;align-items:flex-start}::ng-deep .editor-rich-option{display:flex;align-items:flex-start;gap:10px;min-width:0;width:100%;line-height:1.25}::ng-deep .editor-rich-option__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}::ng-deep .editor-rich-option__icon mat-icon{width:16px;height:16px;font-size:16px}::ng-deep .editor-rich-option__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}::ng-deep .editor-rich-option__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}::ng-deep .editor-rich-option__label{font-weight:600;font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__badge,.editor-resource-summary__badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:.68rem;font-weight:600;background:color-mix(in srgb,currentColor 10%,transparent);color:color-mix(in srgb,currentColor 78%,transparent);white-space:nowrap}::ng-deep .editor-rich-option__code,.editor-resource-summary__code{font-family:var(--pdx-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);font-size:.72rem;color:var(--md-sys-color-primary, #1263b4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .editor-rich-option__description,.editor-resource-summary__description{margin:0;font-size:.75rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.editor-resource-summary{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 6%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent)}.editor-resource-summary__icon{width:28px;height:28px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 12%,transparent);color:var(--md-sys-color-primary, #1263b4);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.editor-resource-summary__icon mat-icon{width:16px;height:16px;font-size:16px}.editor-resource-summary__body{display:grid;gap:2px;min-width:0;flex:1 1 auto}.editor-resource-summary__header{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}.editor-preview-degraded{margin-bottom:12px;background:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 10%,transparent);border-style:solid;border-color:color-mix(in srgb,var(--md-sys-color-tertiary, #f59e0b) 32%,transparent)}@container praxis-chart-editor (min-width: 841px){.editor-nav__preview-btn:not(.active){display:none}}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-shell--preview-active .editor-form{display:none}}@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 }] }], localDataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "localData", 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"] }], localDataChange: [{ type: i0.Output, args: ["localDataChange"] }] } });
 
 class PraxisChartWidgetConfigEditor {
@@ -15668,14 +17364,15 @@ const PRAXIS_CHART_AUTHORING_COVERAGE = [
 ];
 
 const chartStatsOperations = ['group-by', 'timeseries', 'distribution', 'comparison'];
-const chartKinds = ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter', 'funnel', 'pyramid', 'treemap', 'gauge'];
+const chartKinds = ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter', 'funnel', 'pyramid', 'treemap', 'gauge', 'heatmap'];
+const chartComparisonPeriodPresets = ['TODAY', 'YESTERDAY', 'LAST_7_DAYS', 'LAST_30_DAYS', 'THIS_MONTH', 'LAST_MONTH', 'THIS_QUARTER', 'THIS_YEAR'];
 const chartComparisonPeriodSchema = {
     type: 'object',
     required: ['field', 'timezone', 'preset', 'mode'],
     properties: {
         field: { type: 'string' },
         timezone: { type: 'string' },
-        preset: { enum: ['TODAY', 'YESTERDAY', 'LAST_7_DAYS', 'LAST_30_DAYS', 'THIS_MONTH', 'LAST_MONTH', 'THIS_QUARTER', 'THIS_YEAR'] },
+        preset: { enum: chartComparisonPeriodPresets },
         mode: { enum: ['PREVIOUS_ALIGNED', 'PREVIOUS_CALENDAR_PERIOD'] },
     },
 };
@@ -15693,6 +17390,16 @@ const chartDocumentSchema = {
                 },
             },
         },
+        {
+            if: { properties: { kind: { const: 'heatmap' } }, required: ['kind'] },
+            then: {
+                required: ['dimensions', 'metrics'],
+                properties: {
+                    dimensions: { type: 'array', minItems: 2, maxItems: 2 },
+                    metrics: { type: 'array', minItems: 1, maxItems: 1 },
+                },
+            },
+        },
         {
             if: { properties: { kind: { const: 'gauge' } }, required: ['kind'] },
             then: {
@@ -15761,6 +17468,10 @@ const chartDocumentSchema = {
                 options: {
                     type: 'object',
                     properties: {
+                        timezone: { type: 'string' },
+                        periodField: { type: 'string' },
+                        periodPreset: { enum: chartComparisonPeriodPresets },
+                        fillGaps: { type: 'boolean' },
                         comparisonPeriod: chartComparisonPeriodSchema,
                     },
                 },
@@ -15882,8 +17593,9 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                 required: ['field'],
                 properties: {
                     field: { type: 'string' },
+                    sourceField: { type: 'string' },
                     label: { oneOf: [{ type: 'string' }, { type: 'object' }] },
-                    aggregation: { enum: ['sum', 'avg', 'min', 'max', 'count', 'distinct-count'] },
+                    aggregation: { enum: ['sum', 'avg', 'min', 'max', 'count', 'distinct-count', 'avg-per-cycle-occurrence'] },
                     seriesKind: { enum: ['bar', 'line', 'area'] },
                     axis: { enum: ['primary', 'secondary'] },
                     color: { type: 'string' },
@@ -15900,8 +17612,9 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                             required: ['field'],
                             properties: {
                                 field: { type: 'string' },
+                                sourceField: { type: 'string' },
                                 label: { oneOf: [{ type: 'string' }, { type: 'object' }] },
-                                aggregation: { enum: ['sum', 'avg', 'min', 'max', 'count', 'distinct-count'] },
+                                aggregation: { enum: ['sum', 'avg', 'min', 'max', 'count', 'distinct-count', 'avg-per-cycle-occurrence'] },
                                 seriesKind: { enum: ['bar', 'line', 'area'] },
                                 axis: { enum: ['primary', 'secondary'] },
                                 color: { type: 'string' },
@@ -15980,8 +17693,8 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                     operation: { enum: chartStatsOperations },
                     limit: { type: 'integer', minimum: 1 },
                     comparisonPeriod: chartComparisonPeriodSchema,
-                    dimensions: { type: 'array', items: { type: 'object', required: ['field'], properties: { field: { type: 'string' }, role: { type: 'string' } } } },
-                    metrics: { type: 'array', items: { type: 'object', required: ['field'], properties: { field: { type: 'string' }, label: { oneOf: [{ type: 'string' }, { type: 'object' }] }, aggregation: { enum: ['sum', 'avg', 'min', 'max', 'count', 'distinct-count'] }, seriesKind: { enum: ['bar', 'line', 'area'] }, axis: { enum: ['primary', 'secondary'] }, color: { type: 'string' }, format: { type: 'string' }, afterField: { type: 'string' } } } },
+                    dimensions: { type: 'array', items: { type: 'object', required: ['field'], properties: { field: { type: 'string' }, role: { type: 'string' }, extraction: { type: 'string' }, alias: { type: 'string' } } } },
+                    metrics: { type: 'array', items: { type: 'object', required: ['field'], properties: { field: { type: 'string' }, sourceField: { type: 'string' }, label: { oneOf: [{ type: 'string' }, { type: 'object' }] }, aggregation: { enum: ['sum', 'avg', 'min', 'max', 'count', 'distinct-count', 'avg-per-cycle-occurrence'] }, seriesKind: { enum: ['bar', 'line', 'area'] }, axis: { enum: ['primary', 'secondary'] }, color: { type: 'string' }, format: { type: 'string' }, afterField: { type: 'string' } } } },
                 },
             },
             effects: [{ kind: 'compile-domain-patch', handler: 'chart-data-resource-bind', handlerContract: {
@@ -16353,4 +18066,4 @@ function createResourceStatsDataSource(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, ChartResourceCapabilityCatalogAdapter, PRAXIS_ANALYTICS_PRESENTATION_AUTHORING_MANIFEST, PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_AUTHORING_COVERAGE, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PRAXIS_MICRO_VISUALIZATION_COMPONENT_METADATA, PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, PraxisAnalyticsPresentationComponent, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, createResourceStatsDataSource, isPraxisChartPaletteToken, providePraxisAnalyticsPresentationMetadata, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, providePraxisMicroVisualizationMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, ChartResourceCapabilityCatalogAdapter, PRAXIS_ANALYTICS_PRESENTATION_AUTHORING_MANIFEST, PRAXIS_ANALYTICS_PRESENTATION_COMPONENT_METADATA, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_AUTHORING_COVERAGE, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HEATMAP_MATRIX, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PRAXIS_MICRO_VISUALIZATION_COMPONENT_METADATA, PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, PraxisAnalyticsPresentationComponent, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, createResourceStatsDataSource, isPraxisChartPaletteToken, providePraxisAnalyticsPresentationMetadata, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, providePraxisMicroVisualizationMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };