@praxisui/charts 9.0.29 → 9.0.31

package/fesm2022/praxisui-charts.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Optional, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, Injector, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, normalizePraxisPresentationVisualization, AnalyticsStatsRequestBuilderService, AnalyticsPresentationResolver, providePraxisI18n, ComponentMetadataRegistry, ResourceDiscoveryService, SETTINGS_PANEL_DATA, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, DynamicWidgetPageComponent } from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, ComponentMetadataRegistry, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, normalizePraxisPresentationVisualization, AnalyticsStatsRequestBuilderService, AnalyticsPresentationResolver, providePraxisI18n, ResourceDiscoveryService, SETTINGS_PANEL_DATA, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { throwError, map, of, isObservable, from, firstValueFrom, timeout, BehaviorSubject, Subscription } from 'rxjs';
 import * as i1$2 from '@angular/material/tooltip';
@@ -756,10 +756,13 @@ class ChartContractValidationService {
             issues.push(this.error('horizontal-bar-orientation', 'orientation', 'x-ui.chart kind="horizontal-bar" requires orientation="horizontal" when orientation is provided.'));
         }
         if (document.kind === 'scatter' && !document.dimensions?.[0]?.field) {
-            issues.push(this.error('scatter-missing-dimension', 'dimensions[0].field', 'x-ui.chart scatter charts require dimensions[0].field for the x axis.'));
+            issues.push(this.error('scatter-missing-dimension', 'dimensions[0].field', 'x-ui.chart scatter charts require dimensions[0].field as the x axis or grouped bucket identity.'));
         }
         if (document.kind === 'scatter' && !document.metrics?.[0]?.field) {
-            issues.push(this.error('scatter-missing-metric', 'metrics[0].field', 'x-ui.chart scatter charts require metrics[0].field for the y axis.'));
+            issues.push(this.error('scatter-missing-metric', 'metrics[0].field', 'x-ui.chart scatter charts require one or two metric fields.'));
+        }
+        if (document.kind === 'scatter' && (document.metrics?.length ?? 0) > 2) {
+            issues.push(this.error('scatter-metric-cardinality', 'metrics', 'x-ui.chart scatter charts support at most two metrics.'));
         }
         if (document.kind === 'combo'
             && document.source.kind === 'praxis.stats'
@@ -938,6 +941,7 @@ class PraxisChartCanonicalContractMapperService {
     buildAxes(contract) {
         const firstDimension = contract.dimensions?.[0];
         const firstMetric = contract.metrics?.[0];
+        const secondMetric = contract.metrics?.[1];
         const secondaryMetric = contract.metrics?.find((metric) => metric.axis === 'secondary');
         const metricCount = (contract.metrics?.length ?? 0)
             * (contract.source.kind === 'praxis.stats' && contract.source.operation === 'comparison' ? 2 : 1);
@@ -950,15 +954,16 @@ class PraxisChartCanonicalContractMapperService {
             };
         }
         if (contract.kind === 'scatter') {
+            const groupedMeasures = !!secondMetric;
             return {
                 x: {
-                    field: firstDimension?.field,
-                    label: this.toLabel(firstDimension?.label),
-                    type: firstDimension?.role === 'time' ? 'time' : 'value',
+                    field: groupedMeasures ? firstMetric?.field : firstDimension?.field,
+                    label: this.toLabel(groupedMeasures ? firstMetric?.label : firstDimension?.label),
+                    type: groupedMeasures ? 'value' : firstDimension?.role === 'time' ? 'time' : 'value',
                 },
                 y: {
-                    field: firstMetric?.field,
-                    label: this.toLabel(firstMetric?.label),
+                    field: groupedMeasures ? secondMetric.field : firstMetric?.field,
+                    label: this.toLabel(groupedMeasures ? secondMetric.label : firstMetric?.label),
                     type: 'value',
                 },
             };
@@ -989,7 +994,10 @@ class PraxisChartCanonicalContractMapperService {
         const firstDimension = contract.dimensions?.[0];
         const labelsVisible = this.resolveToggle(contract.labels);
         const comparison = contract.source.kind === 'praxis.stats' && contract.source.operation === 'comparison';
-        return (contract.metrics ?? []).flatMap((metric, index) => {
+        const metrics = contract.kind === 'scatter' && (contract.metrics?.length ?? 0) === 2
+            ? contract.metrics.slice(1, 2)
+            : (contract.metrics ?? []);
+        return metrics.flatMap((metric, index) => {
             const baseName = this.toLabel(metric.label) ?? metric.field;
             const periods = comparison ? ['current', 'previous'] : [null];
             return periods.map((period) => ({
@@ -1697,6 +1705,7 @@ class PraxisChartComponent {
     statsApi = inject(PraxisChartStatsApiService);
     i18n = inject(PraxisI18nService);
     ngZone = inject(NgZone);
+    componentMetadataRegistry = inject(ComponentMetadataRegistry);
     settingsPanel = inject(SETTINGS_PANEL_BRIDGE, { optional: true });
     destroyRef = inject(DestroyRef);
     resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "resizeObserver" }] : /* istanbul ignore next */ []));
@@ -2039,6 +2048,7 @@ class PraxisChartComponent {
         if (!document) {
             return;
         }
+        const resolvedContext = await this.resolveConfigEditorContext(document);
         const { PraxisChartConfigEditor } = await Promise.resolve().then(function () { return praxisChartConfigEditor; });
         this.clearEditorSessionSubscriptions();
         const ref = this.settingsPanel.open({
@@ -2051,9 +2061,9 @@ class PraxisChartComponent {
                     document,
                     mode: 'edit',
                     readonly: false,
-                    availableResources: this.availableResources(),
-                    availableFields: this.availableFields(),
-                    availableTargets: this.availableTargets(),
+                    availableResources: this.resolveEditorOptions(this.availableResources(), resolvedContext['availableResources']),
+                    availableFields: this.resolveEditorOptions(this.availableFields(), resolvedContext['availableFields']),
+                    availableTargets: this.resolveEditorOptions(this.availableTargets(), resolvedContext['availableTargets']),
                 },
             },
         });
@@ -2077,6 +2087,46 @@ class PraxisChartComponent {
         });
         this.editorSessionSubscriptions = [appliedSubscription, savedSubscription];
     }
+    async resolveConfigEditorContext(document) {
+        const metadata = this.componentMetadataRegistry.get('praxis-chart');
+        const resolver = metadata?.configEditor?.contextResolver;
+        if (!metadata || !resolver) {
+            return {};
+        }
+        try {
+            const resolved = await resolver({
+                componentId: metadata.id,
+                widgetKey: document.chartId || this.effectiveConfig().id || 'praxis-chart',
+                widgetType: metadata.id,
+                persistedInputs: {
+                    chartDocument: structuredClone(document),
+                },
+                metadata,
+            });
+            const candidate = this.isConfigEditorContextResult(resolved)
+                ? resolved['context']
+                : resolved;
+            return this.asRecord(candidate) ?? {};
+        }
+        catch {
+            return {};
+        }
+    }
+    resolveEditorOptions(explicitOptions, resolvedOptions) {
+        if (explicitOptions.length) {
+            return explicitOptions;
+        }
+        return Array.isArray(resolvedOptions) ? resolvedOptions : [];
+    }
+    isConfigEditorContextResult(value) {
+        const record = this.asRecord(value);
+        return !!record && ('context' in record || 'diagnostics' in record);
+    }
+    asRecord(value) {
+        return value && typeof value === 'object' && !Array.isArray(value)
+            ? value
+            : null;
+    }
     handlePointClick(event) {
         this.pointClick.emit(event);
         const config = this.renderConfig();
@@ -5144,7 +5194,7 @@ const PRAXIS_CHARTS_EN_US = {
     'praxis.charts.editor.paletteToken.executive': 'Executive',
     'praxis.charts.editor.specialization.pieDonutHint': 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.',
     'praxis.charts.editor.specialization.scatterTitle': 'Scatter guidance',
-    'praxis.charts.editor.specialization.scatterHint': 'Scatter charts use the first dimension as X and the first metric as Y.',
+    'praxis.charts.editor.specialization.scatterHint': 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.',
     'praxis.charts.editor.events.pointClickTitle': 'Point click',
     'praxis.charts.editor.events.selectionChangeTitle': 'Selection change',
     'praxis.charts.editor.events.drillDownTitle': 'Drill down',
@@ -5368,7 +5418,7 @@ const PRAXIS_CHARTS_PT_BR = {
     'praxis.charts.editor.paletteToken.executive': 'Executiva',
     'praxis.charts.editor.specialization.pieDonutHint': 'Gráficos de pizza, rosca, funil e pirâmide mantêm uma métrica e usam a primeira dimensão como segmento categórico.',
     'praxis.charts.editor.specialization.scatterTitle': 'Guia de dispersão (scatter)',
-    'praxis.charts.editor.specialization.scatterHint': 'Gráficos de dispersão usam a primeira dimensão como eixo X e a primeira métrica como eixo Y.',
+    'praxis.charts.editor.specialization.scatterHint': 'Com uma métrica, o scatter usa a primeira dimensão em X e a métrica em Y. Com duas métricas, a dimensão identifica o bucket agrupado e as métricas ocupam X e Y.',
     'praxis.charts.editor.events.pointClickTitle': 'Clique no ponto',
     'praxis.charts.editor.events.selectionChangeTitle': 'Mudança de seleção',
     'praxis.charts.editor.events.drillDownTitle': 'Drill down',
@@ -5551,13 +5601,21 @@ class ChartEditorPreviewMapperService {
             return [];
         }
         if (document.kind === 'scatter') {
-            return metrics[0]?.field
-                ? [
-                    { [dimensionField]: 10, [metrics[0].field]: 22 },
-                    { [dimensionField]: 18, [metrics[0].field]: 31 },
-                    { [dimensionField]: 27, [metrics[0].field]: 45 },
-                ]
-                : [];
+            if (!metrics[0]?.field) {
+                return [];
+            }
+            if (metrics[1]?.field) {
+                return [
+                    { [dimensionField]: 'Alpha', [metrics[0].field]: 10, [metrics[1].field]: 22 },
+                    { [dimensionField]: 'Beta', [metrics[0].field]: 18, [metrics[1].field]: 31 },
+                    { [dimensionField]: 'Gamma', [metrics[0].field]: 27, [metrics[1].field]: 45 },
+                ];
+            }
+            return [
+                { [dimensionField]: 10, [metrics[0].field]: 22 },
+                { [dimensionField]: 18, [metrics[0].field]: 31 },
+                { [dimensionField]: 27, [metrics[0].field]: 45 },
+            ];
         }
         const categories = document.source.kind === 'praxis.stats' && document.source.operation === 'timeseries'
             ? ['2026-01', '2026-02', '2026-03']
@@ -6941,6 +6999,9 @@ class PraxisChartConfigEditor {
         }));
     }
     addMetric() {
+        if (!this.canAddMetric()) {
+            return;
+        }
         this.patchDocument((document) => ({
             ...document,
             metrics: [
@@ -7310,6 +7371,9 @@ class PraxisChartConfigEditor {
     metrics() {
         return this.doc().metrics ?? [];
     }
+    canAddMetric() {
+        return this.doc().kind !== 'scatter' || this.metrics().length < 2;
+    }
     fieldOptions(role) {
         const fields = this.availableFields();
         if (!fields.length) {
@@ -7673,7 +7737,7 @@ class PraxisChartConfigEditor {
         this.documentChange.emit(structuredClone(this.normalizedDocument()));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <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() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "queryContext", "remoteDataResolver", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "pointAction", "selectionChange", "drillDown", "crossFilter", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
             type: Component,
@@ -7686,7 +7750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         MatSelectModule,
                         MatSlideToggleModule,
                         PraxisChartComponent
-                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
+                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel and pyramid charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <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() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <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({
@@ -10515,6 +10579,16 @@ const chartComparisonPeriodSchema = {
 const chartDocumentSchema = {
     type: 'object',
     required: ['version', 'kind', 'source'],
+    allOf: [{
+            if: { properties: { kind: { const: 'scatter' } }, required: ['kind'] },
+            then: {
+                required: ['dimensions', 'metrics'],
+                properties: {
+                    dimensions: { type: 'array', minItems: 1 },
+                    metrics: { type: 'array', minItems: 1, maxItems: 2 },
+                },
+            },
+        }],
     properties: {
         version: { const: PRAXIS_X_UI_CHART_AUTHORABLE_VERSION },
         kind: { enum: ['bar', 'combo', 'horizontal-bar', 'line', 'pie', 'donut', 'area', 'stacked-bar', 'stacked-area', 'scatter', 'funnel', 'pyramid'] },
@@ -10546,7 +10620,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
     componentId: 'praxis-chart',
     ownerPackage: '@praxisui/charts',
     configSchemaId: 'PraxisXUiChartContract',
-    manifestVersion: '1.2.0',
+    manifestVersion: '1.3.0',
     runtimeInputs: [
         { name: 'chartDocument', type: 'PraxisXUiChartContract | null', description: 'Canonical x-ui.chart document used as the authoring source of truth.' },
         { name: 'config', type: 'PraxisChartConfig', description: 'Runtime chart configuration mapped from or supplied beside the canonical chart document.' },
@@ -10639,7 +10713,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                             },
                         },
                         failureModes: ['field-not-in-catalog', 'duplicate-series-field', 'aggregation-not-supported', 'chart-type-series-incompatible'],
-                        description: 'Adds a metric-backed series by semantic field, validating it against availableFields and chart kind compatibility before patching metrics[].',
+                        description: 'Adds a metric-backed series by semantic field, validating it against availableFields and chart kind compatibility before patching metrics[]. Scatter accepts at most two ordered metrics, mapped to X and Y in the dual-measure mode.',
                     } }],
             destructive: false,
             requiresConfirmation: false,
@@ -10722,7 +10796,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
                     } }],
             destructive: false,
             requiresConfirmation: false,
-            validators: ['remote-resource-in-api-metadata', 'bound-fields-exist', 'stats-operation-supported', 'comparison-period-complete', 'comparison-metrics-supported', 'editor-runtime-round-trip'],
+            validators: ['remote-resource-in-api-metadata', 'bound-fields-exist', 'stats-operation-supported', 'chart-type-series-axis-compatible', 'comparison-period-complete', 'comparison-metrics-supported', 'editor-runtime-round-trip'],
             affectedPaths: ['chartDocument.source', 'chartDocument.source.options.comparisonPeriod', 'chartDocument.dimensions[]', 'chartDocument.metrics[]'],
             submissionImpact: 'affects-remote-binding',
             preconditions: ['config-initialized'],
@@ -10901,6 +10975,7 @@ const PRAXIS_CHARTS_AUTHORING_MANIFEST = {
         'PraxisChartConfigEditor must preserve chart kind, source, dimensions, metrics, events, legend and tooltip across apply/save/reset/reopen.',
         'Remote bindings persist availableResources[].path; availableResources[].id remains discovery identity, and transient resource/field/target catalogs and diagnostics are never persisted in widget inputs.',
         'Comparison must preserve one canonical /stats/comparison request with metrics[] and a complete comparisonPeriod; it must not downgrade into independent group-by calls.',
+        'Scatter with one metric preserves dimension-X/metric-Y semantics; scatter with two metrics preserves the dimension as grouped bucket identity and ordered metrics as X/Y.',
         '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.',