@praxisui/charts 9.0.0-beta.73 → 9.0.0-beta.74

package/fesm2022/praxisui-charts.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, Injector, ENVIRONMENT_INITIALIZER, Optional } from '@angular/core';
 import * as i1$1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisPresentationVisualization, providePraxisI18n, SETTINGS_PANEL_DATA, ComponentMetadataRegistry, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, normalizePraxisPresentationVisualization, providePraxisI18n, ComponentMetadataRegistry, ResourceDiscoveryService, SETTINGS_PANEL_DATA, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, AnalyticsStatsRequestBuilderService, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { throwError, map, of, isObservable, from, BehaviorSubject, Subscription } from 'rxjs';
+import { throwError, map, of, isObservable, from, firstValueFrom, timeout, BehaviorSubject, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
@@ -31,6 +31,53 @@ import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { PraxisTable } from '@praxisui/table';
 
+const PRAXIS_CHART_PALETTE_TOKENS = {
+    'brand-primary': ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'],
+    'brand-balanced': ['#1263b4', '#15803d', '#7c3aed', '#c2410c', '#be123c'],
+    status: ['#15803d', '#ca8a04', '#dc2626', '#2563eb', '#7c3aed'],
+    executive: ['#14b8a6', '#f59e0b', '#e11d48', '#8b5cf6', '#38bdf8'],
+};
+function isPraxisChartPaletteToken(value) {
+    return Object.prototype.hasOwnProperty.call(PRAXIS_CHART_PALETTE_TOKENS, value);
+}
+function resolvePraxisChartPaletteToken(value) {
+    return isPraxisChartPaletteToken(value)
+        ? [...PRAXIS_CHART_PALETTE_TOKENS[value]]
+        : undefined;
+}
+const PRAXIS_CHART_THEME_VARIANTS = {
+    default: {
+        palette: [...PRAXIS_CHART_PALETTE_TOKENS['brand-primary']],
+        legend: { position: 'bottom' },
+        surface: { mode: 'auto' },
+    },
+    compact: {
+        palette: [...PRAXIS_CHART_PALETTE_TOKENS['brand-balanced']],
+        borderRadius: 6,
+        legend: { position: 'bottom' },
+        surface: {
+            mode: 'embedded',
+            background: 'transparent',
+            borderWidth: 0,
+            borderRadius: 0,
+        },
+    },
+    executive: {
+        palette: [...PRAXIS_CHART_PALETTE_TOKENS.executive],
+        backgroundColor: '#111827',
+        textColor: '#f9fafb',
+        borderRadius: 8,
+        legend: { position: 'bottom' },
+        surface: {
+            mode: 'contained',
+            background: '#111827',
+            borderColor: '#374151',
+            borderWidth: 1,
+            borderRadius: 8,
+        },
+    },
+};
+
 class PraxisChartDataTransformerService {
     transform(config, rows) {
         if (config.type === 'pie' || config.type === 'donut') {
@@ -52,9 +99,10 @@ class PraxisChartDataTransformerService {
                 hasData: false,
             };
         }
-        const categories = Array.from(new Set(rows.map((row) => this.normalizeCategory(row[categoryField]))));
-        const timeAxis = config.axes?.x?.type === 'time';
-        const series = config.series.map((seriesConfig) => this.buildCartesianSeries(config, seriesConfig, rows, categories, timeAxis));
+        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));
         return {
             mode: 'cartesian',
             categories,
@@ -75,23 +123,17 @@ class PraxisChartDataTransformerService {
                 hasData: false,
             };
         }
-        const bucket = new Map();
-        for (const row of rows) {
-            const key = this.normalizeCategory(row[categoryField]);
-            const nextValue = this.extractMetricValue(row, seriesConfig);
-            const current = bucket.get(key);
-            bucket.set(key, {
-                value: (current?.value ?? 0) + nextValue,
-                source: current?.source ?? row,
-            });
-        }
-        const slices = Array.from(bucket.entries()).map(([name, item]) => ({
-            id: `${seriesConfig.id}:${name}`,
-            name,
-            value: item.value,
-            color: seriesConfig.color,
-            data: this.buildPointData(item.source, item.value),
-        }));
+        const slices = this.buildCategoryBuckets(config, rows, categoryField)
+            .map((bucket) => {
+            const value = bucket.rows.reduce((sum, row) => sum + this.extractMetricValue(row, seriesConfig), 0);
+            return {
+                id: `${seriesConfig.id}:${bucket.identity}`,
+                name: bucket.label,
+                value,
+                color: seriesConfig.color,
+                data: this.buildPointData(bucket.rows[0], value),
+            };
+        });
         return {
             mode: 'pie',
             categories: slices.map((slice) => slice.name),
@@ -100,15 +142,7 @@ class PraxisChartDataTransformerService {
             hasData: slices.some((slice) => slice.value > 0),
         };
     }
-    buildCartesianSeries(config, seriesConfig, rows, categories, timeAxis) {
-        const categoryField = config.axes?.x?.field;
-        const byCategory = new Map();
-        for (const row of rows) {
-            const key = this.normalizeCategory(row[categoryField]);
-            const bucket = byCategory.get(key) ?? [];
-            bucket.push(row);
-            byCategory.set(key, bucket);
-        }
+    buildCartesianSeries(config, seriesConfig, categoryBuckets, timeAxis) {
         return {
             id: seriesConfig.id,
             name: seriesConfig.name ?? seriesConfig.metric?.label ?? seriesConfig.id,
@@ -119,16 +153,94 @@ class PraxisChartDataTransformerService {
             area: this.isAreaLikeSeries(config, seriesConfig),
             color: seriesConfig.color,
             labelsVisible: seriesConfig.labels?.visible ?? false,
-            points: categories.map((category) => {
-                const bucket = byCategory.get(category) ?? [];
-                const value = bucket.length ? this.aggregate(bucket, seriesConfig) : null;
-                const source = bucket[0];
+            points: categoryBuckets.map((bucket) => {
+                const value = this.aggregate(bucket.rows, seriesConfig);
+                const source = bucket.rows[0];
                 return source
-                    ? this.buildPointData(source, timeAxis ? [category, value] : value)
-                    : (timeAxis ? [category, value] : value);
+                    ? this.buildPointData(source, timeAxis ? [bucket.coordinate, value] : value)
+                    : (timeAxis ? [bucket.coordinate, value] : value);
             }),
         };
     }
+    buildCategoryBuckets(config, rows, categoryField) {
+        const buckets = new Map();
+        const usesCanonicalStatsIdentity = config.dataSource?.kind === 'remote'
+            && config.dataSource.query?.sourceKind === 'praxis.stats';
+        const usesCanonicalTimeCoordinate = usesCanonicalStatsIdentity
+            && this.usesCanonicalTimeCoordinates(config);
+        for (const row of rows) {
+            const category = this.normalizeCategory(row[categoryField]);
+            const coordinate = usesCanonicalTimeCoordinate
+                ? this.resolveCanonicalTimeCoordinate(row, categoryField, category)
+                : category;
+            const label = usesCanonicalTimeCoordinate
+                ? this.resolveTimePresentationLabel(row, category)
+                : category;
+            const identity = this.resolveCategoryIdentity(row, label, coordinate, usesCanonicalStatsIdentity, usesCanonicalTimeCoordinate);
+            const bucket = buckets.get(identity);
+            if (bucket) {
+                bucket.rows.push(row);
+                continue;
+            }
+            buckets.set(identity, {
+                identity,
+                label,
+                coordinate,
+                rows: [row],
+            });
+        }
+        return Array.from(buckets.values());
+    }
+    resolveCategoryIdentity(row, label, coordinate, usesCanonicalStatsIdentity, usesCanonicalTimeCoordinate) {
+        if (!usesCanonicalStatsIdentity) {
+            return label;
+        }
+        if (usesCanonicalTimeCoordinate) {
+            return `time:${this.typedIdentity(coordinate)}`;
+        }
+        if (row['key'] !== null && row['key'] !== undefined) {
+            return `key:${this.typedIdentity(row['key'])}`;
+        }
+        return `label:${label}`;
+    }
+    resolveCanonicalTimeCoordinate(row, categoryField, fallback) {
+        return this.extractTimeCoordinate(row['start'])
+            ?? this.extractTimeCoordinate(row['key'])
+            ?? this.extractTimeCoordinate(row[categoryField])
+            ?? fallback;
+    }
+    usesCanonicalTimeCoordinates(config) {
+        if (config.axes?.x?.type === 'time') {
+            return true;
+        }
+        return config.dataSource?.kind === 'remote'
+            && config.dataSource.query?.sourceKind === 'praxis.stats'
+            && config.dataSource.query.statsOperation === 'timeseries';
+    }
+    extractTimeCoordinate(value) {
+        const candidate = this.extractScatterXValue(value, 'time');
+        if (candidate === null) {
+            return null;
+        }
+        if (typeof candidate === 'string'
+            && !/^\d{4}-\d{2}-\d{2}(?:[T\s]\d{2}:\d{2}.*)?$/.test(candidate)) {
+            return null;
+        }
+        const timestamp = typeof candidate === 'number' ? new Date(candidate).getTime() : Date.parse(candidate);
+        return Number.isFinite(timestamp) ? candidate : null;
+    }
+    resolveTimePresentationLabel(row, fallback) {
+        const label = row['label'];
+        return label === null || label === undefined || label === ''
+            ? fallback
+            : this.normalizeCategory(label);
+    }
+    typedIdentity(value) {
+        if (value instanceof Date) {
+            return `date:${value.toISOString()}`;
+        }
+        return `${typeof value}:${String(value)}`;
+    }
     buildPointData(row, value) {
         return {
             ...row,
@@ -295,54 +407,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-const PRAXIS_CHART_PALETTE_TOKENS = {
-    'brand-primary': ['#1263b4', '#0f766e', '#f08c00', '#c92a2a', '#7b61ff'],
-    'brand-balanced': ['#1263b4', '#15803d', '#7c3aed', '#c2410c', '#be123c'],
-    status: ['#15803d', '#ca8a04', '#dc2626', '#2563eb', '#7c3aed'],
-    executive: ['#14b8a6', '#f59e0b', '#e11d48', '#8b5cf6', '#38bdf8'],
-};
-function isPraxisChartPaletteToken(value) {
-    return Object.prototype.hasOwnProperty.call(PRAXIS_CHART_PALETTE_TOKENS, value);
-}
-function resolvePraxisChartPaletteToken(value) {
-    return isPraxisChartPaletteToken(value)
-        ? [...PRAXIS_CHART_PALETTE_TOKENS[value]]
-        : undefined;
-}
-const PRAXIS_CHART_THEME_VARIANTS = {
-    default: {
-        palette: [...PRAXIS_CHART_PALETTE_TOKENS['brand-primary']],
-        legend: { position: 'bottom' },
-        surface: { mode: 'auto' },
-    },
-    compact: {
-        palette: [...PRAXIS_CHART_PALETTE_TOKENS['brand-balanced']],
-        textColor: '#374151',
-        borderRadius: 6,
-        legend: { position: 'bottom' },
-        surface: {
-            mode: 'embedded',
-            background: 'transparent',
-            borderWidth: 0,
-            borderRadius: 0,
-        },
-    },
-    executive: {
-        palette: [...PRAXIS_CHART_PALETTE_TOKENS.executive],
-        backgroundColor: '#111827',
-        textColor: '#f9fafb',
-        borderRadius: 8,
-        legend: { position: 'bottom' },
-        surface: {
-            mode: 'contained',
-            background: '#111827',
-            borderColor: '#374151',
-            borderWidth: 1,
-            borderRadius: 8,
-        },
-    },
-};
-
 class ChartContractNormalizerService {
     normalize(input) {
         let document = structuredClone(input);
@@ -504,9 +568,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const PRAXIS_X_UI_CHART_AUTHORABLE_VERSION = '0.1.0';
+
 class ChartContractValidationService {
     validate(document) {
         const issues = [];
+        this.validateVersion(document, issues);
         this.validateSource(document, issues);
         this.validateTheme(document, issues);
         this.validateSizing(document, issues);
@@ -518,6 +585,11 @@ class ChartContractValidationService {
             issues,
         };
     }
+    validateVersion(document, issues) {
+        if (document.version !== PRAXIS_X_UI_CHART_AUTHORABLE_VERSION) {
+            issues.push(this.error('unsupported-version', 'version', `x-ui.chart version="${document.version}" is not authorable in @praxisui/charts; expected ${PRAXIS_X_UI_CHART_AUTHORABLE_VERSION}.`));
+        }
+    }
     validateSource(document, issues) {
         if (document.source.kind !== 'praxis.stats' && document.source.kind !== 'derived') {
             issues.push(this.error('unsupported-source-kind', 'source.kind', `x-ui.chart source.kind="${document.source.kind}" is not supported in @praxisui/charts.`));
@@ -525,6 +597,17 @@ class ChartContractValidationService {
         if (document.source.kind === 'praxis.stats' && !document.source.resource?.trim()) {
             issues.push(this.error('missing-resource', 'source.resource', 'x-ui.chart source.resource is required for source.kind="praxis.stats".'));
         }
+        const rawStatsResource = document.source.kind === 'praxis.stats'
+            ? document.source.resource
+            : undefined;
+        const statsResource = rawStatsResource?.trim();
+        if (statsResource
+            && (rawStatsResource !== statsResource
+                || !statsResource.startsWith('/')
+                || statsResource.startsWith('//')
+                || /^[a-z][a-z\d+.-]*:/i.test(statsResource))) {
+            issues.push(this.error('invalid-resource-path', 'source.resource', 'x-ui.chart source.resource must be a governed root-relative path starting with exactly one "/".'));
+        }
         if (document.source.kind === 'praxis.stats' && !document.source.operation) {
             issues.push(this.error('missing-operation', 'source.operation', 'x-ui.chart source.operation is required for source.kind="praxis.stats".'));
         }
@@ -546,6 +629,11 @@ class ChartContractValidationService {
         if (!document.metrics?.length) {
             issues.push(this.error('missing-metric', 'metrics', 'x-ui.chart requires at least one metric.'));
         }
+        document.metrics?.forEach((metric, index) => {
+            if (!metric.field?.trim()) {
+                issues.push(this.error('metric-field-required', `metrics[${index}].field`, 'x-ui.chart metric.field is required.'));
+            }
+        });
         document.metrics
             ?.filter((metric) => metric.aggregation === 'distinct-count' && !metric.field?.trim())
             .forEach((_metric, index) => {
@@ -580,6 +668,11 @@ class ChartContractValidationService {
     }
     validateKinds(document, issues) {
         const metricCount = document.metrics?.length ?? 0;
+        document.dimensions?.forEach((dimension, index) => {
+            if (!dimension.field?.trim()) {
+                issues.push(this.error('dimension-field-required', `dimensions[${index}].field`, 'x-ui.chart dimension.field is required.'));
+            }
+        });
         if (document.kind !== 'pie' && document.kind !== 'donut' && !document.dimensions?.length) {
             issues.push(this.error('missing-dimension', 'dimensions', 'x-ui.chart cartesian charts require at least one dimension.'));
         }
@@ -595,17 +688,7 @@ class ChartContractValidationService {
         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.'));
         }
-        if (document.source.kind === 'praxis.stats'
-            && document.source.operation === 'distribution'
-            && metricCount > 1) {
-            issues.push(this.error('distribution-single-metric', 'metrics', 'x-ui.chart praxis.stats distribution supports only a single metric in @praxisui/charts.'));
-        }
-        if (document.source.kind === 'praxis.stats'
-            && document.source.operation === 'distribution'
-            && document.source.options?.mode === 'histogram'
-            && !(Number(document.source.options.bucketSize) > 0)) {
-            issues.push(this.error('distribution-histogram-missing-bucket-size', 'source.options.bucketSize', 'x-ui.chart praxis.stats histogram distribution requires source.options.bucketSize to match the backend contract.'));
-        }
+        this.validateDistribution(document, issues);
         if (document.kind === 'horizontal-bar' && document.orientation && document.orientation !== 'horizontal') {
             issues.push(this.error('horizontal-bar-orientation', 'orientation', 'x-ui.chart kind="horizontal-bar" requires orientation="horizontal" when orientation is provided.'));
         }
@@ -622,6 +705,48 @@ class ChartContractValidationService {
             issues.push(this.error('combo-operation-unsupported', 'source.operation', 'x-ui.chart combo charts over praxis.stats support only group-by or timeseries operations in @praxisui/charts.'));
         }
     }
+    validateDistribution(document, issues) {
+        if (document.source.kind !== 'praxis.stats'
+            || document.source.operation !== 'distribution') {
+            return;
+        }
+        const dimensions = document.dimensions ?? [];
+        const metrics = document.metrics ?? [];
+        if (dimensions.length !== 1) {
+            issues.push(this.error('distribution-single-dimension', 'dimensions', 'x-ui.chart praxis.stats distribution requires exactly one dimension.'));
+        }
+        if (metrics.length !== 1) {
+            issues.push(this.error('distribution-single-metric', 'metrics', 'x-ui.chart praxis.stats distribution requires exactly one metric.'));
+        }
+        const options = document.source.options;
+        const mode = options?.mode ?? 'terms';
+        if (mode !== 'terms' && mode !== 'histogram') {
+            issues.push(this.error('distribution-mode-unsupported', 'source.options.mode', `x-ui.chart praxis.stats distribution mode="${String(mode)}" is not supported; expected terms or histogram.`));
+            return;
+        }
+        if (mode === 'terms') {
+            if (options?.bucketSize !== undefined || options?.bucketCount !== undefined) {
+                issues.push(this.error('distribution-terms-histogram-options', 'source.options', 'x-ui.chart praxis.stats terms distribution does not support source.options.bucketSize or source.options.bucketCount.'));
+            }
+            return;
+        }
+        const bucketSize = options?.bucketSize;
+        if (typeof bucketSize !== 'number' || !Number.isFinite(bucketSize) || bucketSize <= 0) {
+            issues.push(this.error('distribution-histogram-missing-bucket-size', 'source.options.bucketSize', 'x-ui.chart praxis.stats histogram distribution requires a finite source.options.bucketSize greater than zero.'));
+        }
+        const bucketCount = options?.bucketCount;
+        if (bucketCount !== undefined
+            && (typeof bucketCount !== 'number'
+                || !Number.isFinite(bucketCount)
+                || !Number.isInteger(bucketCount)
+                || bucketCount <= 0)) {
+            issues.push(this.error('distribution-histogram-bucket-count-invalid', 'source.options.bucketCount', 'x-ui.chart praxis.stats histogram source.options.bucketCount must be a positive integer when provided.'));
+        }
+        const metric = metrics[0];
+        if (metrics.length === 1 && (metric.aggregation ?? 'count') !== 'count') {
+            issues.push(this.error('distribution-histogram-count-only', 'metrics[0].aggregation', 'x-ui.chart praxis.stats histogram distribution requires COUNT; the canonical mapper materializes this backend metric without a field.'));
+        }
+    }
     validateEvents(document, issues) {
         this.validateEventAction('pointClick', document.events?.pointClick, issues);
         this.validateEventAction('drillDown', document.events?.drillDown, issues);
@@ -856,7 +981,7 @@ class PraxisChartCanonicalContractMapperService {
     }
     buildInteractions(contract) {
         return {
-            pointClick: Boolean(contract.events?.pointClick || contract.events?.drillDown),
+            pointClick: Boolean(contract.events?.pointClick),
             selection: Boolean(contract.events?.selectionChange),
             drillDown: Boolean(contract.events?.drillDown),
             crossFilter: Boolean(contract.events?.crossFilter),
@@ -1201,13 +1326,24 @@ class PraxisChartStatsApiService {
             return [];
         }
         const metricBindings = this.resolveMetricBindings(config, request, response);
+        if ('periodField' in response) {
+            return response.buckets.map((bucket) => {
+                const category = this.resolveBucketCategory(bucket, categoryField, config);
+                return {
+                    [categoryField]: category,
+                    ...this.projectComparisonMetricValues(metricBindings, bucket.values),
+                    key: bucket.key ?? null,
+                    label: bucket.label ?? category,
+                };
+            });
+        }
         if ('points' in response) {
             return response.points.map((point) => {
-                const category = point.label ?? point.start ?? point.end ?? '';
+                const category = point.start ?? point.end ?? point.label ?? '';
                 return {
                     [categoryField]: category,
                     ...this.projectMetricValues(metricBindings, point.values, point.value, point.count),
-                    key: point.start ?? point.label ?? point.end ?? category,
+                    key: point.start ?? point.end ?? point.label ?? category,
                     label: point.label ?? category,
                     value: point.value ?? null,
                     count: point.count ?? null,
@@ -1358,6 +1494,16 @@ class PraxisChartStatsApiService {
             return acc;
         }, {});
     }
+    projectComparisonMetricValues(bindings, values) {
+        return bindings.reduce((acc, binding) => {
+            const match = /^__praxisComparison_(.+)_(current|previous)$/.exec(binding.field);
+            const value = match
+                ? values?.[match[1]]?.[match[2]]
+                : undefined;
+            acc[binding.field] = this.resolveMetricValue(value, null);
+            return acc;
+        }, {});
+    }
     buildStatsUrl(statsPath) {
         const base = this.buildDefaultApiBase();
         const normalizedStatsPath = this.normalizePath(statsPath);
@@ -1422,7 +1568,9 @@ class PraxisChartComponent {
     availableFields = input([], ...(ngDevMode ? [{ debugName: "availableFields" }] : /* istanbul ignore next */ []));
     availableTargets = input([], ...(ngDevMode ? [{ debugName: "availableTargets" }] : /* istanbul ignore next */ []));
     pointClick = output();
+    pointAction = output();
     selectionChange = output();
+    drillDown = output();
     crossFilter = output();
     queryRequest = output();
     loadStateChange = output();
@@ -1441,6 +1589,8 @@ class PraxisChartComponent {
     resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "resizeObserver" }] : /* istanbul ignore next */ []));
     resizeObserverHost = null;
     shellObserver = signal(null, ...(ngDevMode ? [{ debugName: "shellObserver" }] : /* istanbul ignore next */ []));
+    themeObserver = signal(null, ...(ngDevMode ? [{ debugName: "themeObserver" }] : /* istanbul ignore next */ []));
+    inheritedTheme = signal(null, ...(ngDevMode ? [{ debugName: "inheritedTheme" }] : /* istanbul ignore next */ []));
     currentLoadState = signal('idle', ...(ngDevMode ? [{ debugName: "currentLoadState" }] : /* istanbul ignore next */ []));
     remoteResolvedData = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedData" }] : /* istanbul ignore next */ []));
     remoteRuntimeState = signal('idle', ...(ngDevMode ? [{ debugName: "remoteRuntimeState" }] : /* istanbul ignore next */ []));
@@ -1456,11 +1606,14 @@ class PraxisChartComponent {
     previousRemoteSignature = null;
     previousRemoteDataResolver = undefined;
     previousDocumentSignature = null;
+    inheritedThemeSignature = null;
     editorSessionSubscriptions = [];
+    remoteRequestSubscription = null;
+    remoteRequestSequence = 0;
     effectiveConfig = computed(() => {
-        const base = this.mappedRuntimeConfig() ?? this.config();
-        const runtimeQueryContext = normalizePraxisDataQueryContextBridge(this.queryContext());
-        const runtimeFilters = resolvePraxisFilterCriteriaBridge(this.filterCriteria(), runtimeQueryContext);
+        const base = this.applyInheritedTheme(this.mappedRuntimeConfig() ?? this.config(), this.inheritedTheme());
+        const runtimeQueryContext = normalizePraxisDataQueryContext(this.queryContext());
+        const runtimeFilters = resolvePraxisFilterCriteria(this.filterCriteria(), runtimeQueryContext);
         if (!runtimeQueryContext
             && !Object.keys(runtimeFilters).length) {
             return base;
@@ -1535,18 +1688,17 @@ class PraxisChartComponent {
             };
         }
         if (remoteState === 'error') {
+            const technicalDetails = this.remoteTechnicalError() ?? config.state?.error?.technicalDetails;
             return {
                 ...config,
                 preferredLoadState: 'error',
-                state: config.state?.error
-                    ? {
-                        ...config.state,
-                        error: {
-                            ...config.state.error,
-                            technicalDetails: this.remoteTechnicalError() ?? config.state.error.technicalDetails,
-                        },
-                    }
-                    : config.state,
+                state: {
+                    ...config.state,
+                    error: {
+                        ...config.state?.error,
+                        technicalDetails,
+                    },
+                },
             };
         }
         if (remoteData !== null) {
@@ -1615,6 +1767,7 @@ class PraxisChartComponent {
     constructor() {
         afterNextRender(() => {
             this.observeShellSizingContext();
+            this.observeThemeContext();
         });
         effect(() => {
             const document = this.chartDocument();
@@ -1647,8 +1800,9 @@ class PraxisChartComponent {
             const config = this.effectiveConfig();
             const explicitData = this.data();
             const remoteDataResolver = this.remoteDataResolver();
+            const queryContext = normalizePraxisDataQueryContext(this.queryContext());
             const nextSignature = explicitData === null || explicitData === undefined
-                ? this.buildRemoteSignature(config)
+                ? this.buildRemoteSignature(config, queryContext)
                 : null;
             if (nextSignature === this.previousRemoteSignature
                 && remoteDataResolver === this.previousRemoteDataResolver) {
@@ -1656,6 +1810,7 @@ class PraxisChartComponent {
             }
             this.previousRemoteSignature = nextSignature;
             this.previousRemoteDataResolver = remoteDataResolver;
+            this.cancelRemoteDataRequest();
             this.remoteResolvedData.set(null);
             this.remoteRuntimeState.set('idle');
             this.remoteTechnicalError.set(null);
@@ -1676,25 +1831,42 @@ class PraxisChartComponent {
             if (this.remoteRuntimeState() === 'loading' || this.remoteResolvedData() !== null) {
                 return;
             }
+            const queryContext = normalizePraxisDataQueryContext(this.queryContext());
             const event = {
                 chartId: effectiveConfig.id,
                 dataSource: effectiveConfig.dataSource,
                 query: effectiveConfig.dataSource.query,
-                queryContext: normalizePraxisDataQueryContextBridge(this.queryContext()),
+                queryContext,
             };
             this.queryRequest.emit(event);
+            const unsupportedExpression = resolveUnsupportedStatsFilterExpressionDiagnostic(queryContext);
+            if (unsupportedExpression) {
+                this.cancelRemoteDataRequest();
+                this.remoteRuntimeState.set('error');
+                this.remoteResolvedData.set([]);
+                this.remoteTechnicalError.set(unsupportedExpression);
+                return;
+            }
             this.remoteRuntimeState.set('loading');
             this.remoteResolvedData.set([]);
             this.remoteTechnicalError.set(null);
-            this.executeRemoteDataRequest(event, effectiveConfig)
+            this.cancelRemoteDataRequest();
+            const requestId = ++this.remoteRequestSequence;
+            this.remoteRequestSubscription = this.executeRemoteDataRequest(event, effectiveConfig)
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe({
                 next: (rows) => {
+                    if (requestId !== this.remoteRequestSequence) {
+                        return;
+                    }
                     this.remoteResolvedData.set(rows);
                     this.remoteRuntimeState.set('ready');
                     this.remoteTechnicalError.set(null);
                 },
                 error: (error) => {
+                    if (requestId !== this.remoteRequestSequence) {
+                        return;
+                    }
                     this.remoteResolvedData.set([]);
                     this.remoteRuntimeState.set('error');
                     this.remoteTechnicalError.set(error instanceof Error && error.message.trim()
@@ -1733,8 +1905,10 @@ class PraxisChartComponent {
         });
         this.destroyRef.onDestroy(() => {
             this.clearEditorSessionSubscriptions();
+            this.cancelRemoteDataRequest();
             this.destroyResizeObserver();
             this.shellObserver()?.disconnect();
+            this.themeObserver()?.disconnect();
             this.cancelScheduledResize();
             this.cancelScheduledRender();
             this.engine.destroy();
@@ -1793,13 +1967,45 @@ class PraxisChartComponent {
         this.pointClick.emit(event);
         const config = this.renderConfig();
         const interactions = config.interactions;
-        if (!interactions?.selection && !interactions?.crossFilter) {
+        if (!interactions?.pointClick && !interactions?.selection && !interactions?.drillDown && !interactions?.crossFilter) {
             return;
         }
         const selectionEvent = this.buildSelectionEvent(config, event);
+        if (interactions.pointClick) {
+            const pointAction = interactions.eventActions?.pointClick;
+            if (pointAction) {
+                this.pointAction.emit({
+                    chartId: config.id ?? event.chartId,
+                    event: 'pointClick',
+                    point: {
+                        ...event,
+                        chartId: config.id ?? event.chartId,
+                    },
+                    filters: this.buildEventFilters(config, event, pointAction.mapping),
+                    target: pointAction.target,
+                    action: pointAction,
+                });
+            }
+        }
         if (interactions.selection) {
             this.selectionChange.emit(selectionEvent);
         }
+        if (interactions.drillDown) {
+            const drillDownAction = interactions.eventActions?.drillDown;
+            if (drillDownAction) {
+                this.drillDown.emit({
+                    chartId: config.id ?? event.chartId,
+                    filters: this.buildEventFilters(config, event, drillDownAction.mapping),
+                    target: drillDownAction.target,
+                    action: drillDownAction,
+                    source: selectionEvent,
+                    point: {
+                        ...event,
+                        chartId: config.id ?? event.chartId,
+                    },
+                });
+            }
+        }
         if (interactions.crossFilter) {
             const crossFilterAction = interactions.eventActions?.crossFilter;
             this.crossFilter.emit({
@@ -1818,6 +2024,7 @@ class PraxisChartComponent {
             ...event,
             chartId: config.id ?? event.chartId,
             selected: true,
+            mode: 'single',
             filters,
             action,
         };
@@ -1913,7 +2120,7 @@ class PraxisChartComponent {
         const trimmed = value?.trim();
         return trimmed || null;
     }
-    buildRemoteSignature(config) {
+    buildRemoteSignature(config, queryContext) {
         if (config.dataSource?.kind !== 'remote') {
             return null;
         }
@@ -1921,8 +2128,14 @@ class PraxisChartComponent {
             id: config.id,
             resourcePath: config.dataSource.resourcePath,
             query: config.dataSource.query,
+            queryContext,
         });
     }
+    cancelRemoteDataRequest() {
+        this.remoteRequestSequence += 1;
+        this.remoteRequestSubscription?.unsubscribe();
+        this.remoteRequestSubscription = null;
+    }
     clearEditorSessionSubscriptions() {
         for (const subscription of this.editorSessionSubscriptions) {
             subscription.unsubscribe();
@@ -1950,6 +2163,100 @@ class PraxisChartComponent {
         });
         this.shellObserver.set(observer);
     }
+    observeThemeContext() {
+        const host = this.hostElement.nativeElement;
+        this.syncInheritedTheme(host);
+        if (typeof MutationObserver === 'undefined') {
+            return;
+        }
+        this.themeObserver()?.disconnect();
+        const observer = new MutationObserver(() => {
+            this.syncInheritedTheme(host);
+        });
+        let current = host;
+        while (current) {
+            observer.observe(current, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'style',
+                    'data-theme',
+                    'data-theme-preset',
+                    'data-color-scheme',
+                ],
+            });
+            current = current.parentElement;
+        }
+        this.themeObserver.set(observer);
+    }
+    syncInheritedTheme(host) {
+        if (typeof getComputedStyle !== 'function') {
+            return;
+        }
+        const pageThemePresetId = host
+            .closest('.pdx-page-wrapper')
+            ?.getAttribute('data-theme-preset')
+            ?.trim();
+        const chartThemePresetId = pageThemePresetId
+            ? BUILTIN_PAGE_THEME_PRESETS[pageThemePresetId]?.chartThemePreset?.trim()
+            : undefined;
+        const preset = chartThemePresetId && this.isThemeVariant(chartThemePresetId)
+            ? this.cloneTheme(PRAXIS_CHART_THEME_VARIANTS[chartThemePresetId])
+            : {};
+        const hostTextColor = getComputedStyle(host).color.trim();
+        const theme = {
+            ...preset,
+            textColor: preset.textColor || hostTextColor || undefined,
+        };
+        const normalizedTheme = Object.values(theme).some((value) => value !== undefined)
+            ? theme
+            : null;
+        const signature = normalizedTheme ? JSON.stringify(normalizedTheme) : null;
+        if (signature === this.inheritedThemeSignature) {
+            return;
+        }
+        this.inheritedThemeSignature = signature;
+        this.inheritedTheme.set(normalizedTheme);
+    }
+    isThemeVariant(value) {
+        return Object.prototype.hasOwnProperty.call(PRAXIS_CHART_THEME_VARIANTS, value);
+    }
+    applyInheritedTheme(config, inherited) {
+        if (!inherited) {
+            return config;
+        }
+        const explicit = config.theme;
+        return {
+            ...config,
+            theme: {
+                palette: explicit?.palette ?? inherited.palette,
+                backgroundColor: explicit?.backgroundColor ?? inherited.backgroundColor,
+                textColor: explicit?.textColor ?? inherited.textColor,
+                borderRadius: explicit?.borderRadius ?? inherited.borderRadius,
+                legend: this.mergeOptionalThemeObject(inherited.legend, explicit?.legend),
+                tooltip: this.mergeOptionalThemeObject(inherited.tooltip, explicit?.tooltip),
+                surface: this.mergeOptionalThemeObject(inherited.surface, explicit?.surface),
+            },
+        };
+    }
+    cloneTheme(theme) {
+        return {
+            ...theme,
+            palette: theme.palette ? [...theme.palette] : undefined,
+            legend: this.mergeOptionalThemeObject(undefined, theme.legend),
+            tooltip: this.mergeOptionalThemeObject(undefined, theme.tooltip),
+            surface: this.mergeOptionalThemeObject(undefined, theme.surface),
+        };
+    }
+    mergeOptionalThemeObject(defaults, explicit) {
+        if (!defaults && !explicit) {
+            return undefined;
+        }
+        return {
+            ...(defaults ?? {}),
+            ...(explicit ?? {}),
+        };
+    }
     shouldFillShellContainer(shell) {
         const rect = shell.getBoundingClientRect();
         const hasControlledHeight = (rect.height || shell.clientHeight || shell.offsetHeight) > 0;
@@ -2018,7 +2325,7 @@ class PraxisChartComponent {
         this.resizeFrameId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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 }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, queryContext: { classPropertyName: "queryContext", publicName: "queryContext", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", selectionChange: "selectionChange", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    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 }, 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" }, host: { properties: { "class.praxis-chart-host-fill-container": "isFillContainerMode()" } }, viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section
       class="praxis-chart-shell"
       [class.praxis-chart-shell-fill-container]="isFillContainerMode()"
@@ -2092,7 +2399,7 @@ class PraxisChartComponent {
         <div #chartHost class="praxis-chart-host"></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
@@ -2172,65 +2479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         <div #chartHost class="praxis-chart-host"></div>
       }
     </section>
-  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
-function normalizeFilterCriteria(criteria) {
-    if (!criteria)
-        return null;
-    const next = Object.entries(criteria).reduce((acc, [key, value]) => {
-        if (value === null || value === undefined)
-            return acc;
-        if (Array.isArray(value) && value.length === 0)
-            return acc;
-        if (typeof value === 'string' && value.trim() === '')
-            return acc;
-        acc[key] = value;
-        return acc;
-    }, {});
-    return Object.keys(next).length ? next : null;
-}
-function normalizePraxisDataQueryContextBridge(context) {
-    if (!context || typeof context !== 'object')
-        return null;
-    const filters = normalizeFilterCriteria(context.filters || null);
-    const meta = normalizeFilterCriteria(context.meta || null);
-    const sort = Array.isArray(context.sort)
-        ? context.sort
-            .map((item) => (typeof item === 'string' ? item.trim() : ''))
-            .filter((item) => item.length > 0)
-        : [];
-    const limit = typeof context.limit === 'number' && Number.isFinite(context.limit)
-        ? Math.max(0, Math.trunc(context.limit))
-        : null;
-    const page = context.page && typeof context.page === 'object'
-        ? {
-            index: typeof context.page.index === 'number' && Number.isFinite(context.page.index)
-                ? Math.max(0, Math.trunc(context.page.index))
-                : null,
-            size: typeof context.page.size === 'number' && Number.isFinite(context.page.size)
-                ? Math.max(0, Math.trunc(context.page.size))
-                : null,
-        }
-        : null;
-    const next = {};
-    if (filters)
-        next.filters = filters;
-    if (sort.length)
-        next.sort = sort;
-    if (limit !== null)
-        next.limit = limit;
-    if (page && (page.index !== null || page.size !== null))
-        next.page = page;
-    if (meta)
-        next.meta = meta;
-    return Object.keys(next).length ? next : null;
-}
-function resolvePraxisFilterCriteriaBridge(filterCriteria, queryContext) {
-    return {
-        ...(normalizeFilterCriteria(filterCriteria) || {}),
-        ...(normalizePraxisDataQueryContextBridge(queryContext)?.filters || {}),
-    };
-}
+  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
     if (dataSource?.kind !== 'remote' || !dataSource.query)
@@ -2263,6 +2513,17 @@ function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
         },
     };
 }
+function resolveUnsupportedStatsFilterExpressionDiagnostic(queryContext) {
+    if (!queryContext?.filterExpression) {
+        return null;
+    }
+    const governance = queryContext.filterExpression.governance;
+    const decision = governance?.decisionId ? ` Decision: ${governance.decisionId}.` : '';
+    const reason = queryContext.filterExpression.projection?.reason
+        ? ` Projection reason: ${queryContext.filterExpression.projection.reason}.`
+        : '';
+    return `Praxis Charts received a governed queryContext.filterExpression, but praxis.stats execution currently accepts only flat statsRequest.filter criteria. The expression was rejected instead of being flattened into an unsafe AND filter.${decision}${reason}`;
+}
 function normalizeRemoteDataResolverResult$1(result) {
     if (Array.isArray(result)) {
         return of(result);
@@ -3264,7 +3525,7 @@ class PraxisChartDrilldownPanelComponent {
         [data]="detailData()"
       ></praxis-chart>
     </section>
-  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartDrilldownPanelComponent, decorators: [{
             type: Component,
@@ -3447,19 +3708,14 @@ class EChartsOptionBuilderService {
             };
         }
         const horizontal = config.orientation === 'horizontal' || config.type === 'horizontal-bar';
-        const xAxisType = config.axes?.x?.type ?? 'category';
+        const xAxisType = this.usesCanonicalStatsTime(config)
+            ? 'time'
+            : config.axes?.x?.type ?? 'category';
         return {
             backgroundColor: config.theme?.backgroundColor,
             color: palette,
             title: this.buildTitle(config, 'left', textColor),
-            tooltip: tooltipEnabled
-                ? {
-                    trigger: config.theme?.tooltip?.trigger ?? 'axis',
-                    confine: true,
-                    appendToBody: false,
-                    valueFormatter: (value) => this.formatValue(value, this.primaryValueFormat(config)),
-                }
-                : undefined,
+            tooltip: tooltipEnabled ? this.buildCartesianTooltip(config) : undefined,
             legend: this.buildLegend(config, legendVisible, 'bottom', textColor),
             grid: this.buildGrid(config, { horizontal, legendVisible }),
             xAxis: horizontal
@@ -3679,6 +3935,87 @@ class EChartsOptionBuilderService {
             ?? config.axes?.y?.labels?.format
             ?? config.series[0]?.labels?.format;
     }
+    buildCartesianTooltip(config) {
+        const tooltip = {
+            trigger: config.theme?.tooltip?.trigger ?? 'axis',
+            confine: true,
+            appendToBody: false,
+            valueFormatter: (value) => this.formatValue(value, this.primaryValueFormat(config)),
+        };
+        return this.usesCanonicalStatsTime(config)
+            ? {
+                ...tooltip,
+                formatter: (params) => this.formatCanonicalTimeTooltip(params, config),
+            }
+            : tooltip;
+    }
+    usesCanonicalStatsTime(config) {
+        if (config.dataSource?.kind !== 'remote'
+            || config.dataSource.query?.sourceKind !== 'praxis.stats') {
+            return false;
+        }
+        return config.axes?.x?.type === 'time'
+            || config.dataSource.query.statsOperation === 'timeseries';
+    }
+    formatCanonicalTimeTooltip(params, config) {
+        const items = (Array.isArray(params) ? params : [params])
+            .filter((item) => !!item && typeof item === 'object');
+        if (!items.length) {
+            return '';
+        }
+        const first = items[0];
+        const data = this.tooltipPointData(first['data']);
+        const header = this.formatCanonicalTimeTooltipHeader(first, data, config);
+        const lines = items.map((item) => {
+            const itemData = this.tooltipPointData(item['data']);
+            const seriesId = item['seriesId'] === null || item['seriesId'] === undefined
+                ? undefined
+                : String(item['seriesId']);
+            const format = seriesId
+                ? this.seriesLabelFormat(config, seriesId) ?? this.primaryValueFormat(config)
+                : this.primaryValueFormat(config);
+            const value = this.formatValue(item['value'] ?? itemData['value'], format);
+            const seriesName = item['seriesName'] === null || item['seriesName'] === undefined
+                ? ''
+                : String(item['seriesName']);
+            return seriesName
+                ? `${escapeTooltipHtml(seriesName)}: ${escapeTooltipHtml(value)}`
+                : escapeTooltipHtml(value);
+        });
+        return [escapeTooltipHtml(header), ...lines]
+            .filter((part) => part.length > 0)
+            .join('<br/>');
+    }
+    formatCanonicalTimeTooltipHeader(params, data, config) {
+        const dateFormat = config.axes?.x?.labels?.format;
+        const label = this.nonEmptyText(data['label']);
+        const start = this.nonEmptyText(data['start']);
+        const end = this.nonEmptyText(data['end']);
+        const formattedStart = start ? this.formatValue(start, dateFormat) : '';
+        const formattedEnd = end ? this.formatValue(end, dateFormat) : '';
+        const interval = formattedStart && formattedEnd && formattedStart !== formattedEnd
+            ? `${formattedStart} – ${formattedEnd}`
+            : formattedStart || formattedEnd;
+        const fallback = this.nonEmptyText(params['axisValueLabel'])
+            ?? this.nonEmptyText(params['name'])
+            ?? '';
+        if (label && interval && label !== formattedStart && label !== interval) {
+            return `${label} · ${interval}`;
+        }
+        return interval || label || fallback;
+    }
+    tooltipPointData(value) {
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : {};
+    }
+    nonEmptyText(value) {
+        if (value === null || value === undefined) {
+            return undefined;
+        }
+        const text = String(value).trim();
+        return text || undefined;
+    }
     seriesLabelFormat(config, seriesId) {
         return config.series.find((series) => series.id === seriesId)?.labels?.format;
     }
@@ -3841,6 +4178,14 @@ function truncateLegendText(name) {
     }
     return `${value.slice(0, 25)}...`;
 }
+function escapeTooltipHtml(value) {
+    return String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
 
 use([
     AriaComponent,
@@ -3884,13 +4229,14 @@ class EChartsEngineAdapter {
         chart.on('click', (params) => {
             this.lastSeriesClickAt = Date.now();
             this.lastGridClick = undefined;
+            const data = pointData(params?.name, params?.data ?? params?.value);
             payload.onPointClick?.({
                 chartId: payload.config.id,
                 seriesId: params?.seriesId,
                 seriesName: params?.seriesName,
-                category: params?.name,
+                category: this.resolvePointCategory(payload, data, params?.name),
                 value: pointValue(params?.value ?? params?.data),
-                data: pointData(params?.name, params?.data ?? params?.value),
+                data,
             });
         });
         const zrender = chart?.getZr?.();
@@ -3950,6 +4296,26 @@ class EChartsEngineAdapter {
         this.domClickHandler = undefined;
         this.zrenderClickHandler = undefined;
     }
+    resolvePointCategory(payload, data, fallback) {
+        const categoryField = payload.config.axes?.x?.field
+            ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
+        const dataSource = payload.config.dataSource;
+        const usesCanonicalStatsTime = dataSource?.kind === 'remote'
+            && dataSource.query?.sourceKind === 'praxis.stats';
+        const usesCanonicalStatsTimePoint = usesCanonicalStatsTime
+            && (payload.config.axes?.x?.type === 'time'
+                || (dataSource?.kind === 'remote' && dataSource.query?.statsOperation === 'timeseries'));
+        const candidate = usesCanonicalStatsTimePoint && data['label'] !== null
+            && data['label'] !== undefined
+            && data['label'] !== ''
+            ? data['label']
+            : categoryField && data[categoryField] !== null && data[categoryField] !== undefined
+                ? data[categoryField]
+                : fallback;
+        return candidate === null || candidate === undefined
+            ? undefined
+            : String(candidate);
+    }
     emitCategoryClickFromGrid(event, payload) {
         const chart = this.chart;
         if (!chart || typeof chart.containPixel !== 'function' || typeof chart.convertFromPixel !== 'function') {
@@ -3977,10 +4343,8 @@ class EChartsEngineAdapter {
         }
         const category = categories[categoryIndex];
         const categoryValue = category == null ? undefined : String(category);
-        const categoryField = horizontal
-            ? payload.config.axes?.y?.field
-            : payload.config.axes?.x?.field
-                ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
+        const categoryField = payload.config.axes?.x?.field
+            ?? payload.config.series.find((series) => series.categoryField)?.categoryField;
         const signature = JSON.stringify({
             chartId: payload.config.id,
             category: categoryValue,
@@ -3990,7 +4354,20 @@ class EChartsEngineAdapter {
         if (this.isDuplicateGridClick(signature)) {
             return;
         }
-        const data = { category: categoryValue };
+        const usesCanonicalStatsRows = payload.config.dataSource?.kind === 'remote'
+            && payload.config.dataSource.query?.sourceKind === 'praxis.stats';
+        const fallbackSourceRow = !usesCanonicalStatsRows
+            && categoryField
+            && categoryValue !== undefined
+            ? payload.data.find((row) => String(row[categoryField] ?? '') === categoryValue)
+            : undefined;
+        const sourceRow = usesCanonicalStatsRows
+            ? payload.data[categoryIndex]
+            : fallbackSourceRow;
+        const data = {
+            ...(sourceRow ?? {}),
+            category: categoryValue,
+        };
         if (categoryField && categoryValue !== undefined) {
             data[categoryField] = categoryValue;
         }
@@ -4042,6 +4419,13 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.runtime.remoteErrorTitle': 'Chart data could not be loaded',
     'praxis.charts.runtime.remoteErrorDescription': 'Review the chart data source and analytics request before continuing.',
     'praxis.charts.runtime.booleanFalseLabel': 'Not {{ label }}',
+    '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.',
+    'praxis.charts.widget.queryContext.label': 'Query context',
+    'praxis.charts.widget.queryContext.ariaLabel': 'Chart query context',
+    'praxis.charts.widget.queryContext.invalidJson': 'Query context must be valid JSON.',
+    'praxis.charts.widget.queryContext.mustBeObject': 'Query context must be a JSON object.',
     'praxis.charts.editor.section.general': 'General',
     'praxis.charts.editor.section.data': 'Data',
     'praxis.charts.editor.section.analytics': 'Analytics',
@@ -4103,6 +4487,34 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.appearance.surfaceTitle': 'Surface',
     'praxis.charts.editor.appearance.surfaceHint': 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.',
     'praxis.charts.editor.appearance.statesTitle': 'State messages',
+    'praxis.charts.editor.catalog.resourceMissing': 'Resource catalog is required for governed praxis.stats authoring.',
+    'praxis.charts.editor.catalog.resourceStale': 'Selected resource is not available in the governed resource catalog.',
+    'praxis.charts.editor.catalog.operationMissing': 'Selected resource does not publish authorable stats operations.',
+    'praxis.charts.editor.catalog.operationStale': 'Selected operation is not supported by the governed resource catalog.',
+    'praxis.charts.editor.catalog.fieldCatalogMissing': 'The selected resource does not publish governed fields for chart authoring.',
+    'praxis.charts.editor.catalog.dimensionFieldsMissing': 'No governed dimensions are available for the current resource and operation.',
+    'praxis.charts.editor.catalog.metricFieldsMissing': 'No governed metrics are available for the current resource and operation.',
+    'praxis.charts.editor.catalog.dimensionFieldStale': 'Selected dimension is not eligible for the current resource and operation.',
+    'praxis.charts.editor.catalog.metricFieldStale': 'Selected metric is not eligible for the current resource and operation.',
+    'praxis.charts.editor.catalog.metricAggregationStale': 'Selected aggregation is not allowed for the selected metric field.',
+    'praxis.charts.editor.catalog.targetMissing': 'Target catalog is required for this governed event action.',
+    'praxis.charts.editor.catalog.targetStale': 'Selected target is not available for this event action.',
+    'praxis.charts.editor.catalog.capabilitiesDenied': 'Access to the selected resource capabilities was denied.',
+    'praxis.charts.editor.catalog.capabilitiesUnavailable': 'The selected resource capabilities are temporarily unavailable.',
+    'praxis.charts.editor.catalog.contextUnavailable': 'Governed chart authoring context could not be resolved.',
+    'praxis.charts.widget.contextDiagnostics.title': 'Authoring context',
+    'praxis.charts.widget.contextDiagnostics.catalogDenied': 'Access to the governed resource catalog was denied.',
+    'praxis.charts.widget.contextDiagnostics.catalogUnavailable': 'The governed resource catalog is temporarily unavailable.',
+    'praxis.charts.widget.contextDiagnostics.catalogEmpty': 'No authorable stats resources were published by the governed catalog.',
+    'praxis.charts.widget.contextDiagnostics.catalogPathInvalid': 'The resource catalog published an unsafe or non-relative operational path.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesDenied': 'Access to the selected resource capabilities was denied.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesUnavailable': 'The selected resource capabilities are temporarily unavailable.',
+    'praxis.charts.widget.contextDiagnostics.operationsEmpty': 'The selected resource does not publish authorable stats operations.',
+    'praxis.charts.widget.contextDiagnostics.fieldsEmpty': 'The selected resource does not publish governed fields for chart authoring.',
+    'praxis.charts.widget.contextDiagnostics.identityMismatch': 'The selected resource identity does not match its governed capability snapshot.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesPathInvalid': 'The selected capability snapshot did not publish a safe governed resource path.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesPathMismatch': 'The selected capability snapshot path does not match the operational path published by the catalog.',
+    'praxis.charts.widget.contextDiagnostics.partial': 'Some governed authoring choices could not be materialized from the current page context.',
     'praxis.charts.editor.hint.sizingMode': 'Use fill-container only when the host widget provides a defined body height.',
     'praxis.charts.editor.hint.height': 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.',
     'praxis.charts.editor.hint.minHeight': 'Set a readable minimum for compact dashboard widgets.',
@@ -4195,6 +4607,13 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.runtime.remoteErrorTitle': 'Não foi possível carregar os dados do gráfico',
     'praxis.charts.runtime.remoteErrorDescription': 'Revise a fonte de dados e os filtros antes de continuar.',
     'praxis.charts.runtime.booleanFalseLabel': 'Não {{ label }}',
+    '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.',
+    'praxis.charts.widget.queryContext.label': 'Contexto da consulta',
+    'praxis.charts.widget.queryContext.ariaLabel': 'Contexto da consulta do gráfico',
+    'praxis.charts.widget.queryContext.invalidJson': 'O contexto da consulta deve ser um JSON válido.',
+    'praxis.charts.widget.queryContext.mustBeObject': 'O contexto da consulta deve ser um objeto JSON.',
     'praxis.charts.editor.section.general': 'Geral',
     'praxis.charts.editor.section.data': 'Dados',
     'praxis.charts.editor.section.analytics': 'Estrutura',
@@ -4256,6 +4675,34 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.appearance.surfaceTitle': 'Superfície',
     'praxis.charts.editor.appearance.surfaceHint': 'Use embutido para widgets de dashboard e contido apenas quando o gráfico precisar ser dono da própria superfície visual.',
     'praxis.charts.editor.appearance.statesTitle': 'Mensagens de estado',
+    'praxis.charts.editor.catalog.resourceMissing': 'O catálogo de recursos é obrigatório para authoring governado de praxis.stats.',
+    'praxis.charts.editor.catalog.resourceStale': 'O recurso selecionado não está disponível no catálogo governado de recursos.',
+    'praxis.charts.editor.catalog.operationMissing': 'O recurso selecionado não publica operações de stats authoráveis.',
+    'praxis.charts.editor.catalog.operationStale': 'A operação selecionada não é suportada pelo catálogo governado do recurso.',
+    'praxis.charts.editor.catalog.fieldCatalogMissing': 'O recurso selecionado não publica campos governados para a autoria do gráfico.',
+    'praxis.charts.editor.catalog.dimensionFieldsMissing': 'Nenhuma dimensão governada está disponível para o recurso e a operação atuais.',
+    'praxis.charts.editor.catalog.metricFieldsMissing': 'Nenhuma métrica governada está disponível para o recurso e a operação atuais.',
+    'praxis.charts.editor.catalog.dimensionFieldStale': 'A dimensão selecionada não é elegível para o recurso e a operação atuais.',
+    'praxis.charts.editor.catalog.metricFieldStale': 'A métrica selecionada não é elegível para o recurso e a operação atuais.',
+    'praxis.charts.editor.catalog.metricAggregationStale': 'A agregação selecionada não é permitida para a métrica escolhida.',
+    'praxis.charts.editor.catalog.targetMissing': 'O catálogo de destinos é obrigatório para esta ação de evento governada.',
+    'praxis.charts.editor.catalog.targetStale': 'O destino selecionado não está disponível para esta ação de evento.',
+    'praxis.charts.editor.catalog.capabilitiesDenied': 'O acesso às capabilities do recurso selecionado foi negado.',
+    'praxis.charts.editor.catalog.capabilitiesUnavailable': 'As capabilities do recurso selecionado estão temporariamente indisponíveis.',
+    'praxis.charts.editor.catalog.contextUnavailable': 'Não foi possível resolver o contexto governado de authoring do gráfico.',
+    'praxis.charts.widget.contextDiagnostics.title': 'Contexto de authoring',
+    'praxis.charts.widget.contextDiagnostics.catalogDenied': 'O acesso ao catálogo governado de recursos foi negado.',
+    'praxis.charts.widget.contextDiagnostics.catalogUnavailable': 'O catálogo governado de recursos está temporariamente indisponível.',
+    'praxis.charts.widget.contextDiagnostics.catalogEmpty': 'Nenhum recurso de stats authorável foi publicado pelo catálogo governado.',
+    'praxis.charts.widget.contextDiagnostics.catalogPathInvalid': 'O catálogo de recursos publicou um path operacional inseguro ou não relativo.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesDenied': 'O acesso às capabilities do recurso selecionado foi negado.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesUnavailable': 'As capabilities do recurso selecionado estão temporariamente indisponíveis.',
+    'praxis.charts.widget.contextDiagnostics.operationsEmpty': 'O recurso selecionado não publica operações de stats authoráveis.',
+    'praxis.charts.widget.contextDiagnostics.fieldsEmpty': 'O recurso selecionado não publica campos governados para a autoria do gráfico.',
+    'praxis.charts.widget.contextDiagnostics.identityMismatch': 'A identidade do recurso selecionado não corresponde ao snapshot governado de capabilities.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesPathInvalid': 'O snapshot de capabilities selecionado não publicou um path de recurso governado e seguro.',
+    'praxis.charts.widget.contextDiagnostics.capabilitiesPathMismatch': 'O path do snapshot de capabilities não corresponde ao path operacional publicado pelo catálogo.',
+    'praxis.charts.widget.contextDiagnostics.partial': 'Algumas opções governadas de authoring não puderam ser materializadas a partir do contexto atual da página.',
     'praxis.charts.editor.hint.sizingMode': 'Use preencher container apenas quando o widget host fornecer altura definida para o corpo.',
     'praxis.charts.editor.hint.height': 'Números são salvos como pixels; medidas CSS como 20rem também são aceitas.',
     'praxis.charts.editor.hint.minHeight': 'Defina um mínimo legível para widgets compactos de dashboard.',
@@ -4394,7 +4841,7 @@ function resolvePraxisChartsText(value, fallback) {
 class ChartEditorDefaultsService {
     create() {
         return {
-            version: '1.0.0',
+            version: PRAXIS_X_UI_CHART_AUTHORABLE_VERSION,
             kind: 'bar',
             title: 'Untitled chart',
             source: {
@@ -4470,13 +4917,844 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: PraxisChartCanonicalContractMapperService }] });
 
-class PraxisChartConfigEditor {
-    documentInput = input(null, { ...(ngDevMode ? { debugName: "documentInput" } : /* istanbul ignore next */ {}), alias: 'document' });
+/**
+ * Internal projection of already-governed Page Builder composition evidence.
+ *
+ * It deliberately does not discover unconnected widgets, nested widgets,
+ * routes, surfaces, or global actions. A target enters this catalog only when
+ * an existing top-level link from the current chart proves the destination.
+ */
+class ChartCompositionTargetCatalogAdapter {
+    registry = inject(ComponentMetadataRegistry);
+    resolve(request) {
+        const targets = new Map();
+        const diagnostics = [];
+        const diagnosticKeys = new Set();
+        const addDiagnostic = (code, severity, path) => {
+            const key = `${code}:${path}`;
+            if (diagnosticKeys.has(key)) {
+                return;
+            }
+            diagnosticKeys.add(key);
+            diagnostics.push({ code, severity, path });
+        };
+        if (!this.isPageEvidence(request.page)) {
+            addDiagnostic('chart-target-page-invalid', 'error', 'page');
+            return { targets: [], diagnostics };
+        }
+        const page = request.page;
+        const currentWidget = page.widgets.find((candidate) => this.isWidgetEvidence(candidate) && candidate.key === request.widgetKey);
+        if (!currentWidget) {
+            addDiagnostic('chart-target-source-widget-missing', 'error', 'page.widgets');
+            return { targets: [], diagnostics };
+        }
+        for (const [index, candidate] of (page.composition?.links ?? []).entries()) {
+            if (this.sourceWidgetKey(candidate) !== request.widgetKey) {
+                continue;
+            }
+            const linkPath = `page.composition.links[${index}]`;
+            if (!this.isRecord(candidate)) {
+                addDiagnostic('chart-target-link-invalid', 'warning', linkPath);
+                continue;
+            }
+            if (this.isDeprecatedLink(candidate)) {
+                addDiagnostic('chart-target-link-deprecated', 'warning', linkPath);
+                continue;
+            }
+            const source = this.readComponentPortEndpoint(candidate['from']);
+            if (!source || source.ref.direction !== 'output') {
+                addDiagnostic('chart-target-source-endpoint-invalid', 'warning', `${linkPath}.from`);
+                continue;
+            }
+            if (source.ref.nestedPath?.length) {
+                addDiagnostic('chart-target-source-nested-unsupported', 'info', `${linkPath}.from`);
+                continue;
+            }
+            if (!this.endpointComponentTypeMatches(source.ref.componentType, currentWidget.definition.id, request.widgetType, request.componentId, request.metadata.id, request.metadata.componentType)) {
+                addDiagnostic('chart-target-source-component-type-mismatch', 'warning', `${linkPath}.from`);
+                continue;
+            }
+            const sourcePort = request.metadata.ports?.find((port) => port.id === source.ref.port);
+            if (!this.isAuthorablePort(sourcePort, 'output')) {
+                addDiagnostic('chart-target-source-port-not-authorable', 'warning', `${linkPath}.from`);
+                continue;
+            }
+            const sourceEvent = this.sourceEvent(sourcePort);
+            if (!sourceEvent) {
+                addDiagnostic('chart-target-source-event-unsupported', 'info', `${linkPath}.from.ref.port`);
+                continue;
+            }
+            const target = candidate['to'];
+            if (this.hasEndpointKind(target, 'component-port')) {
+                this.resolveWidgetTarget(target, sourceEvent, sourcePort, candidate['transform'], page, request.widgetKey, linkPath, targets, addDiagnostic);
+                continue;
+            }
+            if (this.hasEndpointKind(target, 'state')) {
+                this.resolveStateTarget(target, sourceEvent, candidate['intent'], page, linkPath, targets, addDiagnostic);
+                continue;
+            }
+            if (this.hasEndpointKind(target, 'global-action')) {
+                addDiagnostic('chart-target-global-action-unsupported', 'info', `${linkPath}.to`);
+                continue;
+            }
+            addDiagnostic('chart-target-endpoint-unsupported', 'warning', `${linkPath}.to`);
+        }
+        return {
+            targets: Array.from(targets.values()),
+            diagnostics,
+        };
+    }
+    resolveWidgetTarget(value, sourceEvent, sourcePort, transform, page, sourceWidgetKey, linkPath, targets, addDiagnostic) {
+        const endpoint = this.readComponentPortEndpoint(value);
+        if (!endpoint || endpoint.ref.direction !== 'input') {
+            addDiagnostic('chart-target-widget-endpoint-invalid', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (endpoint.ref.nestedPath?.length) {
+            addDiagnostic('chart-target-widget-nested-unsupported', 'info', `${linkPath}.to`);
+            return;
+        }
+        const widget = page.widgets.find((candidate) => this.isWidgetEvidence(candidate) && candidate.key === endpoint.ref.widget);
+        if (!widget) {
+            addDiagnostic('chart-target-widget-missing', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (widget.key === sourceWidgetKey) {
+            addDiagnostic('chart-target-widget-self-unsupported', 'warning', `${linkPath}.to`);
+            return;
+        }
+        const metadata = this.registry.get(widget.definition.id);
+        if (!metadata) {
+            addDiagnostic('chart-target-widget-metadata-missing', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (!this.endpointComponentTypeMatches(endpoint.ref.componentType, widget.definition.id, metadata.id, metadata.componentType)) {
+            addDiagnostic('chart-target-widget-component-type-mismatch', 'warning', `${linkPath}.to`);
+            return;
+        }
+        const port = metadata.ports?.find((candidate) => candidate.id === endpoint.ref.port);
+        if (!this.isAuthorablePort(port, 'input')
+            || port?.semanticKind !== 'query-context') {
+            addDiagnostic('chart-target-widget-port-not-authorable', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (!this.isWidgetLinkSemanticallyCompatible(sourcePort, port, transform)) {
+            addDiagnostic('chart-target-widget-link-incompatible', 'warning', linkPath);
+            return;
+        }
+        const id = widget.key;
+        this.upsertTarget(targets, `filter-widget:${id}`, {
+            id,
+            label: this.widgetLabel(metadata.friendlyName, id),
+            kind: 'widget',
+            actions: ['filter-widget'],
+            events: [sourceEvent],
+        }, sourceEvent);
+    }
+    resolveStateTarget(value, sourceEvent, intent, page, linkPath, targets, addDiagnostic) {
+        const endpoint = this.readStateEndpoint(value);
+        if (!endpoint || !endpoint.ref.path || endpoint.ref.path.trim() !== endpoint.ref.path) {
+            addDiagnostic('chart-target-state-endpoint-invalid', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (endpoint.ref.layer !== undefined && endpoint.ref.layer !== 'values') {
+            addDiagnostic('chart-target-state-layer-unsupported', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (endpoint.ref.writable !== true) {
+            addDiagnostic('chart-target-state-not-explicitly-writable', 'warning', `${linkPath}.to`);
+            return;
+        }
+        if (intent !== 'state-write') {
+            addDiagnostic('chart-target-state-intent-invalid', 'warning', `${linkPath}.intent`);
+            return;
+        }
+        const schema = this.readDeclaredStateSchema(page.state);
+        if (!schema || !Object.prototype.hasOwnProperty.call(schema, endpoint.ref.path)) {
+            addDiagnostic('chart-target-state-path-undeclared', 'warning', `${linkPath}.to.ref.path`);
+            return;
+        }
+        const id = endpoint.ref.path;
+        this.upsertTarget(targets, `update-context:${id}`, {
+            id,
+            label: this.stateLabel(schema[id], id),
+            actions: ['update-context'],
+            events: [sourceEvent],
+        }, sourceEvent);
+    }
+    sourceEvent(port) {
+        switch (port.id) {
+            case 'pointAction':
+                return 'pointClick';
+            case 'selectionChange':
+            case 'drillDown':
+            case 'crossFilter':
+                return port.id;
+            default:
+                return null;
+        }
+    }
+    isWidgetLinkSemanticallyCompatible(sourcePort, targetPort, transform) {
+        let effectiveSourceKind = sourcePort.semanticKind;
+        if (transform !== undefined) {
+            if (!this.isRecord(transform) || !Array.isArray(transform['steps'])) {
+                return false;
+            }
+            if (transform['steps'].some((step) => (!this.isRecord(step)
+                || typeof step['kind'] !== 'string'
+                || typeof step['phase'] !== 'string'))) {
+                return false;
+            }
+            const output = transform['output'];
+            if (output !== undefined) {
+                if (!this.isRecord(output)) {
+                    return false;
+                }
+                if (output['semanticKind'] !== undefined
+                    && typeof output['semanticKind'] !== 'string') {
+                    return false;
+                }
+                effectiveSourceKind = typeof output['semanticKind'] === 'string'
+                    ? output['semanticKind']
+                    : effectiveSourceKind;
+            }
+        }
+        return targetPort.semanticKind === 'query-context'
+            && (effectiveSourceKind === 'query-context' || effectiveSourceKind === 'value');
+    }
+    upsertTarget(targets, key, target, sourceEvent) {
+        const current = targets.get(key);
+        if (!current) {
+            targets.set(key, target);
+            return;
+        }
+        targets.set(key, {
+            ...current,
+            events: current.events?.includes(sourceEvent)
+                ? current.events
+                : [...(current.events ?? []), sourceEvent],
+        });
+    }
+    isPageEvidence(value) {
+        if (!this.isRecord(value) || !Array.isArray(value['widgets'])) {
+            return false;
+        }
+        const composition = value['composition'];
+        if (composition === undefined) {
+            return true;
+        }
+        if (!this.isRecord(composition)) {
+            return false;
+        }
+        return composition['links'] === undefined || Array.isArray(composition['links']);
+    }
+    isWidgetEvidence(value) {
+        if (!this.isRecord(value) || typeof value['key'] !== 'string') {
+            return false;
+        }
+        const definition = value['definition'];
+        return this.isRecord(definition) && typeof definition['id'] === 'string';
+    }
+    sourceWidgetKey(value) {
+        if (!this.isRecord(value)) {
+            return undefined;
+        }
+        const source = value['from'];
+        if (!this.hasEndpointKind(source, 'component-port') || !this.isRecord(source['ref'])) {
+            return undefined;
+        }
+        return typeof source['ref']['widget'] === 'string'
+            ? source['ref']['widget']
+            : undefined;
+    }
+    readComponentPortEndpoint(value) {
+        if (!this.hasEndpointKind(value, 'component-port')) {
+            return null;
+        }
+        const ref = value['ref'];
+        if (!this.isRecord(ref)
+            || typeof ref['widget'] !== 'string'
+            || typeof ref['port'] !== 'string'
+            || typeof ref['direction'] !== 'string'
+            || (ref['componentType'] !== undefined && typeof ref['componentType'] !== 'string')
+            || (ref['nestedPath'] !== undefined && !Array.isArray(ref['nestedPath']))) {
+            return null;
+        }
+        return {
+            kind: 'component-port',
+            ref: {
+                widget: ref['widget'],
+                port: ref['port'],
+                direction: ref['direction'],
+                ...(typeof ref['componentType'] === 'string'
+                    ? { componentType: ref['componentType'] }
+                    : {}),
+                ...(Array.isArray(ref['nestedPath'])
+                    ? { nestedPath: ref['nestedPath'] }
+                    : {}),
+            },
+        };
+    }
+    readStateEndpoint(value) {
+        if (!this.hasEndpointKind(value, 'state')) {
+            return null;
+        }
+        const ref = value['ref'];
+        if (!this.isRecord(ref)
+            || typeof ref['path'] !== 'string'
+            || (ref['layer'] !== undefined && typeof ref['layer'] !== 'string')
+            || (ref['writable'] !== undefined && typeof ref['writable'] !== 'boolean')) {
+            return null;
+        }
+        return {
+            kind: 'state',
+            ref: {
+                path: ref['path'],
+                ...(typeof ref['layer'] === 'string' ? { layer: ref['layer'] } : {}),
+                ...(typeof ref['writable'] === 'boolean' ? { writable: ref['writable'] } : {}),
+            },
+        };
+    }
+    readDeclaredStateSchema(value) {
+        if (!this.isRecord(value) || !this.isRecord(value['schema'])) {
+            return null;
+        }
+        return value['schema'];
+    }
+    isAuthorablePort(port, direction) {
+        return !!port
+            && port.direction === direction
+            && port.exposure?.public === true
+            && port.exposure.deprecated !== true;
+    }
+    endpointComponentTypeMatches(endpointComponentType, ...canonicalIds) {
+        if (endpointComponentType === undefined) {
+            return true;
+        }
+        return canonicalIds.some((candidate) => candidate === endpointComponentType);
+    }
+    widgetLabel(friendlyName, widgetKey) {
+        const label = friendlyName.trim();
+        return label && label !== widgetKey
+            ? `${label} (${widgetKey})`
+            : widgetKey;
+    }
+    stateLabel(descriptor, path) {
+        const description = this.isRecord(descriptor) && typeof descriptor['description'] === 'string'
+            ? descriptor['description'].trim()
+            : '';
+        return description && description !== path
+            ? `${description} (${path})`
+            : path;
+    }
+    isDeprecatedLink(value) {
+        const metadata = value['metadata'];
+        return this.isRecord(metadata) && metadata['deprecated'] === true;
+    }
+    hasEndpointKind(value, kind) {
+        return this.isRecord(value) && value['kind'] === kind;
+    }
+    isRecord(value) {
+        return !!value && typeof value === 'object' && !Array.isArray(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartCompositionTargetCatalogAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartCompositionTargetCatalogAdapter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartCompositionTargetCatalogAdapter, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ChartResourceCapabilityCatalogAdapter {
+    toResourceOperations(capabilities) {
+        if (!capabilities) {
+            return [];
+        }
+        const operations = [];
+        if (capabilities.canonicalOperations?.['statsGroupBy'] === true) {
+            operations.push('group-by');
+        }
+        if (capabilities.canonicalOperations?.['statsTimeSeries'] === true) {
+            operations.push('timeseries');
+        }
+        if (capabilities.canonicalOperations?.['statsDistribution'] === true) {
+            operations.push('distribution');
+        }
+        return operations;
+    }
+    toFieldOptions(capabilities, operation) {
+        if (!capabilities) {
+            return [];
+        }
+        const fields = capabilities?.stats?.fields ?? [];
+        const resourceOperations = this.toResourceOperations(capabilities);
+        const fieldOptions = fields
+            .filter((field) => !!field?.field)
+            .flatMap((field) => this.toFieldOptionsForRoles(field, capabilities, resourceOperations));
+        const countOption = this.toCountOption(fields, capabilities, resourceOperations);
+        return [...fieldOptions, ...(countOption ? [countOption] : [])]
+            .filter((option) => !operation || option.operations?.includes(operation));
+    }
+    toFieldOptionsForRoles(field, capabilities, resourceOperations) {
+        const aggregations = this.resolveAggregations(field);
+        const shared = {
+            field: field.field,
+            ...(field.label ? { label: field.label } : {}),
+            ...(capabilities.resourceKey ? { resourceIds: [capabilities.resourceKey] } : {}),
+            ...(capabilities.resourcePath ? { resourcePaths: [capabilities.resourcePath] } : {}),
+            ...(aggregations.length ? { aggregations } : {}),
+        };
+        const options = [];
+        const dimensionOperations = this.resolveDimensionOperations(field)
+            .filter((candidate) => resourceOperations.includes(candidate));
+        const distributionModes = this.resolveDistributionModes(field);
+        if (dimensionOperations.length) {
+            options.push({
+                ...shared,
+                roles: field.timeSeriesEligible === true
+                    ? ['dimension', 'time']
+                    : ['dimension'],
+                operations: dimensionOperations,
+                ...(dimensionOperations.includes('distribution')
+                    ? { distributionModes }
+                    : {}),
+            });
+        }
+        if (field.metricFieldEligible === true && aggregations.length) {
+            options.push({
+                ...shared,
+                aggregable: true,
+                roles: ['metric'],
+                operations: resourceOperations,
+                ...(resourceOperations.includes('distribution')
+                    ? { distributionModes: ['terms'] }
+                    : {}),
+            });
+        }
+        return options;
+    }
+    resolveDimensionOperations(field) {
+        const operations = new Set();
+        const modes = field.modes ?? [];
+        if (field.groupByEligible === true || modes.includes('GROUP_BY')) {
+            operations.add('group-by');
+        }
+        if (field.timeSeriesEligible === true || modes.includes('TIME_SERIES')) {
+            operations.add('timeseries');
+        }
+        if (field.distributionTermsEligible === true
+            || field.distributionHistogramEligible === true
+            || modes.includes('DISTRIBUTION_TERMS')
+            || modes.includes('DISTRIBUTION_HISTOGRAM')) {
+            operations.add('distribution');
+        }
+        return Array.from(operations);
+    }
+    resolveAggregations(field) {
+        return (field.metrics ?? [])
+            .map((metric) => this.mapMetric(metric))
+            .filter((metric) => !!metric && metric !== 'count');
+    }
+    resolveDistributionModes(field) {
+        const modes = [];
+        if (field.distributionTermsEligible === true || field.modes?.includes('DISTRIBUTION_TERMS')) {
+            modes.push('terms');
+        }
+        if (field.distributionHistogramEligible === true
+            || field.modes?.includes('DISTRIBUTION_HISTOGRAM')) {
+            modes.push('histogram');
+        }
+        return modes;
+    }
+    mapMetric(metric) {
+        switch (String(metric || '').trim().toUpperCase()) {
+            case 'COUNT':
+                return 'count';
+            case 'DISTINCT_COUNT':
+                return 'distinct-count';
+            case 'SUM':
+                return 'sum';
+            case 'AVG':
+            case 'AVERAGE':
+                return 'avg';
+            case 'MIN':
+                return 'min';
+            case 'MAX':
+                return 'max';
+            default:
+                return null;
+        }
+    }
+    toCountOption(fields, capabilities, resourceOperations) {
+        if (!resourceOperations.length
+            || !fields.some((field) => (field.metrics ?? []).some((metric) => String(metric).toUpperCase() === 'COUNT'))) {
+            return null;
+        }
+        return {
+            field: 'count',
+            label: 'Count',
+            aggregable: true,
+            roles: ['metric'],
+            ...(capabilities.resourceKey ? { resourceIds: [capabilities.resourceKey] } : {}),
+            ...(capabilities.resourcePath ? { resourcePaths: [capabilities.resourcePath] } : {}),
+            operations: resourceOperations,
+            ...(resourceOperations.includes('distribution')
+                ? { distributionModes: ['terms', 'histogram'] }
+                : {}),
+            aggregations: ['count'],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartResourceCapabilityCatalogAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartResourceCapabilityCatalogAdapter, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ChartResourceCapabilityCatalogAdapter, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PraxisChartConfigEditorContextResolverService {
+    static REQUEST_TIMEOUT_MS = 10_000;
+    discovery = inject(ResourceDiscoveryService);
+    capabilityAdapter = inject(ChartResourceCapabilityCatalogAdapter);
+    targetAdapter = inject(ChartCompositionTargetCatalogAdapter);
+    /**
+     * ComponentConfigEditorContextRequest currently exposes no principal, tenant, or
+     * profile identity. Do not infer an authorization scope from widget/page data.
+     * Successful reads are not cached across requests because capabilities may be
+     * permission-sensitive. Only concurrent reads are deduplicated, and every pending
+     * read has a finite timeout; server-side authorization remains canonical.
+     */
+    catalogProjectionRequest;
+    capabilityRequests = new Map();
+    async resolve(request) {
+        const targetProjection = this.targetAdapter.resolve(request);
+        let projection;
+        try {
+            projection = await this.getCatalogProjection();
+        }
+        catch (error) {
+            return {
+                context: {
+                    availableResources: [],
+                    availableFields: [],
+                    availableTargets: targetProjection.targets,
+                },
+                diagnostics: [
+                    ...(targetProjection.diagnostics ?? []),
+                    this.httpDiagnostic(error, 'catalog'),
+                ],
+            };
+        }
+        const resources = projection.candidates.map((candidate) => candidate.option);
+        const selectedResource = this.selectedResource(request.persistedInputs);
+        if (!selectedResource) {
+            return {
+                context: {
+                    availableResources: resources,
+                    availableFields: [],
+                    availableTargets: targetProjection.targets,
+                },
+                diagnostics: [
+                    ...projection.diagnostics,
+                    ...(targetProjection.diagnostics ?? []),
+                ],
+            };
+        }
+        const selected = await this.resolveResourceFromProjection(selectedResource, projection);
+        const resolvedResources = selected.resource
+            ? resources.map((resource) => resource.id === selected.resource?.id ? selected.resource : resource)
+            : resources;
+        return {
+            context: {
+                availableResources: resolvedResources,
+                availableFields: selected.fields,
+                availableTargets: targetProjection.targets,
+            },
+            diagnostics: [
+                ...projection.diagnostics,
+                ...(targetProjection.diagnostics ?? []),
+                ...selected.diagnostics,
+            ],
+        };
+    }
+    async resolveResource(resourceIdentity) {
+        let projection;
+        try {
+            projection = await this.getCatalogProjection();
+        }
+        catch (error) {
+            return {
+                fields: [],
+                diagnostics: [this.httpDiagnostic(error, 'catalog')],
+            };
+        }
+        const selected = await this.resolveResourceFromProjection(resourceIdentity, projection);
+        return {
+            ...selected,
+            diagnostics: [...projection.diagnostics, ...selected.diagnostics],
+        };
+    }
+    async resolveResourceFromProjection(resourceIdentity, projection) {
+        const candidate = this.findCandidate(projection.candidates, resourceIdentity);
+        if (!candidate) {
+            return {
+                fields: [],
+                diagnostics: [{
+                        code: 'chart-resource-catalog-selection-stale',
+                        severity: 'error',
+                        path: 'chartDocument.source.resource',
+                    }],
+            };
+        }
+        let capabilities;
+        try {
+            capabilities = await this.getCapabilities(candidate);
+        }
+        catch (error) {
+            return {
+                fields: [],
+                diagnostics: [this.httpDiagnostic(error, 'capabilities')],
+            };
+        }
+        if (String(capabilities.resourceKey || '').trim() !== candidate.option.id) {
+            return {
+                fields: [],
+                diagnostics: [{
+                        code: 'chart-resource-capabilities-identity-mismatch',
+                        severity: 'error',
+                        path: 'chartDocument.source.resource',
+                    }],
+            };
+        }
+        const capabilityResourcePath = String(capabilities.resourcePath || '').trim();
+        if (!this.isGovernedRelativePath(capabilityResourcePath)) {
+            return {
+                fields: [],
+                diagnostics: [{
+                        code: 'chart-resource-capabilities-path-invalid',
+                        severity: 'error',
+                        path: 'chartDocument.source.resource',
+                    }],
+            };
+        }
+        const catalogResourcePath = this.normalizeOperationalPath(candidate.option.path);
+        if (this.normalizeOperationalPath(capabilityResourcePath) !== catalogResourcePath) {
+            return {
+                fields: [],
+                diagnostics: [{
+                        code: 'chart-resource-capabilities-path-mismatch',
+                        severity: 'error',
+                        path: 'chartDocument.source.resource',
+                    }],
+            };
+        }
+        const canonicalCapabilities = {
+            ...capabilities,
+            resourcePath: catalogResourcePath,
+        };
+        const operations = this.capabilityAdapter.toResourceOperations(canonicalCapabilities);
+        const fields = this.capabilityAdapter.toFieldOptions(canonicalCapabilities);
+        const diagnostics = [];
+        if (!operations.length) {
+            diagnostics.push({
+                code: 'chart-resource-stats-operations-empty',
+                severity: 'warning',
+                path: 'chartDocument.source.operation',
+            });
+        }
+        if (!fields.length) {
+            diagnostics.push({
+                code: 'chart-resource-stats-fields-empty',
+                severity: 'error',
+                path: 'chartDocument.dimensions',
+            });
+        }
+        return {
+            resource: {
+                ...candidate.option,
+                id: canonicalCapabilities.resourceKey,
+                path: catalogResourcePath,
+                operations,
+            },
+            fields,
+            diagnostics,
+        };
+    }
+    async getCatalogProjection() {
+        const cached = this.catalogProjectionRequest;
+        if (cached) {
+            return cached.promise;
+        }
+        let request;
+        const promise = firstValueFrom(this.discovery.getSchemaCatalog().pipe(timeout(PraxisChartConfigEditorContextResolverService.REQUEST_TIMEOUT_MS)))
+            .then((catalog) => this.projectCatalog(catalog))
+            .finally(() => {
+            if (this.catalogProjectionRequest === request) {
+                this.catalogProjectionRequest = undefined;
+            }
+        });
+        request = { promise };
+        this.catalogProjectionRequest = request;
+        return request.promise;
+    }
+    projectCatalog(catalog) {
+        const byResourceKey = new Map();
+        for (const endpoint of Array.isArray(catalog?.endpoints) ? catalog.endpoints : []) {
+            const resourceKey = String(endpoint?.resourceKey || '').trim();
+            if (!resourceKey) {
+                continue;
+            }
+            byResourceKey.set(resourceKey, [...(byResourceKey.get(resourceKey) ?? []), endpoint]);
+        }
+        const candidates = [];
+        const diagnostics = [];
+        for (const [resourceKey, endpoints] of byResourceKey.entries()) {
+            // The semantic resourceKey scopes the resource first. Path suffixes below only
+            // identify canonical HTTP projections inside that governed scope; they never
+            // route user intent or choose a resource from text.
+            const declaredCapabilityEndpoints = endpoints.filter((endpoint) => (endpoint.method === 'GET'
+                && !endpoint.path.includes('{')
+                && endpoint.path.endsWith('/capabilities')));
+            if (declaredCapabilityEndpoints.some((endpoint) => !this.isGovernedRelativePath(endpoint.path))) {
+                diagnostics.push({
+                    code: 'chart-resource-catalog-path-invalid',
+                    severity: 'error',
+                    path: resourceKey,
+                });
+                continue;
+            }
+            const capabilityEndpoints = declaredCapabilityEndpoints.filter((endpoint) => (this.isGovernedRelativePath(endpoint.path.slice(0, -'/capabilities'.length))));
+            if (declaredCapabilityEndpoints.length && !capabilityEndpoints.length) {
+                diagnostics.push({
+                    code: 'chart-resource-catalog-path-invalid',
+                    severity: 'error',
+                    path: resourceKey,
+                });
+                continue;
+            }
+            if (capabilityEndpoints.length !== 1) {
+                if (capabilityEndpoints.length > 1) {
+                    diagnostics.push({
+                        code: 'chart-resource-capabilities-endpoint-ambiguous',
+                        severity: 'warning',
+                        path: resourceKey,
+                    });
+                }
+                continue;
+            }
+            const capabilitiesEndpoint = capabilityEndpoints[0];
+            const resourcePath = this.normalizeOperationalPath(capabilitiesEndpoint.path.slice(0, -'/capabilities'.length));
+            const statsPaths = new Set([
+                `${resourcePath}/stats/group-by`,
+                `${resourcePath}/stats/timeseries`,
+                `${resourcePath}/stats/distribution`,
+            ]);
+            const publishesStats = endpoints.some((endpoint) => (endpoint.method === 'POST'
+                && statsPaths.has(endpoint.path)));
+            if (!publishesStats) {
+                continue;
+            }
+            const visual = capabilitiesEndpoint.resourceVisual
+                ?? endpoints.find((endpoint) => endpoint.resourceVisual)?.resourceVisual
+                ?? null;
+            candidates.push({
+                capabilitiesHref: capabilitiesEndpoint.path,
+                option: {
+                    id: resourceKey,
+                    label: String(visual?.title || resourceKey).trim(),
+                    path: resourcePath,
+                    ...(visual?.description ? { description: visual.description } : {}),
+                },
+            });
+        }
+        candidates.sort((left, right) => (left.option.label.localeCompare(right.option.label)
+            || left.option.id.localeCompare(right.option.id)));
+        if (!candidates.length) {
+            diagnostics.push({
+                code: 'chart-resource-catalog-empty',
+                severity: 'warning',
+                path: 'availableResources',
+            });
+        }
+        return { candidates, diagnostics };
+    }
+    async getCapabilities(candidate) {
+        const key = `${candidate.option.id}\u0000${candidate.capabilitiesHref}`;
+        const cached = this.capabilityRequests.get(key);
+        if (cached) {
+            return cached.promise;
+        }
+        let request;
+        const promise = firstValueFrom(this.discovery.getCapabilitiesByUrl(candidate.capabilitiesHref).pipe(timeout(PraxisChartConfigEditorContextResolverService.REQUEST_TIMEOUT_MS)))
+            .finally(() => {
+            if (this.capabilityRequests.get(key) === request) {
+                this.capabilityRequests.delete(key);
+            }
+        });
+        request = { promise };
+        this.capabilityRequests.set(key, request);
+        return request.promise;
+    }
+    findCandidate(candidates, resourceIdentity) {
+        const identity = String(resourceIdentity || '').trim();
+        const normalizedPath = this.normalizeOperationalPath(identity);
+        return candidates.find((candidate) => (candidate.option.id === identity
+            || this.normalizeOperationalPath(candidate.option.path) === normalizedPath));
+    }
+    selectedResource(inputs) {
+        const chartDocument = this.asRecord(inputs?.['chartDocument']);
+        const source = this.asRecord(chartDocument?.source);
+        if (source?.['kind'] !== 'praxis.stats') {
+            return null;
+        }
+        const resource = String(source?.['resource'] || '').trim();
+        return resource || null;
+    }
+    normalizeOperationalPath(value) {
+        const path = String(value || '').trim();
+        let end = path.length;
+        while (end > 1 && path.charAt(end - 1) === '/') {
+            end -= 1;
+        }
+        return path.slice(0, end);
+    }
+    isGovernedRelativePath(value) {
+        const path = String(value || '').trim();
+        return path.startsWith('/') && !path.startsWith('//');
+    }
+    asRecord(value) {
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : null;
+    }
+    httpDiagnostic(error, phase) {
+        const denied = error instanceof HttpErrorResponse
+            && (error.status === 401 || error.status === 403);
+        return {
+            code: denied
+                ? `chart-resource-${phase}-denied`
+                : `chart-resource-${phase}-unavailable`,
+            severity: 'error',
+            path: phase === 'catalog'
+                ? 'availableResources'
+                : 'chartDocument.source.resource',
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditorContextResolverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditorContextResolverService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditorContextResolverService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PraxisChartConfigEditor {
+    documentInput = input(null, { ...(ngDevMode ? { debugName: "documentInput" } : /* istanbul ignore next */ {}), alias: 'document' });
     modeInput = input('edit', { ...(ngDevMode ? { debugName: "modeInput" } : /* istanbul ignore next */ {}), alias: 'mode' });
     readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly' });
-    availableResourcesInput = input([], { ...(ngDevMode ? { debugName: "availableResourcesInput" } : /* istanbul ignore next */ {}), alias: 'availableResources' });
-    availableFieldsInput = input([], { ...(ngDevMode ? { debugName: "availableFieldsInput" } : /* istanbul ignore next */ {}), alias: 'availableFields' });
-    availableTargetsInput = input([], { ...(ngDevMode ? { debugName: "availableTargetsInput" } : /* istanbul ignore next */ {}), alias: 'availableTargets' });
+    availableResourcesInput = input(null, { ...(ngDevMode ? { debugName: "availableResourcesInput" } : /* istanbul ignore next */ {}), alias: 'availableResources' });
+    availableFieldsInput = input(null, { ...(ngDevMode ? { debugName: "availableFieldsInput" } : /* istanbul ignore next */ {}), alias: 'availableFields' });
+    availableTargetsInput = input(null, { ...(ngDevMode ? { debugName: "availableTargetsInput" } : /* istanbul ignore next */ {}), alias: 'availableTargets' });
     apply = output();
     save = output();
     resetChange = output();
@@ -4526,22 +5804,38 @@ class PraxisChartConfigEditor {
     normalizer = inject(ChartContractNormalizerService);
     validator = inject(ChartContractValidationService);
     previewMapper = inject(ChartEditorPreviewMapperService);
+    contextResolver = inject(PraxisChartConfigEditorContextResolverService);
     i18n = inject(PraxisI18nService);
     currentDocument = signal(this.defaults.create(), ...(ngDevMode ? [{ debugName: "currentDocument" }] : /* istanbul ignore next */ []));
     initialDocument = signal(this.defaults.create(), ...(ngDevMode ? [{ debugName: "initialDocument" }] : /* istanbul ignore next */ []));
+    resolvedResources = signal(null, ...(ngDevMode ? [{ debugName: "resolvedResources" }] : /* istanbul ignore next */ []));
+    resolvedFields = signal(null, ...(ngDevMode ? [{ debugName: "resolvedFields" }] : /* istanbul ignore next */ []));
+    catalogResolutionDiagnostics = signal([], ...(ngDevMode ? [{ debugName: "catalogResolutionDiagnostics" }] : /* istanbul ignore next */ []));
     lastExternalSignature = null;
+    lastCatalogInputSignature = null;
+    catalogResolutionRequestId = 0;
+    baseAvailableResources = computed(() => (this.availableResourcesInput() ?? this.injectedData?.availableResources ?? []), ...(ngDevMode ? [{ debugName: "baseAvailableResources" }] : /* istanbul ignore next */ []));
+    baseAvailableFields = computed(() => (this.availableFieldsInput() ?? this.injectedData?.availableFields ?? []), ...(ngDevMode ? [{ debugName: "baseAvailableFields" }] : /* istanbul ignore next */ []));
     normalizedDocument = computed(() => this.normalizer.normalize(this.currentDocument()), ...(ngDevMode ? [{ debugName: "normalizedDocument" }] : /* istanbul ignore next */ []));
-    validation = computed(() => this.validator.validate(this.normalizedDocument()), ...(ngDevMode ? [{ debugName: "validation" }] : /* istanbul ignore next */ []));
+    validation = computed(() => {
+        const validation = this.validator.validate(this.normalizedDocument());
+        const catalogIssues = this.catalogIssues();
+        return {
+            valid: validation.valid && !catalogIssues.some((issue) => issue.severity === 'error'),
+            issues: [
+                ...validation.issues,
+                ...catalogIssues,
+            ],
+        };
+    }, ...(ngDevMode ? [{ debugName: "validation" }] : /* istanbul ignore next */ []));
     issues = computed(() => this.validation().issues, ...(ngDevMode ? [{ debugName: "issues" }] : /* istanbul ignore next */ []));
-    availableResources = computed(() => this.availableResourcesInput().length
-        ? this.availableResourcesInput()
-        : (this.injectedData?.availableResources ?? []), ...(ngDevMode ? [{ debugName: "availableResources" }] : /* istanbul ignore next */ []));
-    availableFields = computed(() => this.availableFieldsInput().length
-        ? this.availableFieldsInput()
-        : (this.injectedData?.availableFields ?? []), ...(ngDevMode ? [{ debugName: "availableFields" }] : /* istanbul ignore next */ []));
-    availableTargets = computed(() => this.availableTargetsInput().length
-        ? this.availableTargetsInput()
-        : (this.injectedData?.availableTargets ?? []), ...(ngDevMode ? [{ debugName: "availableTargets" }] : /* istanbul ignore next */ []));
+    catalogIssues = computed(() => [
+        ...this.validateCatalogContext(),
+        ...this.catalogResolutionDiagnostics().map((diagnostic) => this.toCatalogIssue(diagnostic)),
+    ], ...(ngDevMode ? [{ debugName: "catalogIssues" }] : /* istanbul ignore next */ []));
+    availableResources = computed(() => this.resolvedResources() ?? this.baseAvailableResources(), ...(ngDevMode ? [{ debugName: "availableResources" }] : /* istanbul ignore next */ []));
+    availableFields = computed(() => this.resolvedFields() ?? this.baseAvailableFields(), ...(ngDevMode ? [{ debugName: "availableFields" }] : /* istanbul ignore next */ []));
+    availableTargets = computed(() => (this.availableTargetsInput() ?? this.injectedData?.availableTargets ?? []), ...(ngDevMode ? [{ debugName: "availableTargets" }] : /* istanbul ignore next */ []));
     preview = computed(() => {
         if (!this.validation().valid) {
             return null;
@@ -4549,6 +5843,21 @@ class PraxisChartConfigEditor {
         return this.previewMapper.build(this.normalizedDocument());
     }, ...(ngDevMode ? [{ debugName: "preview" }] : /* istanbul ignore next */ []));
     constructor() {
+        effect(() => {
+            const signature = JSON.stringify({
+                resources: this.baseAvailableResources(),
+                fields: this.baseAvailableFields(),
+            });
+            if (signature === this.lastCatalogInputSignature) {
+                return;
+            }
+            this.lastCatalogInputSignature = signature;
+            this.catalogResolutionRequestId += 1;
+            this.resolvedResources.set(null);
+            this.resolvedFields.set(null);
+            this.catalogResolutionDiagnostics.set([]);
+            this.isBusy$.next(false);
+        });
         effect(() => {
             const externalDocument = this.documentInput()
                 ?? this.injectedData?.chartDocument
@@ -4567,6 +5876,29 @@ class PraxisChartConfigEditor {
             this.lastExternalSignature = signature;
             this.refreshState(false);
         });
+        effect(() => {
+            const document = this.currentDocument();
+            if (this.isReadonly() || document.source.kind !== 'praxis.stats') {
+                return;
+            }
+            const resource = String(document.source.resource || '').trim();
+            const option = resource
+                ? this.availableResources().find((candidate) => this.resourceIdentityMatches(candidate, resource))
+                : undefined;
+            const canonicalPath = String(option?.path || '').trim();
+            if (!canonicalPath || canonicalPath === resource) {
+                return;
+            }
+            this.patchDocument((current) => current.source.kind === 'praxis.stats'
+                ? {
+                    ...current,
+                    source: {
+                        ...current.source,
+                        resource: canonicalPath,
+                    },
+                }
+                : current);
+        });
     }
     getSettingsValue() {
         return structuredClone(this.normalizedDocument());
@@ -4575,6 +5907,11 @@ class PraxisChartConfigEditor {
         return this.saveChanges().document;
     }
     reset() {
+        this.catalogResolutionRequestId += 1;
+        this.resolvedResources.set(null);
+        this.resolvedFields.set(null);
+        this.catalogResolutionDiagnostics.set([]);
+        this.isBusy$.next(false);
         const snapshot = structuredClone(this.initialDocument());
         this.currentDocument.set(snapshot);
         this.refreshState(false);
@@ -4692,15 +6029,29 @@ class PraxisChartConfigEditor {
         }));
     }
     setResource(value) {
+        const identity = value.trim();
+        const option = this.resourceOptions().find((candidate) => (this.resourceIdentityMatches(candidate, identity)));
+        const resource = String(option?.path || identity).trim();
         this.patchDocument((document) => ({
             ...document,
             source: document.source.kind === 'praxis.stats'
                 ? {
                     ...document.source,
-                    resource: value.trim() || undefined,
+                    resource: resource || undefined,
                 }
                 : document.source,
         }));
+        const baseCatalogAlreadyCoversSelection = !!option?.operations?.length
+            && this.baseAvailableFields().some((field) => this.fieldMatchesResourceOption(field, option));
+        if (!resource || !option || baseCatalogAlreadyCoversSelection) {
+            this.catalogResolutionRequestId += 1;
+            this.isBusy$.next(false);
+            this.catalogResolutionDiagnostics.set([]);
+            this.resolvedFields.set(null);
+            this.refreshState(this.isDirty$.value);
+            return;
+        }
+        void this.resolveSelectedResource(resource);
     }
     setOperation(value) {
         this.patchDocument((document) => ({
@@ -4747,10 +6098,18 @@ class PraxisChartConfigEditor {
             source: document.source.kind === 'praxis.stats'
                 ? {
                     ...document.source,
-                    options: {
-                        ...(document.source.options ?? {}),
-                        mode: value,
-                    },
+                    options: value === 'terms'
+                        ? {
+                            granularity: document.source.options?.granularity,
+                            fillGaps: document.source.options?.fillGaps,
+                            mode: value,
+                            orderBy: document.source.options?.orderBy,
+                            limit: document.source.options?.limit,
+                        }
+                        : {
+                            ...(document.source.options ?? {}),
+                            mode: value,
+                        },
                 }
                 : document.source,
         }));
@@ -5019,6 +6378,29 @@ class PraxisChartConfigEditor {
     resourceOptions() {
         return this.availableResources();
     }
+    selectedResourceOption() {
+        const resource = this.resourceValue();
+        if (!resource) {
+            return undefined;
+        }
+        return this.resourceOptions().find((option) => this.resourceIdentityMatches(option, resource));
+    }
+    operationOptions() {
+        const selectedResource = this.selectedResourceOption();
+        if (!selectedResource) {
+            return this.resourceOptions().length ? this.operations : [];
+        }
+        return selectedResource.operations?.length ? selectedResource.operations : [];
+    }
+    resourceCatalogUnavailable() {
+        return this.doc().source.kind === 'praxis.stats' && !this.resourceOptions().length;
+    }
+    operationCatalogUnavailable() {
+        return this.doc().source.kind === 'praxis.stats'
+            && !!this.resourceValue()
+            && !!this.selectedResourceOption()
+            && !this.operationOptions().length;
+    }
     granularityValue() {
         return this.doc().source.kind === 'praxis.stats'
             ? (this.doc().source.options?.granularity ?? 'day')
@@ -5112,8 +6494,15 @@ class PraxisChartConfigEditor {
     eventTarget(eventKey) {
         return this.doc().events?.[eventKey]?.target ?? '';
     }
-    targetOptions() {
-        return this.availableTargets();
+    targetOptions(action, eventKey) {
+        const targets = this.availableTargets();
+        return targets.filter((target) => ((!action || !target.actions?.length || target.actions.includes(action))
+            && (!eventKey
+                || target.events === undefined
+                || target.events.includes(eventKey))));
+    }
+    targetCatalogUnavailable(action, eventKey) {
+        return !!action && action !== 'emit' && !this.targetOptions(action, eventKey).length;
     }
     eventMappingText(eventKey) {
         const mapping = this.doc().events?.[eventKey]?.mapping;
@@ -5135,12 +6524,23 @@ class PraxisChartConfigEditor {
         if (!fields.length) {
             return [];
         }
-        return fields.filter((field) => {
-            if (!field.roles?.length) {
-                return role === 'dimension' ? field.aggregable !== true : true;
-            }
-            return field.roles.includes(role);
-        });
+        return fields.filter((field) => this.fieldMatchesSelectedResource(field)
+            && this.fieldMatchesOperation(field)
+            && this.fieldMatchesDistributionMode(field)
+            && this.fieldMatchesRole(field, role));
+    }
+    metricAggregationOptions(fieldName) {
+        const field = this.fieldOptions('metric').find((option) => option.field === fieldName);
+        if (!field?.aggregations?.length) {
+            return this.metricAggregations;
+        }
+        return this.metricAggregations.filter((aggregation) => field.aggregations?.includes(aggregation));
+    }
+    fieldOptionLabel(field) {
+        if (field.field === 'count') {
+            return this.t('praxis.charts.editor.metricAggregation.count', 'count');
+        }
+        return field.label || field.field;
     }
     showMetricAxisControls() {
         return this.doc().kind === 'combo';
@@ -5215,6 +6615,184 @@ class PraxisChartConfigEditor {
             return accumulator;
         }, {});
     }
+    validateCatalogContext() {
+        const document = this.normalizedDocument();
+        const issues = [];
+        if (document.source.kind === 'praxis.stats') {
+            if (!this.resourceOptions().length) {
+                issues.push(this.catalogError('resource-catalog-missing', 'source.resource', this.t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.')));
+            }
+            else if (document.source.resource && !this.selectedResourceOption()) {
+                issues.push(this.catalogError('resource-stale', 'source.resource', this.t('praxis.charts.editor.catalog.resourceStale', 'Selected resource is not available in the governed resource catalog.')));
+            }
+            if (document.source.resource && this.selectedResourceOption() && !this.operationOptions().length) {
+                issues.push(this.catalogError('operation-catalog-missing', 'source.operation', this.t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.')));
+            }
+            else if (document.source.operation
+                && this.operationOptions().length
+                && !this.operationOptions().includes(document.source.operation)) {
+                issues.push(this.catalogError('operation-stale', 'source.operation', this.t('praxis.charts.editor.catalog.operationStale', 'Selected operation is not supported by the governed resource catalog.')));
+            }
+            if (document.source.resource
+                && this.selectedResourceOption()
+                && this.operationOptions().length
+                && !this.availableFields().length) {
+                issues.push(this.catalogError('field-catalog-missing', 'dimensions', this.t('praxis.charts.editor.catalog.fieldCatalogMissing', 'The selected resource does not publish governed fields for chart authoring.')));
+            }
+        }
+        if (this.availableFields().length) {
+            document.dimensions?.forEach((dimension, index) => {
+                if (!dimension.field || this.fieldOptions('dimension').some((field) => field.field === dimension.field)) {
+                    return;
+                }
+                issues.push(this.catalogError('dimension-field-stale', `dimensions[${index}].field`, this.t('praxis.charts.editor.catalog.dimensionFieldStale', 'Selected dimension is not eligible for the current resource and operation.')));
+            });
+            document.metrics?.forEach((metric, index) => {
+                const metricField = metric.field;
+                if (metricField && !this.fieldOptions('metric').some((field) => field.field === metricField)) {
+                    issues.push(this.catalogError('metric-field-stale', `metrics[${index}].field`, this.t('praxis.charts.editor.catalog.metricFieldStale', 'Selected metric is not eligible for the current resource and operation.')));
+                    return;
+                }
+                const aggregationOptions = this.metricAggregationOptions(metricField);
+                if (metric.aggregation && !aggregationOptions.includes(metric.aggregation)) {
+                    issues.push(this.catalogError('metric-aggregation-stale', `metrics[${index}].aggregation`, this.t('praxis.charts.editor.catalog.metricAggregationStale', 'Selected aggregation is not allowed for the selected metric field.')));
+                }
+            });
+        }
+        for (const eventKey of ['pointClick', 'selectionChange', 'drillDown', 'crossFilter']) {
+            const eventAction = document.events?.[eventKey];
+            if (!eventAction?.action || eventAction.action === 'emit') {
+                continue;
+            }
+            const targetOptions = this.targetOptions(eventAction.action, eventKey);
+            if (!targetOptions.length) {
+                issues.push(this.catalogError('target-catalog-missing', `events.${eventKey}.target`, this.t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.')));
+            }
+            else if (eventAction.target && !targetOptions.some((target) => target.id === eventAction.target)) {
+                issues.push(this.catalogError('target-stale', `events.${eventKey}.target`, this.t('praxis.charts.editor.catalog.targetStale', 'Selected target is not available for this event action.')));
+            }
+        }
+        return issues;
+    }
+    fieldMatchesSelectedResource(field) {
+        const resource = this.selectedResourceOption();
+        if (!resource) {
+            return true;
+        }
+        return this.fieldMatchesResourceOption(field, resource);
+    }
+    fieldMatchesResourceOption(field, resource) {
+        const resourceIds = field.resourceIds ?? [];
+        const resourcePaths = field.resourcePaths ?? [];
+        if (!resourceIds.length && !resourcePaths.length) {
+            return true;
+        }
+        return resourceIds.includes(resource.id)
+            || resourcePaths.some((path) => this.normalizeResourcePath(path) === this.normalizeResourcePath(resource.path));
+    }
+    async resolveSelectedResource(resource) {
+        const requestId = ++this.catalogResolutionRequestId;
+        this.resolvedFields.set([]);
+        this.catalogResolutionDiagnostics.set([]);
+        this.isBusy$.next(true);
+        this.refreshState(this.isDirty$.value);
+        try {
+            const resolution = await this.contextResolver.resolveResource(resource);
+            if (requestId !== this.catalogResolutionRequestId) {
+                return;
+            }
+            if (resolution.resource) {
+                const currentResources = this.resolvedResources() ?? this.baseAvailableResources();
+                const matchIndex = currentResources.findIndex((candidate) => (candidate.id === resolution.resource?.id
+                    || this.resourceIdentityMatches(candidate, resource)));
+                this.resolvedResources.set(matchIndex >= 0
+                    ? currentResources.map((candidate, index) => index === matchIndex ? resolution.resource : candidate)
+                    : [...currentResources, resolution.resource]);
+            }
+            this.resolvedFields.set(resolution.fields);
+            this.catalogResolutionDiagnostics.set(resolution.diagnostics);
+        }
+        catch {
+            if (requestId !== this.catalogResolutionRequestId) {
+                return;
+            }
+            this.resolvedFields.set([]);
+            this.catalogResolutionDiagnostics.set([{
+                    code: 'chart-resource-capabilities-unavailable',
+                    severity: 'error',
+                    path: 'chartDocument.source.resource',
+                }]);
+        }
+        finally {
+            if (requestId === this.catalogResolutionRequestId) {
+                this.isBusy$.next(false);
+                this.refreshState(this.isDirty$.value);
+            }
+        }
+    }
+    resourceIdentityMatches(option, identity) {
+        const normalizedIdentity = this.normalizeResourcePath(identity);
+        return option.id === identity
+            || this.normalizeResourcePath(option.path) === normalizedIdentity;
+    }
+    normalizeResourcePath(value) {
+        return String(value || '').trim().replace(/^\/+|\/+$/g, '');
+    }
+    toCatalogIssue(diagnostic) {
+        return {
+            severity: diagnostic.severity === 'error' ? 'error' : 'warning',
+            code: diagnostic.code,
+            field: diagnostic.path || 'catalog',
+            message: this.catalogDiagnosticMessage(diagnostic.code),
+        };
+    }
+    catalogDiagnosticMessage(code) {
+        switch (code) {
+            case 'chart-resource-capabilities-denied':
+                return this.t('praxis.charts.editor.catalog.capabilitiesDenied', 'Access to the selected resource capabilities was denied.');
+            case 'chart-resource-capabilities-unavailable':
+                return this.t('praxis.charts.editor.catalog.capabilitiesUnavailable', 'The selected resource capabilities are temporarily unavailable.');
+            case 'chart-resource-catalog-selection-stale':
+                return this.t('praxis.charts.editor.catalog.resourceStale', 'Selected resource is not available in the governed resource catalog.');
+            case 'chart-resource-stats-fields-empty':
+                return this.t('praxis.charts.editor.catalog.fieldCatalogMissing', 'The selected resource does not publish governed fields for chart authoring.');
+            case 'chart-resource-stats-operations-empty':
+                return this.t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.');
+            default:
+                return this.t('praxis.charts.editor.catalog.contextUnavailable', 'Governed chart authoring context could not be resolved.');
+        }
+    }
+    fieldMatchesOperation(field) {
+        const operation = this.doc().source.kind === 'praxis.stats' ? this.doc().source.operation : undefined;
+        if (!operation || !field.operations?.length) {
+            return true;
+        }
+        return field.operations.includes(operation);
+    }
+    fieldMatchesDistributionMode(field) {
+        const source = this.doc().source;
+        if (source.kind !== 'praxis.stats' || source.operation !== 'distribution') {
+            return true;
+        }
+        if (!field.distributionModes?.length) {
+            return true;
+        }
+        return field.distributionModes.includes(source.options?.mode ?? 'terms');
+    }
+    fieldMatchesRole(field, role) {
+        if (!field.roles?.length) {
+            return role === 'dimension' ? field.aggregable !== true : true;
+        }
+        return field.roles.includes(role);
+    }
+    catalogError(code, field, message) {
+        return {
+            severity: 'error',
+            code,
+            field,
+            message,
+        };
+    }
     normalizeSizingSizeInput(value) {
         const trimmed = value.trim();
         if (!trimmed) {
@@ -5258,7 +6836,7 @@ class PraxisChartConfigEditor {
         this.documentChange.emit(structuredClone(this.normalizedDocument()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [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 metricAggregations; track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        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                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        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                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        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                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px}.editor-card{border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
             type: Component,
@@ -5271,7 +6849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSelectModule,
                         MatSlideToggleModule,
                         PraxisChartComponent
-                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [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 metricAggregations; track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        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                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        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                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        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                      @if (targetOptions().length) {\n                        <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px}.editor-card{border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
+                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { documentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], availableResourcesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargetsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], save: [{ type: i0.Output, args: ["save"] }], resetChange: [{ type: i0.Output, args: ["resetChange"] }], documentChange: [{ type: i0.Output, args: ["documentChange"] }] } });
 
 var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
@@ -5280,66 +6858,118 @@ var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
 });
 
 class PraxisChartWidgetConfigEditor {
+    i18n = inject(PraxisI18nService);
     inputs = null;
-    chartEditor;
+    context = null;
+    contextDiagnostics = [];
+    activeChartEditor;
+    chartEditorSubscription = new Subscription();
+    set chartEditor(value) {
+        if (this.activeChartEditor === value) {
+            return;
+        }
+        this.chartEditorSubscription.unsubscribe();
+        this.chartEditorSubscription = new Subscription();
+        this.activeChartEditor = value;
+        this.chartEditorDirty = false;
+        this.chartEditorValid = true;
+        if (value) {
+            this.bindChartEditor(value);
+        }
+        this.updateDirty();
+        this.updateValidity();
+    }
+    get chartEditor() {
+        return this.activeChartEditor;
+    }
     isDirty$ = new BehaviorSubject(false);
     isValid$ = new BehaviorSubject(true);
     isBusy$ = new BehaviorSubject(false);
-    subscription = new Subscription();
+    chartEditorDirty = false;
     chartEditorValid = true;
     queryContextDirty = false;
+    baselineQueryContextText = '';
     queryContextText = '';
     queryContextError = '';
     get chartDocument() {
         return this.inputs?.chartDocument ?? null;
     }
     get availableResources() {
-        return this.inputs?.availableResources ?? [];
+        return this.context?.availableResources ?? this.inputs?.availableResources ?? [];
     }
     get availableFields() {
-        return this.inputs?.availableFields ?? [];
+        return this.context?.availableFields ?? this.inputs?.availableFields ?? [];
     }
     get availableTargets() {
-        return this.inputs?.availableTargets ?? [];
-    }
-    ngAfterViewInit() {
-        if (!this.chartEditor) {
-            return;
-        }
-        this.subscription.add(this.chartEditor.isDirty$.subscribe((value) => this.isDirty$.next(value || this.queryContextDirty)));
-        this.subscription.add(this.chartEditor.isValid$.subscribe((value) => {
-            this.chartEditorValid = value;
-            this.updateValidity();
-        }));
-        this.subscription.add(this.chartEditor.isBusy$.subscribe((value) => this.isBusy$.next(value)));
+        return this.context?.availableTargets ?? this.inputs?.availableTargets ?? [];
     }
     ngOnChanges(changes) {
-        if (changes['inputs']) {
-            this.queryContextText = this.formatQueryContext(this.inputs?.queryContext);
-            this.queryContextError = '';
-            this.queryContextDirty = false;
-            this.isDirty$.next(this.chartEditor?.isDirty$.value ?? false);
-            this.updateValidity();
+        if (changes['inputs'] && (changes['inputs'].firstChange || !this.isDirty$.value)) {
+            this.rebaseQueryContext();
         }
     }
     ngOnDestroy() {
-        this.subscription.unsubscribe();
+        this.chartEditorSubscription.unsubscribe();
     }
     setQueryContextText(value) {
         this.queryContextText = value;
-        this.queryContextDirty = true;
+        this.queryContextDirty = value !== this.baselineQueryContextText;
         this.queryContextError = this.validateQueryContextText(value);
-        this.isDirty$.next(true);
+        this.updateDirty();
         this.updateValidity();
     }
     getSettingsValue() {
-        return this.buildValue(this.chartEditor?.getSettingsValue());
+        return this.buildValue(this.getChartDocumentForApply());
     }
     onSave() {
-        return this.buildValue(this.chartEditor?.onSave?.() ?? this.chartEditor?.getSettingsValue());
+        const value = this.buildValue(this.isValid$.value
+            ? this.getChartDocumentForSave()
+            : this.getChartDocumentForApply());
+        if (this.isValid$.value) {
+            this.baselineQueryContextText = this.queryContextText;
+            this.queryContextDirty = false;
+            this.updateDirty();
+        }
+        return value;
     }
     reset() {
         this.chartEditor?.reset();
+        this.queryContextText = this.baselineQueryContextText;
+        this.queryContextError = '';
+        this.queryContextDirty = false;
+        this.updateDirty();
+        this.updateValidity();
+    }
+    t(key, fallback) {
+        return this.i18n.resolve(resolvePraxisChartsText({ key, text: fallback }, fallback));
+    }
+    contextDiagnosticText(diagnostic) {
+        switch (diagnostic.code) {
+            case 'chart-resource-catalog-denied':
+                return this.t('praxis.charts.widget.contextDiagnostics.catalogDenied', 'Access to the governed resource catalog was denied.');
+            case 'chart-resource-catalog-unavailable':
+                return this.t('praxis.charts.widget.contextDiagnostics.catalogUnavailable', 'The governed resource catalog is temporarily unavailable.');
+            case 'chart-resource-catalog-empty':
+                return this.t('praxis.charts.widget.contextDiagnostics.catalogEmpty', 'No authorable stats resources were published by the governed catalog.');
+            case 'chart-resource-catalog-path-invalid':
+                return this.t('praxis.charts.widget.contextDiagnostics.catalogPathInvalid', 'The resource catalog published an unsafe or non-relative operational path.');
+            case 'chart-resource-capabilities-denied':
+                return this.t('praxis.charts.widget.contextDiagnostics.capabilitiesDenied', 'Access to the selected resource capabilities was denied.');
+            case 'chart-resource-capabilities-unavailable':
+                return this.t('praxis.charts.widget.contextDiagnostics.capabilitiesUnavailable', 'The selected resource capabilities are temporarily unavailable.');
+            case 'chart-resource-stats-operations-empty':
+                return this.t('praxis.charts.widget.contextDiagnostics.operationsEmpty', 'The selected resource does not publish authorable stats operations.');
+            case 'chart-resource-stats-fields-empty':
+                return this.t('praxis.charts.widget.contextDiagnostics.fieldsEmpty', 'The selected resource does not publish governed fields for chart authoring.');
+            case 'chart-resource-capabilities-identity-mismatch':
+                return this.t('praxis.charts.widget.contextDiagnostics.identityMismatch', 'The selected resource identity does not match its governed capability snapshot.');
+            case 'chart-resource-capabilities-path-invalid':
+                return this.t('praxis.charts.widget.contextDiagnostics.capabilitiesPathInvalid', 'The selected capability snapshot did not publish a safe governed resource path.');
+            case 'chart-resource-capabilities-path-mismatch':
+                return this.t('praxis.charts.widget.contextDiagnostics.capabilitiesPathMismatch', 'The selected capability snapshot path does not match the operational path published by the catalog.');
+            default:
+                return this.t('praxis.charts.widget.contextDiagnostics.partial', 'Some governed authoring choices could not be materialized from the current page context.');
+        }
     }
     buildValue(document) {
         const inputs = {
@@ -5347,19 +6977,57 @@ class PraxisChartWidgetConfigEditor {
             ...(document ? { chartDocument: document } : {}),
         };
         const queryContext = this.parseQueryContextText(this.queryContextText);
-        if (queryContext === undefined) {
+        if (queryContext.valid && queryContext.value === undefined) {
             delete inputs.queryContext;
         }
-        else {
-            inputs.queryContext = queryContext;
+        else if (queryContext.valid) {
+            inputs.queryContext = queryContext.value;
         }
         if (document?.source?.kind === 'praxis.stats') {
             delete inputs.data;
         }
+        delete inputs.availableResources;
+        delete inputs.availableFields;
+        delete inputs.availableTargets;
+        delete inputs.contextDiagnostics;
         return {
             inputs,
         };
     }
+    bindChartEditor(editor) {
+        this.chartEditorDirty = editor.isDirty$.value;
+        this.chartEditorValid = editor.isValid$.value;
+        this.isBusy$.next(editor.isBusy$.value);
+        this.chartEditorSubscription.add(editor.isDirty$.subscribe((value) => {
+            this.chartEditorDirty = value;
+            this.updateDirty();
+        }));
+        this.chartEditorSubscription.add(editor.isValid$.subscribe((value) => {
+            this.chartEditorValid = value;
+            this.updateValidity();
+        }));
+        this.chartEditorSubscription.add(editor.isBusy$.subscribe((value) => this.isBusy$.next(value)));
+    }
+    getChartDocumentForApply() {
+        return this.chartDocument ? this.chartEditor?.getSettingsValue() : undefined;
+    }
+    getChartDocumentForSave() {
+        if (!this.chartDocument) {
+            return undefined;
+        }
+        return this.chartEditor?.onSave?.() ?? this.chartEditor?.getSettingsValue();
+    }
+    rebaseQueryContext() {
+        this.baselineQueryContextText = this.formatQueryContext(this.inputs?.queryContext);
+        this.queryContextText = this.baselineQueryContextText;
+        this.queryContextError = '';
+        this.queryContextDirty = false;
+        this.updateDirty();
+        this.updateValidity();
+    }
+    updateDirty() {
+        this.isDirty$.next(this.chartEditorDirty || this.queryContextDirty);
+    }
     updateValidity() {
         this.isValid$.next(this.chartEditorValid && !this.queryContextError);
     }
@@ -5378,42 +7046,70 @@ class PraxisChartWidgetConfigEditor {
             const parsed = JSON.parse(trimmed);
             return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
                 ? ''
-                : 'Query context must be a JSON object.';
+                : this.t('praxis.charts.widget.queryContext.mustBeObject', 'Query context must be a JSON object.');
         }
-        catch (error) {
-            return error instanceof Error ? error.message : 'Invalid JSON.';
+        catch {
+            return this.t('praxis.charts.widget.queryContext.invalidJson', 'Query context must be valid JSON.');
         }
     }
     parseQueryContextText(value) {
         const trimmed = value.trim();
         if (!trimmed) {
-            return undefined;
+            return { valid: true, value: undefined };
+        }
+        try {
+            const parsed = JSON.parse(trimmed);
+            if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                return { valid: false };
+            }
+            return { valid: true, value: parsed };
+        }
+        catch {
+            return { valid: false };
         }
-        const parsed = JSON.parse(trimmed);
-        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
-            ? parsed
-            : null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartWidgetConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartWidgetConfigEditor, isStandalone: true, selector: "praxis-chart-widget-config-editor", inputs: { inputs: "inputs" }, viewQueries: [{ propertyName: "chartEditor", first: true, predicate: ["chartEditor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartWidgetConfigEditor, isStandalone: true, selector: "praxis-chart-widget-config-editor", inputs: { inputs: "inputs", context: "context", contextDiagnostics: "contextDiagnostics" }, providers: [providePraxisChartsI18n()], viewQueries: [{ propertyName: "chartEditor", first: true, predicate: ["chartEditor"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <section data-testid="chart-widget-config-editor">
-      <praxis-chart-config-editor
-        #chartEditor
-        [document]="chartDocument"
-        [availableResources]="availableResources"
-        [availableFields]="availableFields"
-        [availableTargets]="availableTargets"
-      />
+      @if (contextDiagnostics.length) {
+        <section
+          class="chart-widget-config-editor__diagnostics"
+          data-testid="chart-widget-context-diagnostics"
+          role="status"
+        >
+          <strong>{{ t('praxis.charts.widget.contextDiagnostics.title', 'Authoring context') }}</strong>
+          <ul>
+            @for (diagnostic of contextDiagnostics; track diagnostic.code + ':' + (diagnostic.path || '')) {
+              <li [class]="'chart-widget-config-editor__diagnostic--' + (diagnostic.severity || 'info')">
+                {{ contextDiagnosticText(diagnostic) }}
+              </li>
+            }
+          </ul>
+        </section>
+      }
+      @if (chartDocument) {
+        <praxis-chart-config-editor
+          #chartEditor
+          [document]="chartDocument"
+          [availableResources]="availableResources"
+          [availableFields]="availableFields"
+          [availableTargets]="availableTargets"
+        />
+      } @else {
+        <section class="chart-widget-config-editor__notice" data-testid="chart-widget-missing-document">
+          {{ t('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.') }}
+        </section>
+      }
       <section class="chart-widget-config-editor__runtime">
         <label class="chart-widget-config-editor__label" for="chart-query-context">
-          Query context
+          {{ t('praxis.charts.widget.queryContext.label', 'Query context') }}
         </label>
         <textarea
           id="chart-query-context"
           class="chart-widget-config-editor__textarea"
           rows="5"
           spellcheck="false"
-          aria-label="Query context"
+          [attr.aria-label]="t('praxis.charts.widget.queryContext.ariaLabel', 'Chart query context')"
           data-testid="chart-widget-query-context"
           [ngModel]="queryContextText"
           (ngModelChange)="setQueryContextText($event)"
@@ -5425,29 +7121,51 @@ class PraxisChartWidgetConfigEditor {
         }
       </section>
     </section>
-  `, isInline: true, styles: [".chart-widget-config-editor__runtime{display:grid;gap:8px;margin-top:16px}.chart-widget-config-editor__label{font-size:12px;font-weight:600;color:#000000b8}.chart-widget-config-editor__textarea{box-sizing:border-box;width:100%;min-height:112px;padding:10px 12px;border:1px solid rgba(0,0,0,.2);border-radius:6px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;resize:vertical}.chart-widget-config-editor__error{color:#b3261e;font-size:12px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PraxisChartConfigEditor, selector: "praxis-chart-config-editor", inputs: ["document", "mode", "readonly", "availableResources", "availableFields", "availableTargets"], outputs: ["apply", "save", "resetChange", "documentChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".chart-widget-config-editor__runtime{display:grid;gap:8px;margin-top:16px}.chart-widget-config-editor__diagnostics{display:grid;gap:6px;margin-bottom:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-tertiary, #765b00) 28%,transparent);border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-tertiary-container, #ffdf92) 42%,var(--md-sys-color-surface, #fff));color:var(--md-sys-color-on-tertiary-container, #271900);font-size:12px;line-height:1.4}.chart-widget-config-editor__diagnostics ul{display:grid;gap:4px;margin:0;padding-left:18px}.chart-widget-config-editor__diagnostic--error{color:var(--md-sys-color-error, #b3261e)}.chart-widget-config-editor__label{font-size:12px;font-weight:600;color:#000000b8}.chart-widget-config-editor__textarea{box-sizing:border-box;width:100%;min-height:112px;padding:10px 12px;border:1px solid rgba(0,0,0,.2);border-radius:6px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;resize:vertical}.chart-widget-config-editor__error{color:#b3261e;font-size:12px}.chart-widget-config-editor__notice{padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:6px;color:#000000b8;font-size:12px;line-height:1.4;background:#00000008}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PraxisChartConfigEditor, selector: "praxis-chart-config-editor", inputs: ["document", "mode", "readonly", "availableResources", "availableFields", "availableTargets"], outputs: ["apply", "save", "resetChange", "documentChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartWidgetConfigEditor, decorators: [{
             type: Component,
             args: [{ selector: 'praxis-chart-widget-config-editor', standalone: true, imports: [FormsModule, PraxisChartConfigEditor], template: `
     <section data-testid="chart-widget-config-editor">
-      <praxis-chart-config-editor
-        #chartEditor
-        [document]="chartDocument"
-        [availableResources]="availableResources"
-        [availableFields]="availableFields"
-        [availableTargets]="availableTargets"
-      />
+      @if (contextDiagnostics.length) {
+        <section
+          class="chart-widget-config-editor__diagnostics"
+          data-testid="chart-widget-context-diagnostics"
+          role="status"
+        >
+          <strong>{{ t('praxis.charts.widget.contextDiagnostics.title', 'Authoring context') }}</strong>
+          <ul>
+            @for (diagnostic of contextDiagnostics; track diagnostic.code + ':' + (diagnostic.path || '')) {
+              <li [class]="'chart-widget-config-editor__diagnostic--' + (diagnostic.severity || 'info')">
+                {{ contextDiagnosticText(diagnostic) }}
+              </li>
+            }
+          </ul>
+        </section>
+      }
+      @if (chartDocument) {
+        <praxis-chart-config-editor
+          #chartEditor
+          [document]="chartDocument"
+          [availableResources]="availableResources"
+          [availableFields]="availableFields"
+          [availableTargets]="availableTargets"
+        />
+      } @else {
+        <section class="chart-widget-config-editor__notice" data-testid="chart-widget-missing-document">
+          {{ t('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.') }}
+        </section>
+      }
       <section class="chart-widget-config-editor__runtime">
         <label class="chart-widget-config-editor__label" for="chart-query-context">
-          Query context
+          {{ t('praxis.charts.widget.queryContext.label', 'Query context') }}
         </label>
         <textarea
           id="chart-query-context"
           class="chart-widget-config-editor__textarea"
           rows="5"
           spellcheck="false"
-          aria-label="Query context"
+          [attr.aria-label]="t('praxis.charts.widget.queryContext.ariaLabel', 'Chart query context')"
           data-testid="chart-widget-query-context"
           [ngModel]="queryContextText"
           (ngModelChange)="setQueryContextText($event)"
@@ -5459,9 +7177,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }
       </section>
     </section>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".chart-widget-config-editor__runtime{display:grid;gap:8px;margin-top:16px}.chart-widget-config-editor__label{font-size:12px;font-weight:600;color:#000000b8}.chart-widget-config-editor__textarea{box-sizing:border-box;width:100%;min-height:112px;padding:10px 12px;border:1px solid rgba(0,0,0,.2);border-radius:6px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;resize:vertical}.chart-widget-config-editor__error{color:#b3261e;font-size:12px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, providers: [providePraxisChartsI18n()], styles: [".chart-widget-config-editor__runtime{display:grid;gap:8px;margin-top:16px}.chart-widget-config-editor__diagnostics{display:grid;gap:6px;margin-bottom:16px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--md-sys-color-tertiary, #765b00) 28%,transparent);border-radius:10px;background:color-mix(in srgb,var(--md-sys-color-tertiary-container, #ffdf92) 42%,var(--md-sys-color-surface, #fff));color:var(--md-sys-color-on-tertiary-container, #271900);font-size:12px;line-height:1.4}.chart-widget-config-editor__diagnostics ul{display:grid;gap:4px;margin:0;padding-left:18px}.chart-widget-config-editor__diagnostic--error{color:var(--md-sys-color-error, #b3261e)}.chart-widget-config-editor__label{font-size:12px;font-weight:600;color:#000000b8}.chart-widget-config-editor__textarea{box-sizing:border-box;width:100%;min-height:112px;padding:10px 12px;border:1px solid rgba(0,0,0,.2);border-radius:6px;font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;resize:vertical}.chart-widget-config-editor__error{color:#b3261e;font-size:12px}.chart-widget-config-editor__notice{padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:6px;color:#000000b8;font-size:12px;line-height:1.4;background:#00000008}\n"] }]
         }], propDecorators: { inputs: [{
                 type: Input
+            }], context: [{
+                type: Input
+            }], contextDiagnostics: [{
+                type: Input
             }], chartEditor: [{
                 type: ViewChild,
                 args: ['chartEditor']
@@ -5493,6 +7215,25 @@ const PRAXIS_CHART_PALETTE_DEFAULT_DATA = [
     { category: 'B', value: 32 },
     { category: 'C', value: 24 },
 ];
+const PRAXIS_CHART_PALETTE_DEFAULT_DOCUMENT = {
+    version: PRAXIS_X_UI_CHART_AUTHORABLE_VERSION,
+    kind: 'bar',
+    chartId: 'palette-chart',
+    title: 'Analytics preview',
+    subtitle: 'Sample chart inserted from the Praxis component palette.',
+    source: {
+        kind: 'derived',
+    },
+    dimensions: [{ field: 'category', role: 'category' }],
+    metrics: [{ field: 'value', aggregation: 'sum', label: 'Value' }],
+    legend: { enabled: true },
+    labels: { enabled: false },
+    tooltip: { enabled: true },
+    motion: {
+        enabled: true,
+        preset: 'standard',
+    },
+};
 const PRAXIS_CHART_PHASE1_PORTS = [
     {
         id: 'queryContext',
@@ -5555,7 +7296,7 @@ const PRAXIS_CHART_PHASE1_PORTS = [
         label: 'Point Click',
         direction: 'output',
         semanticKind: 'event',
-        description: 'Interaction event emitted when a point or series is clicked.',
+        description: 'Raw renderer-neutral point evidence emitted when a point or series is clicked.',
         cardinality: 'stream',
         schema: {
             id: 'PraxisChartPointEvent',
@@ -5564,6 +7305,20 @@ const PRAXIS_CHART_PHASE1_PORTS = [
         },
         exposure: { public: true, group: 'interaction' },
     },
+    {
+        id: 'pointAction',
+        label: 'Point Action',
+        direction: 'output',
+        semanticKind: 'event',
+        description: 'Structured configured pointClick action derived from raw point evidence.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartPointActionEvent',
+            kind: 'ts-type',
+            ref: 'PraxisChartPointActionEvent',
+        },
+        exposure: { public: true, group: 'interaction' },
+    },
     {
         id: 'selectionChange',
         label: 'Selection Change',
@@ -5578,6 +7333,20 @@ const PRAXIS_CHART_PHASE1_PORTS = [
         },
         exposure: { public: true, group: 'interaction' },
     },
+    {
+        id: 'drillDown',
+        label: 'Drill Down',
+        direction: 'output',
+        semanticKind: 'event',
+        description: 'Structured drill-down action payload derived from selected chart point evidence.',
+        cardinality: 'stream',
+        schema: {
+            id: 'PraxisChartDrillDownEvent',
+            kind: 'ts-type',
+            ref: 'PraxisChartDrillDownEvent',
+        },
+        exposure: { public: true, group: 'interaction' },
+    },
     {
         id: 'crossFilter',
         label: 'Cross Filter',
@@ -5636,6 +7405,23 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
         component: PraxisChartWidgetConfigEditor,
         title: 'Configure chart',
     },
+    authoringManifestRef: {
+        componentId: 'praxis-chart',
+        source: 'PRAXIS_CHARTS_AUTHORING_MANIFEST',
+    },
+    insertionPresets: [
+        {
+            id: 'canonical-chart',
+            label: 'Canonical chart',
+            description: 'Creates a chart widget from the canonical x-ui.chart authoring document.',
+            icon: 'bar_chart',
+            inputs: {
+                chartDocument: PRAXIS_CHART_PALETTE_DEFAULT_DOCUMENT,
+                data: PRAXIS_CHART_PALETTE_DEFAULT_DATA,
+                enableCustomization: true,
+            },
+        },
+    ],
     inputs: [
         {
             name: 'config',
@@ -5653,6 +7439,7 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
             name: 'chartDocument',
             type: 'PraxisXUiChartContract | null',
             description: 'Optional canonical x-ui.chart document used as the authoring source of truth for settings-panel integration.',
+            default: PRAXIS_CHART_PALETTE_DEFAULT_DOCUMENT,
         },
         {
             name: 'queryContext',
@@ -5678,19 +7465,19 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
         {
             name: 'availableResources',
             type: 'ReadonlyArray<ChartEditorResourceOption>',
-            description: 'Catalog of remote resources exposed to the runtime chart editor when customization is enabled.',
+            description: 'Transient governed resource catalog. id is the stable discovery identity and path is the root-relative operational value persisted to chartDocument.source.resource; the catalog itself is not persisted.',
             default: [],
         },
         {
             name: 'availableFields',
             type: 'ReadonlyArray<ChartEditorFieldOption>',
-            description: 'Catalog of semantic fields exposed to the runtime chart editor when customization is enabled.',
+            description: 'Transient capability-backed field catalog with exact operation, aggregation and distribution terms/histogram eligibility; not intended for widget persistence.',
             default: [],
         },
         {
             name: 'availableTargets',
             type: 'ReadonlyArray<ChartEditorTargetOption>',
-            description: 'Catalog of widget or route targets exposed to chart runtime actions in the config editor.',
+            description: 'Transient event-scoped targets from existing top-level links that are compatible with public, non-deprecated widget ports or explicitly writable declared page state. events[] identifies the exact authorized structured Chart events; raw pointClick never authorizes events.pointClick, which uses pointAction. Local transform.output semantic-kind inspection is provisional and does not replace a Core-validated transform-output projection (P2). The catalog is not persisted.',
             default: [],
         },
     ],
@@ -5698,12 +7485,22 @@ const PRAXIS_CHART_COMPONENT_METADATA = {
         {
             name: 'pointClick',
             type: 'PraxisChartPointEvent',
-            description: 'Emitted when the host wants to react to a point/series click.',
+            description: 'Raw renderer-neutral point evidence emitted when the host wants to observe a point/series click.',
+        },
+        {
+            name: 'pointAction',
+            type: 'PraxisChartPointActionEvent',
+            description: 'Emitted when a configured pointClick action resolves semantic filters and target evidence from a point/series click.',
         },
         {
             name: 'selectionChange',
             type: 'PraxisChartSelectionEvent',
-            description: 'Emitted when declarative chart selection resolves a selected point and its canonical filters.',
+            description: 'Emitted when declarative single-point chart selection resolves selected point evidence and canonical filters.',
+        },
+        {
+            name: 'drillDown',
+            type: 'PraxisChartDrillDownEvent',
+            description: 'Emitted when declarative drill-down resolves action, target and canonical filters from a selected chart point.',
         },
         {
             name: 'crossFilter',
@@ -5747,10 +7544,18 @@ function providePraxisChartsMetadata() {
     return {
         provide: ENVIRONMENT_INITIALIZER,
         multi: true,
-        useFactory: (registry) => () => {
-            registry.register(PRAXIS_CHART_COMPONENT_METADATA);
+        useFactory: (registry, injector) => () => {
+            registry.register({
+                ...PRAXIS_CHART_COMPONENT_METADATA,
+                configEditor: {
+                    ...PRAXIS_CHART_COMPONENT_METADATA.configEditor,
+                    contextResolver: (request) => injector
+                        .get(PraxisChartConfigEditorContextResolverService)
+                        .resolve(request),
+                },
+            });
         },
-        deps: [ComponentMetadataRegistry],
+        deps: [ComponentMetadataRegistry, Injector],
     };
 }
 
@@ -5832,7 +7637,9 @@ class PraxisChartShowcaseWidgetComponent {
     enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization" }] : /* istanbul ignore next */ []));
     viewMode = input('chart', ...(ngDevMode ? [{ debugName: "viewMode" }] : /* istanbul ignore next */ []));
     pointClick = output();
+    pointAction = output();
     selectionChange = output();
+    drillDown = output();
     crossFilter = output();
     queryRequest = output();
     loadStateChange = output();
@@ -5948,7 +7755,7 @@ class PraxisChartShowcaseWidgetComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartShowcaseWidgetComponent, isStandalone: true, selector: "praxis-chart-showcase-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", selectionChange: "selectionChange", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartShowcaseWidgetComponent, isStandalone: true, selector: "praxis-chart-showcase-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, remoteDataResolver: { classPropertyName: "remoteDataResolver", publicName: "remoteDataResolver", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", pointAction: "pointAction", selectionChange: "selectionChange", drillDown: "drillDown", crossFilter: "crossFilter", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: `
     @if (viewMode() === 'chart') {
       <praxis-chart
         [config]="config()"
@@ -5957,7 +7764,9 @@ class PraxisChartShowcaseWidgetComponent {
         [remoteDataResolver]="remoteDataResolver()"
         [enableCustomization]="enableCustomization()"
         (pointClick)="pointClick.emit($event)"
+        (pointAction)="pointAction.emit($event)"
         (selectionChange)="selectionChange.emit($event)"
+        (drillDown)="drillDown.emit($event)"
         (crossFilter)="crossFilter.emit($event)"
         (queryRequest)="queryRequest.emit($event)"
         (loadStateChange)="loadStateChange.emit($event)"
@@ -5984,7 +7793,7 @@ class PraxisChartShowcaseWidgetComponent {
         (rowClick)="handleRowClick($event)"
       ></praxis-table>
     }
-  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "selectionChange", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "authoringCapability", "dense"], outputs: ["rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "configPersistenceStrategy", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "filterCriteria", "queryContext", "aiContext", "aiAssistantVoiceInputMode", "aiAssistantVoiceLanguage", "horizontalScroll", "enableCustomization", "authoringCapability", "dense"], outputs: ["rowClick", "widgetEvent", "resourceEvent", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "exportAction", "columnReorder", "columnReorderAttempt", "columnResize", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "configChange", "metadataChange", "loadingStateChange", "collectionLinksChange", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
             type: Component,
@@ -5997,7 +7806,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         [remoteDataResolver]="remoteDataResolver()"
         [enableCustomization]="enableCustomization()"
         (pointClick)="pointClick.emit($event)"
+        (pointAction)="pointAction.emit($event)"
         (selectionChange)="selectionChange.emit($event)"
+        (drillDown)="drillDown.emit($event)"
         (crossFilter)="crossFilter.emit($event)"
         (queryRequest)="queryRequest.emit($event)"
         (loadStateChange)="loadStateChange.emit($event)"
@@ -6025,7 +7836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
       ></praxis-table>
     }
   `, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], 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 resolveShowcaseStateMode(config, remoteRuntimeState = 'idle') {
     if (config.preferredLoadState === 'loading') {
         return 'loading';
@@ -6204,13 +8015,23 @@ const PRAXIS_CHART_SHOWCASE_WIDGET_METADATA = {
         {
             name: 'pointClick',
             type: 'PraxisChartPointEvent',
-            description: 'Forwards point selection from the chart or mapped row selection from the table.',
+            description: 'Forwards raw point evidence from the chart or mapped row selection from the table.',
+        },
+        {
+            name: 'pointAction',
+            type: 'PraxisChartPointActionEvent',
+            description: 'Forwards configured pointClick action payloads from the chart.',
         },
         {
             name: 'selectionChange',
             type: 'PraxisChartSelectionEvent',
             description: 'Forwards chart selection events with mapped filter values.',
         },
+        {
+            name: 'drillDown',
+            type: 'PraxisChartDrillDownEvent',
+            description: 'Forwards chart drill-down action payloads for Dynamic Page composition links.',
+        },
         {
             name: 'crossFilter',
             type: 'PraxisChartCrossFilterEvent',
@@ -6281,38 +8102,10 @@ function providePraxisCharts(options = {}) {
     ];
 }
 
-class PraxisChartMetadataRegistrationService {
-    registry;
-    registered = false;
-    constructor(registry) {
-        this.registry = registry;
-        this.ensureRegistered();
-    }
-    ensureRegistered() {
-        if (this.registered) {
-            return;
-        }
-        this.registry.register(PRAXIS_CHART_COMPONENT_METADATA);
-        this.registry.register(PRAXIS_CHART_DRILLDOWN_PANEL_METADATA);
-        this.registry.register(PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA);
-        this.registry.register(PRAXIS_CHART_SHOWCASE_WIDGET_METADATA);
-        this.registered = true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartMetadataRegistrationService, deps: [{ token: i1$1.ComponentMetadataRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartMetadataRegistrationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartMetadataRegistrationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.ComponentMetadataRegistry }] });
-
 class PraxisChartSchemaMapperService {
-    metadataRegistration;
     canonicalContractMapper;
-    constructor(metadataRegistration, canonicalContractMapper) {
-        this.metadataRegistration = metadataRegistration;
+    constructor(canonicalContractMapper) {
         this.canonicalContractMapper = canonicalContractMapper;
-        this.metadataRegistration.ensureRegistered();
     }
     resolve(input, defaults) {
         const schema = this.normalize(input);
@@ -6401,8 +8194,12 @@ class PraxisChartSchemaMapperService {
         }
         const events = schema.chart?.events;
         const outputs = {};
-        if (events?.pointClick || events?.drillDown) {
+        if (events?.pointClick) {
             outputs['pointClick'] = 'emit';
+            outputs['pointAction'] = 'emit';
+        }
+        if (events?.drillDown) {
+            outputs['drillDown'] = 'emit';
         }
         if (events?.selectionChange) {
             outputs['selectionChange'] = 'emit';
@@ -6412,13 +8209,13 @@ class PraxisChartSchemaMapperService {
         }
         return Object.keys(outputs).length ? outputs : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartSchemaMapperService, deps: [{ token: PraxisChartMetadataRegistrationService }, { token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartSchemaMapperService, deps: [{ token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartSchemaMapperService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartSchemaMapperService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: PraxisChartMetadataRegistrationService }, { type: PraxisChartCanonicalContractMapperService }] });
+        }], ctorParameters: () => [{ type: PraxisChartCanonicalContractMapperService }] });
 
 class PraxisChartBackendPayloadAdapterService {
     chartSchemaMapper;
@@ -6472,7 +8269,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         }], ctorParameters: () => [{ type: PraxisChartSchemaMapperService }, { type: PraxisChartCanonicalContractMapperService }] });
 
 class AnalyticsChartConfigAdapterService {
+    i18n;
     statsBuilder = new AnalyticsStatsRequestBuilderService();
+    constructor(i18n) {
+        this.i18n = i18n;
+    }
     toPraxisChartConfig(projection, options) {
         const chartType = this.resolveChartType(projection);
         const orientation = chartType === 'horizontal-bar' ? 'horizontal' : undefined;
@@ -6484,6 +8285,11 @@ class AnalyticsChartConfigAdapterService {
         if (!metrics.length) {
             throw new Error(`AnalyticsChartConfigAdapterService requires at least one metric for projection "${projection.id}".`);
         }
+        const crossFilter = Boolean(projection.interactions?.crossFilter);
+        const keyFilterField = dimension.keyFilterField?.trim();
+        if (crossFilter && !keyFilterField) {
+            throw new Error(`AnalyticsChartConfigAdapterService requires primaryDimension.keyFilterField when crossFilter is enabled for projection "${projection.id}".`);
+        }
         return {
             id: projection.id,
             type: chartType,
@@ -6498,6 +8304,17 @@ class AnalyticsChartConfigAdapterService {
                 pointClick: Boolean(projection.interactions?.pointSelection || projection.interactions?.drillDown),
                 drillDown: Boolean(projection.interactions?.drillDown),
                 selection: Boolean(projection.interactions?.pointSelection),
+                crossFilter,
+                ...(crossFilter
+                    ? {
+                        eventActions: {
+                            crossFilter: {
+                                action: 'emit',
+                                mapping: { key: keyFilterField },
+                            },
+                        },
+                    }
+                    : {}),
             },
         };
     }
@@ -6529,18 +8346,27 @@ class AnalyticsChartConfigAdapterService {
     }
     buildSeries(projection, chartType) {
         const dimension = projection.bindings.primaryDimension;
-        return this.getDisplayMetrics(projection).map((metric, index) => ({
-            id: `${projection.id}.${metric.field}.${index + 1}`,
-            name: metric.label ?? metric.field,
-            type: chartType,
-            categoryField: chartType === 'pie' || chartType === 'donut' ? dimension.field : undefined,
-            metric: {
-                field: metric.field,
-                aggregation: this.mapAggregation(metric.aggregation),
-                label: metric.label ?? undefined,
-            },
-            smooth: chartType === 'line' || chartType === 'area',
-        }));
+        const comparison = projection.source.operation === 'comparison';
+        return this.getDisplayMetrics(projection).flatMap((metric, index) => comparison
+            ? ['current', 'previous'].map((period) => ({
+                id: `${projection.id}.${metric.field}.${period}`,
+                name: `${metric.label ?? metric.field} (${this.comparisonPeriodLabel(period)})`,
+                type: chartType,
+                categoryField: dimension.field,
+                metric: { field: this.comparisonMetricField(metric.field, period), aggregation: this.mapAggregation(metric.aggregation) },
+            }))
+            : [{
+                    id: `${projection.id}.${metric.field}.${index + 1}`,
+                    name: metric.label ?? metric.field,
+                    type: chartType,
+                    categoryField: chartType === 'pie' || chartType === 'donut' ? dimension.field : undefined,
+                    metric: {
+                        field: metric.field,
+                        aggregation: this.mapAggregation(metric.aggregation),
+                        label: metric.label ?? undefined,
+                    },
+                    smooth: chartType === 'line' || chartType === 'area',
+                }]);
     }
     buildDataSource(projection) {
         const executionPlan = this.statsBuilder.buildExecutionPlan(projection);
@@ -6554,7 +8380,13 @@ class AnalyticsChartConfigAdapterService {
                 statsPath: executionPlan.statsPath,
                 statsRequest: executionPlan.statsRequest,
                 dimensions: executionPlan.dimensions,
-                metrics: this.mapExecutionMetrics(executionPlan),
+                metrics: projection.source.operation === 'comparison'
+                    ? this.getDisplayMetrics(projection).flatMap((metric) => ['current', 'previous'].map((period) => ({
+                        field: this.comparisonMetricField(metric.field, period),
+                        aggregation: this.mapAggregation(metric.aggregation),
+                        alias: this.comparisonMetricField(metric.field, period),
+                    })))
+                    : this.mapExecutionMetrics(executionPlan),
                 sort: executionPlan.sort,
                 limit: executionPlan.limit,
             },
@@ -6604,13 +8436,25 @@ class AnalyticsChartConfigAdapterService {
             ...(projection.bindings.secondaryMetrics ?? []),
         ];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    comparisonMetricField(metricField, period) {
+        return `__praxisComparison_${metricField}_${period}`;
+    }
+    comparisonPeriodLabel(period) {
+        const key = period === 'current'
+            ? 'praxis.charts.runtime.comparisonCurrent'
+            : 'praxis.charts.runtime.comparisonPrevious';
+        const fallback = period === 'current' ? 'Current' : 'Previous';
+        return this.i18n?.t(key, undefined, fallback, 'charts') ?? fallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, deps: [{ token: i1$1.PraxisI18nService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: AnalyticsChartConfigAdapterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: i1$1.PraxisI18nService, decorators: [{
+                    type: Optional
+                }] }] });
 
 class AnalyticsChartContractService {
     analyticsSchema;
@@ -6713,7 +8557,7 @@ function normalizeError(error) {
 
 const PRAXIS_CHART_BACKEND_MOCK_BAR = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-perfil-heroi|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-perfil-heroi|post|response|internal:false',
         schemaHash: 'published-hash-hero-universe-v1',
         resourcePath: 'api/human-resources/vw-perfil-heroi',
         operation: 'post',
@@ -6743,7 +8587,7 @@ const PRAXIS_CHART_BACKEND_MOCK_BAR = {
             sizing: { mode: 'fixed', height: 320 },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-perfil-heroi',
+                resource: '/api/human-resources/vw-perfil-heroi',
                 operation: 'group-by',
                 options: {
                     orderBy: 'value-desc',
@@ -6795,7 +8639,7 @@ const PRAXIS_CHART_BACKEND_MOCK_BAR = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|internal:false',
         schemaHash: 'published-hash-incident-timeseries-v1',
         resourcePath: 'api/human-resources/vw-indicadores-incidentes',
         operation: 'post',
@@ -6819,7 +8663,7 @@ const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
             subtitle: { key: 'charts.incidents.timeline.subtitle', fallback: 'Timeseries em /vw-indicadores-incidentes' },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-indicadores-incidentes',
+                resource: '/api/human-resources/vw-indicadores-incidentes',
                 operation: 'timeseries',
                 options: {
                     granularity: 'month',
@@ -6851,7 +8695,7 @@ const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|internal:false',
         schemaHash: 'published-hash-incident-severity-v1',
         resourcePath: 'api/human-resources/vw-indicadores-incidentes',
         operation: 'post',
@@ -6874,7 +8718,7 @@ const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
             title: { key: 'charts.incidents.severity.title', fallback: 'Severidade de incidentes' },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-indicadores-incidentes',
+                resource: '/api/human-resources/vw-indicadores-incidentes',
                 operation: 'distribution',
                 options: {
                     mode: 'terms',
@@ -6907,7 +8751,7 @@ const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|internal:false',
         schemaHash: 'published-hash-payroll-department-ranking-v1',
         resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
         operation: 'post',
@@ -6933,7 +8777,7 @@ const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
             sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                resource: '/api/human-resources/vw-analytics-folha-pagamento',
                 operation: 'group-by',
                 options: {
                     orderBy: 'value-desc',
@@ -6969,7 +8813,7 @@ const PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|internal:false',
         schemaHash: 'published-hash-payroll-net-trend-stacked-v1',
         resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
         operation: 'post',
@@ -6994,7 +8838,7 @@ const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
             sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                resource: '/api/human-resources/vw-analytics-folha-pagamento',
                 operation: 'timeseries',
                 options: {
                     granularity: 'month',
@@ -7025,7 +8869,7 @@ const PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|internal:false',
         schemaHash: 'published-hash-payroll-multi-metric-bar-v1',
         resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
         operation: 'post',
@@ -7053,7 +8897,7 @@ const PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR = {
             sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                resource: '/api/human-resources/vw-analytics-folha-pagamento',
                 operation: 'group-by',
                 options: {
                     orderBy: 'value-desc',
@@ -7091,7 +8935,7 @@ const PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|internal:false',
         schemaHash: 'published-hash-payroll-scatter-v1',
         resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
         operation: 'post',
@@ -7116,7 +8960,7 @@ const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
             sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                resource: '/api/human-resources/vw-analytics-folha-pagamento',
                 operation: 'group-by',
                 options: {
                     orderBy: 'key-asc',
@@ -7147,7 +8991,7 @@ const PRAXIS_CHART_BACKEND_MOCK_SCATTER = {
 };
 const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
     schemaMeta: {
-        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|tenant:demo|locale:pt-BR',
+        schemaId: 'api/human-resources/vw-analytics-folha-pagamento|post|response|internal:false',
         schemaHash: 'published-hash-payroll-combo-v2',
         resourcePath: 'api/human-resources/vw-analytics-folha-pagamento',
         operation: 'post',
@@ -7172,7 +9016,7 @@ const PRAXIS_CHART_BACKEND_MOCK_COMBO = {
             sizing: { mode: 'fixed', height: 340 },
             source: {
                 kind: 'praxis.stats',
-                resource: 'api/human-resources/vw-analytics-folha-pagamento',
+                resource: '/api/human-resources/vw-analytics-folha-pagamento',
                 operation: 'timeseries',
                 options: {
                     granularity: 'month',
@@ -7655,7 +9499,7 @@ class PraxisChartCompositionShowcaseComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePraxisCharts()], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <section class="showcase-shell">
       <header class="showcase-hero">
         <div class="showcase-copy">
@@ -7771,7 +9615,7 @@ class PraxisChartCompositionShowcaseComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [DynamicWidgetPageComponent], providers: [providePraxisCharts()], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [DynamicWidgetPageComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <section class="showcase-shell">
       <header class="showcase-hero">
         <div class="showcase-copy">
@@ -7886,11 +9730,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
   `, 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"] }]
         }], propDecorators: { enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }] } });
 
+const PRAXIS_CHART_AUTHORING_COVERAGE = [
+    { path: 'chartDocument', mode: 'advanced-structured', owner: 'chart-ai-manifest', rationale: 'Whole-document authoring is allowed for AI and structured import, but the visual editor must not become a raw JSON primary path.', proof: ['praxis-charts-authoring-manifest.spec.ts', 'praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.version', mode: 'derived-readonly', owner: 'chart-contract-normalizer', rationale: 'Version is canonical schema governance and is normalized to the authorable x-ui.chart version.', proof: ['chart-authoring-coverage.matrix.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.kind', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Chart kind is a first-class visual decision with runtime mapper and AI manifest parity.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.preset', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Preset is semantic starter intent; the current editor preserves it instead of presenting it as a misleading post-hoc visual control.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.chartId', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Stable chart identity is editable for host/runtime diagnostics and event correlation.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.orientation', mode: 'ai-authorable', owner: 'chart-ai-manifest', rationale: 'Orientation is compiled by chart type and axis decisions; the visual editor currently preserves it without a separate control.', proof: ['praxis-charts-authoring-manifest.spec.ts', 'praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.title', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Title is primary presentation copy in the editor and runtime preview.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.subtitle', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Subtitle is presentation copy edited alongside title.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.sizing', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Sizing controls are canonical runtime layout decisions; deprecated height is normalized into sizing.height.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.height', mode: 'derived-readonly', owner: 'chart-contract-normalizer', rationale: 'Deprecated compatibility input is consumed and cleared in favor of chartDocument.sizing.height.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.kind', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Source kind selects local derived data versus governed praxis.stats binding.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-chart-widget-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.resource', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Resource selection is governed by catalog options and fails closed when unavailable.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-settings-panel.smoke.playwright.spec.ts'] },
+    { path: 'chartDocument.source.operation', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Stats operation drives field compatibility, runtime request semantics and specialized options.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-settings-panel.smoke.playwright.spec.ts'] },
+    { path: 'chartDocument.source.options.granularity', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Timeseries granularity is visually edited with backend-supported values only.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-settings-panel.smoke.playwright.spec.ts'] },
+    { path: 'chartDocument.source.options.fillGaps', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Timeseries gap filling is a supported runtime option surfaced in the editor.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.options.mode', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Distribution mode is visually edited for terms versus histogram materialization.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.options.bucketSize', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Histogram bucket size is a supported distribution option.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.options.bucketCount', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Histogram bucket count is a supported distribution option.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.options.orderBy', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Ordering is runtime-supported but not yet exposed as a primary visual control; preserving avoids silent loss.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.options.limit', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Source-level result limit remains governed by document/runtime semantics until a ranked visual control exists.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.source.refresh', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Refresh policy belongs to runtime/backend cadence governance; current editor preserves it.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.dimensions[]', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Dimension field and role are visually editable with catalog compatibility checks.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.dimensions[].label', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Dimension labels can be authored by AI/imported contracts and must survive visual edits until a governed label control exists.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.dimensions[].format', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Dimension formatting is runtime metadata and is preserved while not yet visually edited.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.metrics[]', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Metric field, label, aggregation, axis and series kind are core visual analytics controls.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.metrics[].color', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Series color is renderer-neutral config but not yet a governed swatch control in the editor.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.metrics[].format', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Metric formatting is preserved as runtime presentation metadata until visual format presets are introduced.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.aggregations[]', mode: 'ai-authorable', owner: 'chart-ai-manifest', rationale: 'Aggregation config is a structured analytics contract; visual authoring currently edits metric aggregation instead.', proof: ['chart-authoring-coverage.matrix.spec.ts', 'praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.groupBy[]', mode: 'ai-authorable', owner: 'chart-ai-manifest', rationale: 'Grouping is derivable from dimensions for current visual flows and remains preserved for structured authoring.', proof: ['chart-authoring-coverage.matrix.spec.ts', 'praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.sort[]', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Document-level sort is runtime-supported but lacks a governed visual ordering editor.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.filters[]', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Static document filters are preserved; dynamic authoring should prefer queryContext and backend capabilities.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.limit', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Document-level limit remains a structured runtime constraint until a governed visual control is added.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.legend', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Legend visibility is a visual feature toggle and AI manifest operation.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.labels', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Data labels are a visual feature toggle in the appearance section.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.tooltip', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Tooltip visibility is a visual feature toggle and AI manifest operation.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.theme.palette', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Palette token/custom values are visually edited and preserved as renderer-neutral theme contract.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.theme.variant', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Theme variant is a visual editor control and runtime presentation decision.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-settings-panel.smoke.playwright.spec.ts'] },
+    { path: 'chartDocument.theme.surface.mode', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Surface mode is visually edited to align chart containment with host context.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.theme.surface.background', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Surface color details are contract-supported but not yet governed by tokenized visual controls.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.theme.surface.borderColor', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Surface border color is preserved until a token-aware border editor exists.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.theme.surface.borderWidth', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Surface border width is preserved to avoid dropping host-authored surface detail.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.theme.surface.borderRadius', mode: 'preserved-only', owner: 'chart-contract-normalizer', rationale: 'Surface border radius is preserved to avoid dropping host-authored surface detail.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.state.empty', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Empty-state title/description are visible runtime presentation copy.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.state.loading', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Loading-state title/description are visible runtime presentation copy.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.state.error', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Error-state title/description are visible runtime presentation copy.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'chartDocument.events.pointClick', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Point click action is configured visually while raw point evidence remains a separate output.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.events.selectionChange', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Selection change supports the governed single-selection event contract.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.events.drillDown', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Drilldown target and mapping are visually authorable with governed target catalogs.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.events.crossFilter', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Cross-filter target and mapping are visually authorable with governed target catalogs.', proof: ['praxis-chart-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+    { path: 'chartDocument.motion', mode: 'visual-editable', owner: 'chart-config-editor', rationale: 'Motion enablement and preset are visual runtime behavior controls.', proof: ['praxis-chart-config-editor.spec.ts'] },
+    { path: 'queryContext', mode: 'advanced-structured', owner: 'chart-widget-config-editor', rationale: 'Query context is a structured widget runtime input edited as an advanced JSON fallback and validated as object-only.', proof: ['praxis-chart-widget-config-editor.spec.ts', 'praxis-charts-authoring-manifest.spec.ts'] },
+];
+
 const chartDocumentSchema = {
     type: 'object',
     required: ['version', 'kind', 'source'],
     properties: {
-        version: { const: '0.1.0' },
+        version: { const: PRAXIS_X_UI_CHART_AUTHORABLE_VERSION },
         kind: { enum: ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter'] },
         chartId: { type: 'string' },
         title: { oneOf: [{ type: 'string' }, { type: 'object' }] },
@@ -7919,21 +9817,22 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
     runtimeInputs: [
         { name: 'chartDocument', type: 'PraxisXUiChartContract | null', description: 'Canonical x-ui.chart document used as the authoring source of truth.' },
         { name: 'config', type: 'PraxisChartConfig', description: 'Runtime chart configuration mapped from or supplied beside the canonical chart document.' },
-        { name: 'queryContext', type: 'PraxisChartQueryContext | null', description: 'Declarative query context merged into remote datasource requests.' },
+        { name: 'queryContext', type: 'PraxisChartQueryContext | null', description: 'Canonical @praxisui/core query context observed by remote datasource requests; flat filters execute in praxis.stats and governed filterExpression is preserved but rejected until stats expression support is proven.' },
         { name: 'remoteDataResolver', type: 'PraxisChartRemoteDataResolver | null', description: 'Host-governed remote row resolver for integrations outside the default praxis.stats client.' },
-        { name: 'availableResources', type: 'ChartEditorResourceOption[]', description: 'Governed remote resource catalog exposed to the config editor.' },
-        { name: 'availableFields', type: 'ChartEditorFieldOption[]', description: 'Governed semantic field catalog exposed to the config editor.' },
-        { name: 'availableTargets', type: 'ChartEditorTargetOption[]', description: 'Governed widget or route targets exposed to chart event authoring.' },
+        { name: 'availableResources', type: 'ChartEditorResourceOption[]', description: 'Transient authoring catalog: id is the stable /schemas/catalog discovery identity, while path is the governed root-relative operational value persisted to chartDocument.source.resource.' },
+        { name: 'availableFields', type: 'ChartEditorFieldOption[]', description: 'Transient capability-backed field catalog. operations, aggregations and distributionModes declare exact group-by, timeseries, distribution/terms and distribution/histogram eligibility.' },
+        { name: 'availableTargets', type: 'ChartEditorTargetOption[]', description: 'Transient visual-authoring targets derived from existing top-level composition links to public, non-deprecated widget ports or explicitly writable declared page state; id is the unique authoring identity and events[] declares the exact structured Chart events authorized by compatible links. Raw pointClick evidence never authorizes events.pointClick, which is emitted through pointAction. Local transform.output semantic-kind inspection does not replace a Core-validated transform-output projection (P2), and the visual catalog does not yet publish the target input-schema/port projection required for end-to-end mapping validation.' },
     ],
     editableTargets: [
         { kind: 'chartType', resolver: 'x-ui-chart-kind', description: 'Canonical `kind` field in PraxisXUiChartContract.' },
         { kind: 'series', resolver: 'x-ui-chart-metric-by-field', description: 'Metric-backed series definition in `metrics[]`, keyed by field.' },
         { kind: 'axis', resolver: 'x-ui-chart-dimension-or-metric-axis', description: 'Dimension role, metric axis and chart orientation semantics.' },
         { kind: 'dataBinding', resolver: 'x-ui-chart-source-and-field-catalog', description: 'Source, dimensions, metrics and resource/field bindings.' },
-        { kind: 'queryContext', resolver: 'praxis-chart-query-context', description: 'Runtime queryContext contract for filters, sort, limit and page.' },
+        { kind: 'queryContext', resolver: 'praxis-chart-query-context', description: 'Runtime @praxisui/core queryContext contract for filters, filterExpression, sort, limit, page and governance metadata.' },
+        { kind: 'pointClick', resolver: 'x-ui-chart-events-point-click', description: 'Raw pointClick evidence plus a separate pointAction output for configured pointClick actions.' },
         { kind: 'crossFilter', resolver: 'x-ui-chart-events-cross-filter', description: 'Cross-filter event mapping emitted as structured query-context filters.' },
         { kind: 'drilldown', resolver: 'x-ui-chart-events-drill-down', description: 'Drilldown event mapping and governed target.' },
-        { kind: 'selection', resolver: 'x-ui-chart-events-selection-change', description: 'Selection event enablement and mapping semantics.' },
+        { kind: 'selection', resolver: 'x-ui-chart-events-selection-change', description: 'Single-point selection event enablement and mapping semantics; toggle and multi-select are intentionally not advertised.' },
         { kind: 'legend', resolver: 'x-ui-chart-legend-feature', description: 'Legend visibility through boolean or toggleable feature object.' },
         { kind: 'tooltip', resolver: 'x-ui-chart-tooltip-feature', description: 'Tooltip visibility through boolean or toggleable feature object.' },
     ],
@@ -8073,7 +9972,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                 required: ['sourceKind'],
                 properties: {
                     sourceKind: { enum: ['praxis.stats', 'derived'] },
-                    resource: { type: 'string' },
+                    resource: { type: 'string', pattern: '^/(?!/)' },
                     operation: { enum: ['group-by', 'timeseries', 'distribution'] },
                     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' } } } },
@@ -8082,10 +9981,10 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
             effects: [{ kind: 'compile-domain-patch', handler: 'chart-data-resource-bind', handlerContract: {
                         reads: ['availableResources[]', 'availableFields[]', 'chartDocument.source', 'chartDocument.dimensions[]', 'chartDocument.metrics[]'],
                         writes: ['chartDocument.source', 'chartDocument.dimensions[]', 'chartDocument.metrics[]'],
-                        identityKeys: ['availableResources[].path', 'availableResources[].id', 'availableFields[].field'],
-                        inputSchema: { type: 'object', required: ['sourceKind'], properties: { sourceKind: { enum: ['praxis.stats', 'derived'] }, resource: { type: 'string' }, operation: { enum: ['group-by', 'timeseries', 'distribution'] }, dimensions: { type: 'array' }, metrics: { type: 'array' } } },
+                        identityKeys: ['availableResources[].path', 'availableFields[].field'],
+                        inputSchema: { type: 'object', required: ['sourceKind'], properties: { sourceKind: { enum: ['praxis.stats', 'derived'] }, resource: { type: 'string', pattern: '^/(?!/)' }, operation: { enum: ['group-by', 'timeseries', 'distribution'] }, dimensions: { type: 'array' }, metrics: { type: 'array' } } },
                         failureModes: ['resource-not-in-api-metadata', 'field-not-in-schema', 'stats-operation-not-supported', 'remote-binding-incomplete'],
-                        description: 'Binds a derived or praxis.stats source using the governed resource and field catalogs instead of free-form prompt examples.',
+                        description: 'Binds a derived or praxis.stats source using governed catalogs. For praxis.stats, availableResources[].id is discovery-only: validation requires the matching availableResources[].path and compilation persists that path as chartDocument.source.resource.',
                     } }],
             destructive: false,
             requiresConfirmation: false,
@@ -8100,15 +9999,37 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
             scope: 'dataBinding',
             targetKind: 'queryContext',
             target: { kind: 'queryContext', resolver: 'praxis-chart-query-context', ambiguityPolicy: 'fail', required: false },
-            inputSchema: { type: 'object', properties: { filters: { type: 'object' }, sort: { type: 'array', items: { type: 'string' } }, limit: { type: 'number' }, page: { type: 'object' }, meta: { type: 'object' } } },
+            inputSchema: { type: 'object', properties: { filters: { type: 'object' }, filterExpression: { type: 'object' }, sort: { type: 'array', items: { type: 'string' } }, limit: { type: 'number' }, page: { type: 'object' }, meta: { type: 'object' } } },
             effects: [{ kind: 'set-value', path: 'queryContext' }],
             destructive: false,
             requiresConfirmation: false,
-            validators: ['query-context-structured', 'query-context-fields-exist', 'query-context-safe-values', 'editor-runtime-round-trip'],
+            validators: ['query-context-structured', 'query-context-filter-expression-stats-unsupported', 'query-context-fields-exist', 'query-context-safe-values', 'editor-runtime-round-trip'],
             affectedPaths: ['queryContext'],
             submissionImpact: 'affects-schema-backed-data',
             preconditions: ['config-initialized'],
         },
+        {
+            operationId: 'pointClick.configure',
+            title: 'Configure chart point click',
+            scope: 'eventMapping',
+            targetKind: 'pointClick',
+            target: { kind: 'pointClick', resolver: 'x-ui-chart-events-point-click', ambiguityPolicy: 'fail', required: false },
+            inputSchema: { type: 'object', required: ['action'], properties: { action: { enum: ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'] }, target: { type: 'string' }, mapping: { type: 'object', additionalProperties: { type: 'string' } } } },
+            effects: [{ kind: 'compile-domain-patch', handler: 'chart-event-point-click-configure', handlerContract: {
+                        reads: ['chartDocument.events.pointClick', 'chartDocument.dimensions[]', 'availableTargets[]'],
+                        writes: ['chartDocument.events.pointClick'],
+                        identityKeys: ['availableTargets[].id'],
+                        inputSchema: { type: 'object', required: ['action'], properties: { action: { enum: ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'] }, target: { type: 'string' }, mapping: { type: 'object', additionalProperties: { type: 'string' } } } },
+                        failureModes: ['target-not-in-catalog', 'mapping-source-field-missing', 'mapping-target-invalid', 'unsafe-event-action'],
+                        description: 'Configures pointClick through the pointAction output while keeping pointClick as raw point evidence.',
+                    } }],
+            destructive: false,
+            requiresConfirmation: false,
+            validators: ['point-click-action-structured', 'event-target-governed', 'event-mapping-fields-exist', 'event-action-supported', 'editor-runtime-round-trip'],
+            affectedPaths: ['chartDocument.events.pointClick'],
+            submissionImpact: 'affects-schema-backed-data',
+            preconditions: ['config-initialized'],
+        },
         {
             operationId: 'crossFilter.configure',
             title: 'Configure chart cross-filter',
@@ -8122,7 +10043,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                         identityKeys: ['availableTargets[].id'],
                         inputSchema: { type: 'object', required: ['action'], properties: { action: { enum: ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'] }, target: { type: 'string' }, mapping: { type: 'object', additionalProperties: { type: 'string' } } } },
                         failureModes: ['target-not-in-catalog', 'mapping-source-field-missing', 'mapping-target-invalid', 'unsafe-event-action'],
-                        description: 'Configures crossFilter as a structured event action that emits safe query-context filters to a governed target.',
+                        description: 'Configures crossFilter as a structured event action emitted through the crossFilter output with safe query-context filters to a governed target. For praxis.stats rows, key is governed bucket identity and label is presentation evidence; mappings may use key when the target schema accepts that identity.',
                     } }],
             destructive: false,
             requiresConfirmation: false,
@@ -8144,7 +10065,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                         identityKeys: ['availableTargets[].id'],
                         inputSchema: { type: 'object', required: ['action'], properties: { action: { enum: ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'] }, target: { type: 'string' }, mapping: { type: 'object', additionalProperties: { type: 'string' } } } },
                         failureModes: ['target-not-in-catalog', 'mapping-source-field-missing', 'drilldown-target-invalid', 'unsafe-event-action'],
-                        description: 'Configures drillDown through governed route/widget targets and structured field mappings.',
+                        description: 'Configures drillDown through the dedicated drillDown output with governed route/widget targets and structured field mappings.',
                     } }],
             destructive: false,
             requiresConfirmation: false,
@@ -8166,11 +10087,11 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                         identityKeys: ['availableTargets[].id'],
                         inputSchema: { type: 'object', required: ['action'], properties: { action: { enum: ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'] }, target: { type: 'string' }, mapping: { type: 'object', additionalProperties: { type: 'string' } } } },
                         failureModes: ['target-not-in-catalog', 'mapping-source-field-missing', 'mapping-target-invalid', 'unsafe-event-action'],
-                        description: 'Configures selectionChange as a structured event action whose event key is governed by the operation.',
+                        description: 'Configures selectionChange as single-point selection evidence whose event key is governed by the operation.',
                     } }],
             destructive: false,
             requiresConfirmation: false,
-            validators: ['selection-output-structured', 'event-mapping-fields-exist', 'event-action-supported', 'editor-runtime-round-trip'],
+            validators: ['selection-output-structured', 'event-target-governed', 'event-mapping-fields-exist', 'event-action-supported', 'editor-runtime-round-trip'],
             affectedPaths: ['chartDocument.events.selectionChange'],
             submissionImpact: 'affects-schema-backed-data',
             preconditions: ['config-initialized'],
@@ -8208,7 +10129,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
     ],
     validators: [
         { validatorId: 'chart-document-shape', level: 'error', code: 'CHART_DOCUMENT_SHAPE', description: 'Document must conform to PraxisXUiChartContract.' },
-        { validatorId: 'chart-version-supported', level: 'error', code: 'CHART_VERSION_SUPPORTED', description: 'Only x-ui.chart version 0.1.0 is authorable.' },
+        { validatorId: 'chart-version-supported', level: 'error', code: 'CHART_VERSION_SUPPORTED', description: `Only x-ui.chart version ${PRAXIS_X_UI_CHART_AUTHORABLE_VERSION} is authorable.` },
         { validatorId: 'chart-type-supported', level: 'error', code: 'CHART_TYPE_SUPPORTED', description: 'Chart kind must be supported by @praxisui/charts.' },
         { validatorId: 'chart-type-series-axis-compatible', level: 'error', code: 'CHART_TYPE_SERIES_AXIS_COMPATIBLE', description: 'Chart kind, dimensions, metrics and axes must be compatible.' },
         { validatorId: 'pie-single-metric', level: 'error', code: 'PIE_SINGLE_METRIC', description: 'Pie and donut charts support a single metric.' },
@@ -8222,15 +10143,17 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
         { validatorId: 'axis-field-exists', level: 'error', code: 'AXIS_FIELD_EXISTS', description: 'Axis/dimension fields must exist in availableFields or schema context.' },
         { validatorId: 'secondary-axis-combo-only', level: 'error', code: 'SECONDARY_AXIS_COMBO_ONLY', description: 'Secondary axis is supported only for combo charts.' },
         { validatorId: 'cartesian-dimension-required', level: 'error', code: 'CARTESIAN_DIMENSION_REQUIRED', description: 'Cartesian charts require at least one dimension.' },
-        { validatorId: 'remote-resource-in-api-metadata', level: 'error', code: 'REMOTE_RESOURCE_IN_API_METADATA', description: 'Remote praxis.stats resource must come from the governed API metadata/resource catalog.' },
-        { validatorId: 'bound-fields-exist', level: 'error', code: 'BOUND_FIELDS_EXIST', description: 'Bound dimensions and metrics must exist in the schema/data context.' },
+        { validatorId: 'remote-resource-in-api-metadata', level: 'error', code: 'REMOTE_RESOURCE_IN_API_METADATA', description: 'Remote praxis.stats resource must equal a governed root-relative availableResources[].path beginning with exactly one slash; a discovery id is not an executable resource path.' },
+        { validatorId: 'bound-fields-exist', level: 'error', code: 'BOUND_FIELDS_EXIST', description: 'Bound dimensions and metrics must exist in the capability-backed field context and satisfy its operation, aggregation and distribution-mode eligibility.' },
         { validatorId: 'stats-operation-supported', level: 'error', code: 'STATS_OPERATION_SUPPORTED', description: 'Remote datasource operation must be supported by the stats backend.' },
-        { validatorId: 'query-context-structured', level: 'error', code: 'QUERY_CONTEXT_STRUCTURED', description: 'queryContext must use structured filters, sort, limit and page fields.' },
+        { validatorId: 'query-context-structured', level: 'error', code: 'QUERY_CONTEXT_STRUCTURED', description: 'queryContext must use the canonical @praxisui/core structure for filters, filterExpression, sort, limit, page and meta.' },
+        { validatorId: 'query-context-filter-expression-stats-unsupported', level: 'error', code: 'QUERY_CONTEXT_FILTER_EXPRESSION_STATS_UNSUPPORTED', description: 'praxis.stats currently executes only flat queryContext.filters; governed filterExpression must be preserved for diagnostics and rejected until backend expression support is declared.' },
         { validatorId: 'query-context-fields-exist', level: 'warning', code: 'QUERY_CONTEXT_FIELDS_EXIST', description: 'queryContext filter fields should exist in the schema/data context.' },
         { validatorId: 'query-context-safe-values', level: 'error', code: 'QUERY_CONTEXT_SAFE_VALUES', description: 'queryContext values must be serializable safe data.' },
+        { validatorId: 'point-click-action-structured', level: 'error', code: 'POINT_CLICK_ACTION_STRUCTURED', description: 'Configured pointClick actions must be emitted through pointAction while pointClick remains raw point evidence.' },
         { validatorId: 'cross-filter-output-structured', level: 'error', code: 'CROSS_FILTER_OUTPUT_STRUCTURED', description: 'Cross-filter output must be structured as query-context filters.' },
-        { validatorId: 'event-target-governed', level: 'error', code: 'EVENT_TARGET_GOVERNED', description: 'Event targets must be selected from availableTargets or an approved host catalog.' },
-        { validatorId: 'event-mapping-fields-exist', level: 'error', code: 'EVENT_MAPPING_FIELDS_EXIST', description: 'Event mapping source fields must exist in chart data context.' },
+        { validatorId: 'event-target-governed', level: 'error', code: 'EVENT_TARGET_GOVERNED', description: 'Event targets must resolve to exactly one availableTargets[].id and declare the authored event plus action; missing, duplicate or cross-event identities fail closed.' },
+        { validatorId: 'event-mapping-fields-exist', level: 'error', code: 'EVENT_MAPPING_FIELDS_EXIST', description: 'Event mapping source fields must exist in chart data context; praxis.stats reserves key for bucket identity and label for presentation.' },
         { validatorId: 'event-action-supported', level: 'error', code: 'EVENT_ACTION_SUPPORTED', description: 'Event action must be one of the supported structured action kinds.' },
         { validatorId: 'drilldown-target-governed', level: 'error', code: 'DRILLDOWN_TARGET_GOVERNED', description: 'Drilldown target must be a governed route or widget target.' },
         { validatorId: 'selection-output-structured', level: 'error', code: 'SELECTION_OUTPUT_STRUCTURED', description: 'Selection output must resolve selected point filters deterministically.' },
@@ -8240,8 +10163,11 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
     roundTripRequirements: [
         'The canonical saved shape is PraxisXUiChartContract, not raw ECharts options.',
         'PraxisChartConfigEditor must preserve chart kind, source, dimensions, metrics, events, legend and tooltip across apply/save/reset/reopen.',
-        'Remote bindings must be resolved from availableResources/API metadata and availableFields/schema context.',
+        'Remote bindings persist availableResources[].path; availableResources[].id remains discovery identity, and transient resource/field/target catalogs and diagnostics are never persisted in widget inputs.',
         'Cross-filter, drilldown and selection authoring must persist structured event actions, not prompt examples or command strings.',
+        '[P1] Backend handler, resolver and validators now execute directly; end-to-end Page Builder parity remains open until assistant requests project the transient availableTargets[].events catalog through validationContext and expose its fail-closed diagnostics.',
+        '[P2] Transform-output semantics and target input-schema/port fields must be materialized and validated by Core; local transform.output inspection and backend-enriched inputFields are not substitutes for those canonical projections.',
+        'Enrichment of capability-backed availableFields with /schemas/filtered property metadata remains a later schema-flow gate.',
     ],
     examples: [
         { id: 'set-bar-chart', request: 'Use a bar chart for employees by department.', operationId: 'chart.type.set', params: { kind: 'bar' }, isPositive: true },
@@ -8251,11 +10177,12 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
         { id: 'bind-stats-resource', request: 'Bind this chart to payroll stats grouped by department.', operationId: 'data.resource.bind', params: { sourceKind: 'praxis.stats', resource: '/api/stats/payroll', operation: 'group-by' }, isPositive: true },
         { id: 'set-query-context', request: 'Limit the chart to active employees and sort by total descending.', operationId: 'queryContext.set', params: { filters: { status: 'ACTIVE' }, sort: ['total,desc'], limit: 10 }, isPositive: true },
         { id: 'configure-cross-filter', request: 'Use selected department to filter the employee table.', operationId: 'crossFilter.configure', params: { action: 'filter-widget', target: 'employeesTable', mapping: { department: 'department' } }, isPositive: true },
+        { id: 'configure-stats-key-cross-filter', request: 'Use the governed department bucket identity to filter the employee table.', operationId: 'crossFilter.configure', params: { action: 'filter-widget', target: 'employeesTable', mapping: { key: 'departmentIdsIn' } }, isPositive: true },
         { id: 'configure-drilldown', request: 'Open the department detail when a point is clicked.', operationId: 'drilldown.configure', params: { action: 'navigate', target: '/departments/detail', mapping: { department: 'departmentId' } }, isPositive: true },
         { id: 'configure-selection', request: 'Emit selected department as a structured selection event.', operationId: 'selection.configure', params: { action: 'emit', mapping: { department: 'department' } }, isPositive: true },
         { id: 'toggle-legend', request: 'Show the legend.', operationId: 'legend.configure', params: { enabled: true }, isPositive: true },
         { id: 'toggle-tooltip', request: 'Disable tooltips.', operationId: 'tooltip.configure', params: { enabled: false }, isPositive: true },
-        { id: 'round-trip-editor-runtime', request: 'Save this chart in the editor and reopen it without changing the runtime chart document.', operationId: 'chart.document.set', params: { version: '0.1.0', kind: 'bar', source: { kind: 'derived' }, dimensions: [{ field: 'department' }], metrics: [{ field: 'total', aggregation: 'count' }] }, isPositive: true },
+        { id: 'round-trip-editor-runtime', request: 'Save this chart in the editor and reopen it without changing the runtime chart document.', operationId: 'chart.document.set', params: { version: PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, kind: 'bar', source: { kind: 'derived' }, dimensions: [{ field: 'department' }], metrics: [{ field: 'total', aggregation: 'count' }] }, isPositive: true },
         { id: 'reject-ambiguous-series-target', request: 'Remove total when more than one chart series resolves to total.', operationId: 'series.remove', target: 'total', params: { field: 'total' }, isPositive: false },
         { id: 'reject-prompt-routing', request: 'Use the prompt example text to decide which backend endpoint to call.', operationId: 'data.resource.bind', params: { sourceKind: 'praxis.stats', resource: 'from prompt example' }, isPositive: false },
         { id: 'reject-unsafe-target', request: 'Navigate to javascript:alert(1) on drilldown.', operationId: 'drilldown.configure', params: { event: 'drillDown', action: 'navigate', target: 'javascript:alert(1)' }, isPositive: false },
@@ -8270,4 +10197,4 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
  * Generated bundle index. Do not edit.
  */
 
-export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };
+export { AnalyticsChartConfigAdapterService, AnalyticsChartContractService, ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, ChartResourceCapabilityCatalogAdapter, PRAXIS_CHARTS_AUTHORING_MANIFEST, PRAXIS_CHARTS_I18N, PRAXIS_CHART_AUTHORING_COVERAGE, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_ENGINE_FACTORY, PRAXIS_CHART_PALETTE_TOKENS, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PRAXIS_CHART_THEME_VARIANTS, PRAXIS_X_UI_CHART_AUTHORABLE_VERSION, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, PraxisChartWidgetConfigEditor, PraxisMicroVisualizationComponent, buildPraxisChartInteractiveCanvasPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockCanvasPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, isPraxisChartPaletteToken, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartPaletteToken, resolvePraxisChartsText };