@praxisui/charts 3.0.0-beta.3 → 3.0.0-beta.5

package/fesm2022/praxisui-charts.mjs

@@ -1,18 +1,36 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, Inject, InjectionToken, input, output, viewChild, inject, DestroyRef, signal, computed, effect, ChangeDetectionStrategy, Component, ENVIRONMENT_INITIALIZER } from '@angular/core';
-import * as i1$1 from '@praxisui/core';
-import { buildApiUrl, API_URL, PraxisI18nService, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, DynamicGridPageComponent } from '@praxisui/core';
+import { Injectable, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import * as i1$2 from '@praxisui/core';
+import { buildApiUrl, API_URL, PraxisI18nService, SETTINGS_PANEL_BRIDGE, ComponentMetadataRegistry, createDefaultTableConfig, DynamicWidgetPageComponent, DynamicGridPageComponent, providePraxisI18n, SETTINGS_PANEL_DATA } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { use, init } from 'echarts/core';
 import { BarChart, LineChart, PieChart, ScatterChart } from 'echarts/charts';
 import { AriaComponent, DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent, TransformComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import * as i1 from '@angular/common/http';
 import { HttpErrorResponse } from '@angular/common/http';
-import { throwError, map } from 'rxjs';
+import { throwError, map, BehaviorSubject } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { PraxisTable } from '@praxisui/table';
+import * as i1$3 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3$1 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i7 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 class PraxisChartDataTransformerService {
     transform(config, rows) {
@@ -484,1516 +502,1974 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: PraxisChartOptionBuilderService }] });
 
-class PraxisChartStatsApiService {
-    http;
-    apiUrl;
-    constructor(http, apiUrl) {
-        this.http = http;
-        this.apiUrl = apiUrl;
+class ChartContractNormalizerService {
+    normalize(input) {
+        let document = structuredClone(input);
+        document = this.normalizeMotion(document);
+        document = this.normalizeKindSpecificFields(document);
+        document = this.normalizeOperationSpecificFields(document);
+        document = this.normalizeSourceSpecificFields(document);
+        return document;
     }
-    execute(event, config) {
-        const query = event.query;
-        const statsRequest = query?.statsRequest;
-        if (!query?.statsPath || !statsRequest) {
-            return throwError(() => new Error('PraxisChartStatsApiService requires query.statsPath and query.statsRequest for praxis.stats execution.'));
+    normalizeMotion(document) {
+        if (!document.motion) {
+            return document;
         }
-        const categoryField = this.resolveCategoryField(config, statsRequest);
-        const url = this.buildStatsUrl(query.statsPath);
-        return this.http
-            .post(url, statsRequest)
-            .pipe(map((response) => this.toChartRows(response?.data, statsRequest, categoryField, config)), catchError((error) => this.handleHttpError(error)));
+        if (document.motion.enabled === false) {
+            return {
+                ...document,
+                motion: {
+                    enabled: false,
+                },
+            };
+        }
+        return {
+            ...document,
+            motion: {
+                enabled: document.motion.enabled ?? true,
+                preset: document.motion.preset ?? 'standard',
+            },
+        };
     }
-    toChartRows(response, request, categoryField, config) {
-        if (!response) {
-            return [];
+    normalizeKindSpecificFields(document) {
+        let nextDocument = document;
+        if (document.kind === 'horizontal-bar') {
+            nextDocument = {
+                ...nextDocument,
+                orientation: 'horizontal',
+            };
         }
-        const metricBindings = this.resolveMetricBindings(config, request, response);
-        if ('points' in response) {
-            return response.points.map((point) => {
-                const category = point.label ?? point.start ?? point.end ?? '';
-                return {
-                    [categoryField]: category,
-                    ...this.projectMetricValues(metricBindings, point.values, point.value, point.count),
-                    key: point.start ?? point.label ?? point.end ?? category,
-                    label: point.label ?? category,
-                    value: point.value ?? null,
-                    count: point.count ?? null,
-                    start: point.start ?? null,
-                    end: point.end ?? null,
-                    granularity: response.granularity ?? null,
-                };
-            });
+        if (document.kind !== 'combo' && document.metrics?.length) {
+            nextDocument = {
+                ...nextDocument,
+                metrics: document.metrics.map((metric) => ({
+                    ...metric,
+                    axis: undefined,
+                    seriesKind: undefined,
+                })),
+            };
         }
-        if ('buckets' in response) {
-            return response.buckets.map((bucket) => {
-                const category = this.resolveBucketCategory(bucket);
-                return {
-                    [categoryField]: category,
-                    ...this.projectMetricValues(metricBindings, bucket.values, bucket.value, bucket.count),
-                    key: bucket.key ?? null,
-                    label: bucket.label ?? category,
-                    value: bucket.value ?? null,
-                    count: bucket.count ?? null,
-                    from: bucket.from ?? null,
-                    to: bucket.to ?? null,
-                    mode: 'mode' in response ? response.mode ?? null : null,
-                    requestMode: 'mode' in request ? request.mode : null,
-                };
-            });
+        if ((document.kind === 'pie' || document.kind === 'donut' || this.isDistribution(document)) && document.metrics?.length) {
+            nextDocument = {
+                ...nextDocument,
+                metrics: document.metrics.slice(0, 1),
+            };
         }
-        return [];
+        return nextDocument;
     }
-    resolveBucketCategory(bucket) {
-        if (bucket.label !== null && bucket.label !== undefined && bucket.label !== '') {
-            return String(bucket.label);
+    normalizeOperationSpecificFields(document) {
+        if (document.source.kind !== 'praxis.stats') {
+            return document;
         }
-        if (bucket.key !== null && bucket.key !== undefined && bucket.key !== '') {
-            return String(bucket.key);
+        const options = { ...document.source.options };
+        if (document.source.operation !== 'timeseries') {
+            options.granularity = undefined;
+            options.fillGaps = undefined;
         }
-        if (bucket.from !== null || bucket.to !== null) {
-            return `${bucket.from ?? ''} - ${bucket.to ?? ''}`.trim();
+        if (document.source.operation !== 'distribution') {
+            options.mode = undefined;
+            options.bucketSize = undefined;
+            options.bucketCount = undefined;
         }
-        return '';
+        return {
+            ...document,
+            source: {
+                ...document.source,
+                options,
+            },
+        };
     }
-    resolveMetricValue(value, count) {
-        if (typeof value === 'number' && Number.isFinite(value)) {
-            return value;
-        }
-        if (typeof count === 'number' && Number.isFinite(count)) {
-            return count;
+    normalizeSourceSpecificFields(document) {
+        if (document.source.kind === 'derived') {
+            return {
+                ...document,
+                source: {
+                    kind: 'derived',
+                },
+            };
         }
-        return 0;
+        return document;
     }
-    resolveCategoryField(config, request) {
-        const firstSeries = config.series[0];
-        return (firstSeries?.categoryField
-            || config.axes?.x?.field
-            || request.field
-            || 'category');
+    isDistribution(document) {
+        return document.source.kind === 'praxis.stats' && document.source.operation === 'distribution';
     }
-    resolveMetricBindings(config, request, response) {
-        const queryMetrics = config.dataSource?.kind === 'remote'
-            ? (config.dataSource.query?.metrics ?? [])
-            : [];
-        if (queryMetrics.length) {
-            return queryMetrics.map((metric, index) => ({
-                field: metric.field || `value${index + 1}`,
-                alias: metric.alias || metric.field || `value${index + 1}`,
-            }));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractNormalizerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractNormalizerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractNormalizerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class ChartContractValidationService {
+    validate(document) {
+        const issues = [];
+        this.validateSource(document, issues);
+        this.validateTheme(document, issues);
+        this.validateMetrics(document, issues);
+        this.validateKinds(document, issues);
+        this.validateEvents(document, issues);
+        return {
+            valid: !issues.some((issue) => issue.severity === 'error'),
+            issues,
+        };
+    }
+    validateSource(document, issues) {
+        if (document.source.kind !== 'praxis.stats' && document.source.kind !== 'derived') {
+            issues.push(this.error('unsupported-source-kind', 'source.kind', `x-ui.chart source.kind="${document.source.kind}" is not supported in @praxisui/charts.`));
         }
-        const responseMetrics = 'metrics' in response ? response.metrics : undefined;
-        if (responseMetrics?.length) {
-            return responseMetrics.map((metric, index) => ({
-                field: metric.alias || metric.field || `value${index + 1}`,
-                alias: metric.alias || metric.field || `value${index + 1}`,
-            }));
+        if (document.source.kind === 'praxis.stats' && !document.source.resource?.trim()) {
+            issues.push(this.error('missing-resource', 'source.resource', 'x-ui.chart source.resource is required for source.kind="praxis.stats".'));
         }
-        const requestMetrics = 'metrics' in request ? request.metrics : undefined;
-        if (requestMetrics?.length) {
-            return requestMetrics.map((metric, index) => ({
-                field: metric.alias || metric.field || `value${index + 1}`,
-                alias: metric.alias || metric.field || `value${index + 1}`,
-            }));
+        if (document.source.kind === 'praxis.stats' && !document.source.operation) {
+            issues.push(this.error('missing-operation', 'source.operation', 'x-ui.chart source.operation is required for source.kind="praxis.stats".'));
         }
-        const metric = ('metric' in response && response.metric) || ('metric' in request ? request.metric : undefined);
-        return [
-            {
-                field: metric?.alias || metric?.field || config.series[0]?.metric?.field || 'value',
-                alias: metric?.alias || metric?.field || config.series[0]?.metric?.field || 'value',
-            },
-        ];
     }
-    projectMetricValues(bindings, values, primaryValue, count) {
-        return bindings.reduce((acc, binding, index) => {
-            const rawValue = values?.[binding.alias];
-            acc[binding.field] = index === 0
-                ? this.resolveMetricValue(rawValue ?? primaryValue, count)
-                : this.resolveMetricValue(rawValue, null);
-            return acc;
-        }, {});
-    }
-    buildStatsUrl(statsPath) {
-        const base = this.buildDefaultApiBase();
-        const normalizedStatsPath = this.normalizePath(statsPath);
-        const resolvedStatsPath = this.shouldStripLeadingApiSegment(base)
-            ? this.stripLeadingApiSegment(normalizedStatsPath)
-            : normalizedStatsPath;
-        return `${base}/${resolvedStatsPath}`;
-    }
-    buildDefaultApiBase() {
-        const entry = this.apiUrl?.default ?? {};
-        return buildApiUrl(entry).replace(/\/+$/, '');
+    validateTheme(document, issues) {
+        if (document.theme?.palette && typeof document.theme.palette === 'string') {
+            issues.push(this.error('palette-token-unsupported', 'theme.palette', 'x-ui.chart theme.palette as palette token reference is not yet implemented in @praxisui/charts.'));
+        }
+        if (document.theme?.variant) {
+            issues.push(this.error('theme-variant-unsupported', 'theme.variant', 'x-ui.chart theme.variant is not yet implemented in @praxisui/charts.'));
+        }
     }
-    normalizePath(value) {
-        return String(value || '').trim().replace(/^\/+|\/+$/g, '');
+    validateMetrics(document, issues) {
+        if (!document.metrics?.length) {
+            issues.push(this.error('missing-metric', 'metrics', 'x-ui.chart requires at least one metric for the current @praxisui/charts runtime.'));
+        }
+        const aggregations = [
+            ...(document.metrics?.map((metric) => metric.aggregation).filter(Boolean) ?? []),
+            ...(document.aggregations?.map((aggregation) => aggregation.operation) ?? []),
+        ];
+        if (aggregations.includes('distinct-count')) {
+            issues.push(this.error('distinct-count-unsupported', 'metrics', 'x-ui.chart aggregation "distinct-count" is not yet implemented in @praxisui/charts.'));
+        }
     }
-    stripLeadingApiSegment(value) {
-        return value.replace(/^api\/+/i, '');
+    validateKinds(document, issues) {
+        const metricCount = document.metrics?.length ?? 0;
+        if (document.kind !== 'pie' && document.kind !== 'donut' && !document.dimensions?.length) {
+            issues.push(this.error('missing-dimension', 'dimensions', 'x-ui.chart cartesian charts require at least one dimension in the current @praxisui/charts runtime.'));
+        }
+        if ((document.kind === 'pie' || document.kind === 'donut') && !document.dimensions?.[0]?.field) {
+            issues.push(this.error('pie-missing-dimension', 'dimensions[0].field', 'x-ui.chart pie/donut charts require a first dimension for category mapping.'));
+        }
+        if ((document.kind === 'pie' || document.kind === 'donut') && metricCount > 1) {
+            issues.push(this.error('pie-multi-metric', 'metrics', 'x-ui.chart pie/donut charts with multiple metrics are not yet implemented in @praxisui/charts.'));
+        }
+        if (document.kind === 'combo' && metricCount < 2) {
+            issues.push(this.error('combo-min-metrics', 'metrics', 'x-ui.chart combo charts require at least two metrics.'));
+        }
+        if (document.kind !== 'combo' && document.metrics?.some((metric) => metric.axis === 'secondary')) {
+            issues.push(this.error('secondary-axis-non-combo', 'metrics', 'x-ui.chart axis="secondary" is supported only for combo charts in @praxisui/charts.'));
+        }
+        if (document.source.kind === 'praxis.stats'
+            && document.source.operation === 'distribution'
+            && metricCount > 1) {
+            issues.push(this.error('distribution-single-metric', 'metrics', 'x-ui.chart praxis.stats distribution currently supports only a single metric in @praxisui/charts.'));
+        }
+        if (document.kind === 'horizontal-bar' && document.orientation && document.orientation !== 'horizontal') {
+            issues.push(this.error('horizontal-bar-orientation', 'orientation', 'x-ui.chart kind="horizontal-bar" requires orientation="horizontal" when orientation is provided.'));
+        }
+        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.'));
+        }
+        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.'));
+        }
+        if (document.kind === 'combo'
+            && document.source.kind === 'praxis.stats'
+            && document.source.operation !== 'group-by'
+            && document.source.operation !== 'timeseries') {
+            issues.push(this.error('combo-operation-unsupported', 'source.operation', 'x-ui.chart combo charts over praxis.stats currently support only group-by or timeseries operations in @praxisui/charts.'));
+        }
     }
-    shouldStripLeadingApiSegment(base) {
-        return /\/api$/i.test(base);
+    validateEvents(document, issues) {
+        this.validateEventAction('pointClick', document.events?.pointClick, issues);
+        this.validateEventAction('drillDown', document.events?.drillDown, issues);
+        if (document.events?.selectionChange) {
+            issues.push(this.error('selection-change-unsupported', 'events.selectionChange', 'x-ui.chart selectionChange/crossFilter declarative runtime actions are not yet implemented in @praxisui/charts.'));
+        }
+        if (document.events?.crossFilter) {
+            issues.push(this.error('cross-filter-unsupported', 'events.crossFilter', 'x-ui.chart selectionChange/crossFilter declarative runtime actions are not yet implemented in @praxisui/charts.'));
+        }
     }
-    handleHttpError(error) {
-        if (error instanceof HttpErrorResponse) {
-            const detail = typeof error.message === 'string' && error.message.trim()
-                ? error.message
-                : `HTTP ${error.status || 0}`;
-            return throwError(() => new Error(detail));
+    validateEventAction(eventKey, eventAction, issues) {
+        if (!eventAction?.action) {
+            return;
+        }
+        if (eventAction.action !== 'emit' && !eventAction.target?.trim()) {
+            issues.push(this.error(`${eventKey}-missing-target`, `events.${eventKey}.target`, `x-ui.chart events.${eventKey}.target is required when action="${eventAction.action}".`));
         }
-        return throwError(() => error instanceof Error ? error : new Error('Unexpected failure during praxis.stats execution.'));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStatsApiService, deps: [{ token: i1.HttpClient }, { token: API_URL }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStatsApiService, providedIn: 'root' });
+    error(code, field, message) {
+        return {
+            severity: 'error',
+            code,
+            field,
+            message,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractValidationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractValidationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStatsApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartContractValidationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [API_URL]
-                }] }] });
-
-const PRAXIS_CHART_ENGINE = new InjectionToken('PRAXIS_CHART_ENGINE');
+        }] });
 
-class PraxisChartComponent {
-    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    pointClick = output();
-    queryRequest = output();
-    loadStateChange = output();
-    chartHost = viewChild('chartHost', ...(ngDevMode ? [{ debugName: "chartHost" }] : []));
-    engine = inject(PRAXIS_CHART_ENGINE);
-    transformer = inject(PraxisChartDataTransformerService);
-    statsApi = inject(PraxisChartStatsApiService);
-    i18n = inject(PraxisI18nService);
-    destroyRef = inject(DestroyRef);
-    resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "resizeObserver" }] : []));
-    currentLoadState = signal('idle', ...(ngDevMode ? [{ debugName: "currentLoadState" }] : []));
-    remoteResolvedData = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedData" }] : []));
-    remoteRuntimeState = signal('idle', ...(ngDevMode ? [{ debugName: "remoteRuntimeState" }] : []));
-    remoteTechnicalError = signal(null, ...(ngDevMode ? [{ debugName: "remoteTechnicalError" }] : []));
-    previousRemoteSignature = null;
-    resolvedData = computed(() => {
-        const inputData = this.data();
-        if (inputData !== null && inputData !== undefined) {
-            return inputData;
-        }
-        const remoteData = this.remoteResolvedData();
-        if (remoteData !== null) {
-            return remoteData;
+class PraxisChartCanonicalContractMapperService {
+    normalizer;
+    validator;
+    constructor(normalizer = new ChartContractNormalizerService(), validator = new ChartContractValidationService()) {
+        this.normalizer = normalizer;
+        this.validator = validator;
+    }
+    toPraxisChartConfig(contract) {
+        const normalizedContract = this.normalizer.normalize(contract);
+        const validation = this.validator.validate(normalizedContract);
+        const firstError = validation.issues.find((issue) => issue.severity === 'error');
+        if (firstError) {
+            throw new Error(firstError.message);
         }
-        const dataSource = this.config().dataSource;
-        if (dataSource?.kind === 'local') {
-            return dataSource.items ?? [];
+        return {
+            id: normalizedContract.chartId,
+            type: normalizedContract.kind,
+            orientation: this.resolveOrientation(normalizedContract),
+            title: this.mapTextValue(normalizedContract.title),
+            subtitle: this.mapTextValue(normalizedContract.subtitle),
+            height: normalizedContract.height,
+            axes: this.buildAxes(normalizedContract),
+            series: this.buildSeries(normalizedContract),
+            dataSource: this.buildDataSource(normalizedContract),
+            interactions: this.buildInteractions(normalizedContract),
+            theme: this.buildTheme(normalizedContract),
+            motion: this.buildMotion(normalizedContract.motion),
+            emptyState: normalizedContract.state?.empty
+                ? {
+                    title: this.mapTextValue(normalizedContract.state.empty.title),
+                    description: this.mapTextValue(normalizedContract.state.empty.description),
+                }
+                : undefined,
+            state: {
+                loadingLabel: this.mapTextValue(normalizedContract.state?.loading?.title),
+                error: normalizedContract.state?.error
+                    ? {
+                        title: this.mapTextValue(normalizedContract.state.error.title),
+                        description: this.mapTextValue(normalizedContract.state.error.description),
+                    }
+                    : undefined,
+            },
+        };
+    }
+    buildAxes(contract) {
+        const firstDimension = contract.dimensions?.[0];
+        const firstMetric = contract.metrics?.[0];
+        const secondaryMetric = contract.metrics?.find((metric) => metric.axis === 'secondary');
+        const metricCount = contract.metrics?.length ?? 0;
+        if (contract.kind === 'pie' || contract.kind === 'donut') {
+            return {
+                x: {
+                    field: firstDimension?.field,
+                    label: this.toLabel(firstDimension?.label),
+                },
+            };
         }
-        return [];
-    }, ...(ngDevMode ? [{ debugName: "resolvedData" }] : []));
-    resolvedHeight = computed(() => {
-        const value = this.config().height;
-        if (typeof value === 'number')
-            return `${value}px`;
-        return value || '320px';
-    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : []));
-    renderConfig = computed(() => {
-        const config = this.config();
-        const explicitData = this.data();
-        const remoteState = this.remoteRuntimeState();
-        const remoteData = this.remoteResolvedData();
-        if (explicitData !== null && explicitData !== undefined) {
-            return config;
-        }
-        if (config.dataSource?.kind !== 'remote') {
-            return config;
-        }
-        if (remoteState === 'loading') {
+        if (contract.kind === 'scatter') {
             return {
-                ...config,
-                preferredLoadState: 'loading',
+                x: {
+                    field: firstDimension?.field,
+                    label: this.toLabel(firstDimension?.label),
+                    type: firstDimension?.role === 'time' ? 'time' : 'value',
+                },
+                y: {
+                    field: firstMetric?.field,
+                    label: this.toLabel(firstMetric?.label),
+                    type: 'value',
+                },
             };
         }
-        if (remoteState === 'error') {
-            return {
-                ...config,
-                preferredLoadState: 'error',
-                state: config.state?.error
-                    ? {
-                        ...config.state,
-                        error: {
-                            ...config.state.error,
-                            technicalDetails: this.remoteTechnicalError() ?? config.state.error.technicalDetails,
-                        },
-                    }
-                    : config.state,
-            };
+        return {
+            x: {
+                field: firstDimension?.field,
+                label: this.toLabel(firstDimension?.label),
+                type: firstDimension?.role === 'time' ? 'time' : 'category',
+            },
+            y: {
+                label: metricCount > 1 ? undefined : this.toLabel(firstMetric?.label),
+                type: 'value',
+            },
+            ySecondary: contract.kind === 'combo' && secondaryMetric
+                ? {
+                    label: this.toLabel(secondaryMetric.label),
+                    type: 'value',
+                    position: 'right',
+                }
+                : undefined,
+        };
+    }
+    buildSeries(contract) {
+        const firstDimension = contract.dimensions?.[0];
+        const labelsVisible = this.resolveToggle(contract.labels);
+        return (contract.metrics ?? []).map((metric, index) => ({
+            id: `${metric.field}-${index + 1}`,
+            name: this.toLabel(metric.label) ?? metric.field,
+            type: this.resolveSeriesType(contract.kind, metric.seriesKind, index),
+            axis: metric.axis ?? 'primary',
+            categoryField: contract.kind === 'pie' || contract.kind === 'donut' ? firstDimension?.field : undefined,
+            metric: {
+                field: metric.field,
+                aggregation: this.mapAggregation(metric.aggregation),
+                label: this.toLabel(metric.label),
+            },
+            color: metric.color,
+            stackId: contract.kind === 'stacked-bar' || contract.kind === 'stacked-area' ? 'stack-1' : undefined,
+            labels: labelsVisible ? { visible: true } : undefined,
+            smooth: this.shouldSmoothSeries(contract.kind, metric.seriesKind),
+        }));
+    }
+    buildDataSource(contract) {
+        if (contract.source.kind === 'derived') {
+            return undefined;
         }
-        if (remoteData !== null) {
-            return {
-                ...config,
-                preferredLoadState: undefined,
-                series: config.series.map((series) => ({
-                    ...series,
-                    metric: {
-                        ...series.metric,
-                        aggregation: 'sum',
-                        field: series.metric?.field || 'value',
-                    },
-                })),
-            };
+        return {
+            kind: 'remote',
+            resourcePath: contract.source.resource,
+            schemaId: contract.source.resource,
+            query: this.buildQuery(contract),
+        };
+    }
+    buildQuery(contract) {
+        if (contract.source.kind !== 'praxis.stats') {
+            return undefined;
         }
-        return config;
-    }, ...(ngDevMode ? [{ debugName: "renderConfig" }] : []));
-    loadingLabel = computed(() => this.i18n.resolve(this.renderConfig().state?.loadingLabel), ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
-    emptyTitle = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.title), ...(ngDevMode ? [{ debugName: "emptyTitle" }] : []));
-    emptyDescription = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.description), ...(ngDevMode ? [{ debugName: "emptyDescription" }] : []));
-    errorTitle = computed(() => this.i18n.resolve(this.renderConfig().state?.error?.title), ...(ngDevMode ? [{ debugName: "errorTitle" }] : []));
-    errorDescription = computed(() => this.i18n.resolve(this.renderConfig().state?.error?.description), ...(ngDevMode ? [{ debugName: "errorDescription" }] : []));
-    loadState = computed(() => {
-        const config = this.renderConfig();
-        if (config.preferredLoadState === 'loading')
-            return 'loading';
-        if (config.preferredLoadState === 'error')
-            return 'error';
-        const dataSource = config.dataSource;
-        const explicitData = this.data();
-        if (dataSource?.kind === 'remote' && (explicitData === null || explicitData === undefined)) {
-            return this.remoteRuntimeState() === 'ready' ? 'ready' : 'loading';
+        const filtersFromContract = this.toQueryFilterMap(contract.filters);
+        const combinedFilters = {
+            ...filtersFromContract,
+        };
+        return {
+            sourceKind: 'praxis.stats',
+            statsOperation: contract.source.operation,
+            granularity: contract.source.options?.granularity,
+            fillGaps: contract.source.options?.fillGaps,
+            distributionMode: contract.source.options?.mode,
+            bucketSize: contract.source.options?.bucketSize,
+            bucketCount: contract.source.options?.bucketCount,
+            statsOrderBy: this.mapStatsOrderBy(contract.source.options?.orderBy),
+            statsPath: this.buildStatsPath(contract),
+            statsRequest: this.buildStatsRequest(contract, combinedFilters),
+            dimensions: contract.dimensions?.map((dimension) => dimension.field),
+            metrics: contract.metrics?.map((metric) => ({
+                field: metric.field,
+                aggregation: this.mapAggregation(metric.aggregation),
+                alias: metric.field,
+            })),
+            filters: Object.keys(combinedFilters).length ? combinedFilters : undefined,
+            sort: contract.sort?.map((item) => `${item.field}:${item.direction}`),
+            limit: contract.limit ?? contract.source.options?.limit,
+        };
+    }
+    buildInteractions(contract) {
+        return {
+            pointClick: Boolean(contract.events?.pointClick || contract.events?.drillDown),
+            selection: Boolean(contract.events?.selectionChange),
+            drillDown: Boolean(contract.events?.drillDown),
+        };
+    }
+    buildTheme(contract) {
+        return {
+            palette: Array.isArray(contract.theme?.palette) ? contract.theme.palette : undefined,
+            legend: { visible: this.resolveToggle(contract.legend, true) },
+            tooltip: {
+                enabled: this.resolveToggle(contract.tooltip, true),
+                trigger: contract.kind === 'pie' || contract.kind === 'donut' || contract.kind === 'scatter' ? 'item' : 'axis',
+            },
+        };
+    }
+    buildMotion(motion) {
+        if (!motion) {
+            return undefined;
         }
-        const transformed = this.transformer.transform(config, this.resolvedData());
-        return transformed.hasData ? 'ready' : 'empty';
-    }, ...(ngDevMode ? [{ debugName: "loadState" }] : []));
-    constructor() {
-        effect(() => {
-            const config = this.config();
-            const explicitData = this.data();
-            const nextSignature = explicitData === null || explicitData === undefined
-                ? this.buildRemoteSignature(config)
-                : null;
-            if (nextSignature === this.previousRemoteSignature) {
-                return;
-            }
-            this.previousRemoteSignature = nextSignature;
-            this.remoteResolvedData.set(null);
-            this.remoteRuntimeState.set('idle');
-            this.remoteTechnicalError.set(null);
-        });
-        effect(() => {
-            const nextState = this.loadState();
-            if (this.currentLoadState() !== nextState) {
-                this.currentLoadState.set(nextState);
-                this.loadStateChange.emit(nextState);
-            }
-        });
-        effect(() => {
-            const config = this.config();
-            const explicitData = this.data();
-            if (config.dataSource?.kind !== 'remote' || (explicitData !== null && explicitData !== undefined)) {
-                return;
-            }
-            if (this.remoteRuntimeState() === 'loading' || this.remoteResolvedData() !== null) {
-                return;
-            }
-            const event = {
-                chartId: config.id,
-                dataSource: config.dataSource,
-                query: config.dataSource.query,
-            };
-            this.queryRequest.emit(event);
-            this.remoteRuntimeState.set('loading');
-            this.remoteResolvedData.set([]);
-            this.remoteTechnicalError.set(null);
-            this.statsApi.execute(event, config)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (rows) => {
-                    this.remoteResolvedData.set(rows);
-                    this.remoteRuntimeState.set('ready');
-                    this.remoteTechnicalError.set(null);
-                },
-                error: (error) => {
-                    this.remoteResolvedData.set([]);
-                    this.remoteRuntimeState.set('error');
-                    this.remoteTechnicalError.set(error instanceof Error && error.message.trim()
-                        ? error.message
-                        : 'praxis.stats request failed');
-                },
-            });
-        });
-        effect(() => {
-            if (this.loadState() !== 'ready') {
-                this.engine.destroy();
-                return;
-            }
-            const host = this.chartHost()?.nativeElement;
-            if (!host)
-                return;
-            this.engine.render(host, {
-                config: this.renderConfig(),
-                data: this.resolvedData(),
-                onPointClick: (event) => this.pointClick.emit(event),
-            });
-            this.ensureResizeObserver(host);
-        });
-        this.destroyRef.onDestroy(() => {
-            this.resizeObserver()?.disconnect();
-            this.engine.destroy();
-        });
+        return {
+            enabled: motion.enabled,
+            preset: motion.preset,
+        };
     }
-    ensureResizeObserver(host) {
-        if (this.resizeObserver()) {
-            return;
+    resolveOrientation(contract) {
+        if (contract.kind === 'horizontal-bar') {
+            return 'horizontal';
         }
-        const observer = new ResizeObserver(() => {
-            this.engine.resize();
-        });
-        observer.observe(host);
-        this.resizeObserver.set(observer);
+        return contract.orientation;
     }
-    buildRemoteSignature(config) {
-        if (config.dataSource?.kind !== 'remote') {
-            return null;
+    resolveSeriesType(chartKind, seriesKind, index) {
+        if (chartKind === 'combo') {
+            return seriesKind ?? (index === 0 ? 'bar' : 'line');
         }
-        return JSON.stringify({
-            id: config.id,
-            resourcePath: config.dataSource.resourcePath,
-            query: config.dataSource.query,
-        });
+        return chartKind === 'stacked-bar' ? 'bar' : chartKind;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, providers: [
-            EChartsEngineAdapter,
-            {
-                provide: PRAXIS_CHART_ENGINE,
-                useExisting: EChartsEngineAdapter,
-            },
-        ], viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <section class="praxis-chart-shell" [style.height]="resolvedHeight()">
-      @if (loadState() === 'loading') {
-        <div class="praxis-chart-state praxis-chart-state-loading">
-          <div class="praxis-chart-spinner" aria-hidden="true"></div>
-          @if (loadingLabel()) {
-            <div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
-          }
-        </div>
-      } @else if (loadState() === 'error') {
-        <div class="praxis-chart-state praxis-chart-state-error">
-          @if (errorTitle()) {
-            <div class="praxis-chart-state-title">{{ errorTitle() }}</div>
-          }
-          @if (errorDescription()) {
-            <div class="praxis-chart-state-description">{{ errorDescription() }}</div>
-          }
-        </div>
-      } @else if (loadState() === 'empty') {
-        <div class="praxis-chart-state praxis-chart-state-empty">
-          @if (emptyTitle()) {
-            <div class="praxis-chart-state-title">{{ emptyTitle() }}</div>
-          }
-          @if (emptyDescription()) {
-            <div class="praxis-chart-state-description">{{ emptyDescription() }}</div>
-          }
-        </div>
-      } @else {
-        <div #chartHost class="praxis-chart-host"></div>
-      }
-    </section>
-  `, isInline: true, styles: [":host{display:block;min-width:0}.praxis-chart-shell{position:relative;width:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;place-content:center;gap:10px;padding:24px;text-align:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-spinner{width:34px;height:34px;margin-inline:auto;border-radius:999px;border:3px solid rgba(18,99,180,.18);border-top-color:#1263b4d1;animation:praxis-chart-spin .8s linear infinite}@keyframes praxis-chart-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'praxis-chart', standalone: true, imports: [CommonModule], providers: [
-                        EChartsEngineAdapter,
-                        {
-                            provide: PRAXIS_CHART_ENGINE,
-                            useExisting: EChartsEngineAdapter,
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="praxis-chart-shell" [style.height]="resolvedHeight()">
-      @if (loadState() === 'loading') {
-        <div class="praxis-chart-state praxis-chart-state-loading">
-          <div class="praxis-chart-spinner" aria-hidden="true"></div>
-          @if (loadingLabel()) {
-            <div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
-          }
-        </div>
-      } @else if (loadState() === 'error') {
-        <div class="praxis-chart-state praxis-chart-state-error">
-          @if (errorTitle()) {
-            <div class="praxis-chart-state-title">{{ errorTitle() }}</div>
-          }
-          @if (errorDescription()) {
-            <div class="praxis-chart-state-description">{{ errorDescription() }}</div>
-          }
-        </div>
-      } @else if (loadState() === 'empty') {
-        <div class="praxis-chart-state praxis-chart-state-empty">
-          @if (emptyTitle()) {
-            <div class="praxis-chart-state-title">{{ emptyTitle() }}</div>
-          }
-          @if (emptyDescription()) {
-            <div class="praxis-chart-state-description">{{ emptyDescription() }}</div>
-          }
-        </div>
-      } @else {
-        <div #chartHost class="praxis-chart-host"></div>
-      }
-    </section>
-  `, styles: [":host{display:block;min-width:0}.praxis-chart-shell{position:relative;width:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;place-content:center;gap:10px;padding:24px;text-align:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-spinner{width:34px;height:34px;margin-inline:auto;border-radius:999px;border:3px solid rgba(18,99,180,.18);border-top-color:#1263b4d1;animation:praxis-chart-spin .8s linear infinite}@keyframes praxis-chart-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
-
-const PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH = {
-    Jan: [
-        { segment: 'Enterprise', total: 52000 },
-        { segment: 'Mid-market', total: 38000 },
-        { segment: 'SMB', total: 30000 },
-    ],
-    Fev: [
-        { segment: 'Enterprise', total: 61000 },
-        { segment: 'Mid-market', total: 42000 },
-        { segment: 'SMB', total: 35000 },
-    ],
-    Mar: [
-        { segment: 'Enterprise', total: 68000 },
-        { segment: 'Mid-market', total: 47000 },
-        { segment: 'SMB', total: 36000 },
-    ],
-    Abr: [
-        { segment: 'Enterprise', total: 64000 },
-        { segment: 'Mid-market', total: 49500 },
-        { segment: 'SMB', total: 36000 },
-    ],
-};
-
-class PraxisChartDrilldownPanelComponent {
-    title = input('Detalhamento por segmento', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    selection = input(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
-    activeCategory = computed(() => {
-        const raw = this.selection()?.category;
-        return typeof raw === 'string' ? raw : null;
-    }, ...(ngDevMode ? [{ debugName: "activeCategory" }] : []));
-    detailData = computed(() => {
-        const category = this.activeCategory();
-        if (!category)
-            return [];
-        return PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH[category] ?? [];
-    }, ...(ngDevMode ? [{ debugName: "detailData" }] : []));
-    detailChartConfig = computed(() => {
-        const category = this.activeCategory();
+    shouldSmoothSeries(chartKind, seriesKind) {
+        if (chartKind === 'combo') {
+            return seriesKind === 'line' || seriesKind === 'area' ? true : undefined;
+        }
+        return chartKind === 'line' || chartKind === 'area' || chartKind === 'stacked-area' ? true : undefined;
+    }
+    mapTextValue(value) {
+        if (!value)
+            return undefined;
+        if (typeof value === 'string')
+            return value;
         return {
-            id: 'chart-drilldown-detail',
-            type: 'donut',
-            title: { text: category ? `Mix de receita em ${category}` : 'Aguardando selecao' },
-            subtitle: { text: category ? 'Drill-down local com JSON mockado' : 'Selecione um ponto no chart principal' },
-            height: 280,
-            series: [
-                {
-                    id: 'segmentMix',
-                    categoryField: 'segment',
-                    metric: { field: 'total', aggregation: 'sum' },
-                    labels: { visible: true },
-                },
-            ],
-            emptyState: {
-                title: { text: 'Nenhum recorte selecionado' },
-                description: { text: 'O painel de drill-down usa mocks locais e reage ao pointClick do chart principal.' },
-            },
-            theme: {
-                palette: ['#1263b4', '#2b8a3e', '#f08c00', '#7b61ff'],
-            },
+            key: value.key,
+            text: value.fallback,
         };
-    }, ...(ngDevMode ? [{ debugName: "detailChartConfig" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDrilldownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartDrilldownPanelComponent, isStandalone: true, selector: "praxis-chart-drilldown-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <section class="drilldown-shell">
-      <header class="drilldown-header">
-        <p class="drilldown-eyebrow">Drill-down local</p>
-        <h3>{{ title() }}</h3>
-        @if (activeCategory()) {
-          <p class="drilldown-description">Recorte atual: {{ activeCategory() }}</p>
-        } @else {
-          <p class="drilldown-description">Clique em uma barra do chart principal para abrir o detalhamento local.</p>
-        }
-      </header>
-
-      <praxis-chart
-        [config]="detailChartConfig()"
-        [data]="detailData()"
-      ></praxis-chart>
-    </section>
-  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data"], outputs: ["pointClick", "queryRequest", "loadStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDrilldownPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'praxis-chart-drilldown-panel', standalone: true, imports: [CommonModule, PraxisChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="drilldown-shell">
-      <header class="drilldown-header">
-        <p class="drilldown-eyebrow">Drill-down local</p>
-        <h3>{{ title() }}</h3>
-        @if (activeCategory()) {
-          <p class="drilldown-description">Recorte atual: {{ activeCategory() }}</p>
-        } @else {
-          <p class="drilldown-description">Clique em uma barra do chart principal para abrir o detalhamento local.</p>
+    }
+    toLabel(value) {
+        if (!value)
+            return undefined;
+        if (typeof value === 'string')
+            return value;
+        return value.fallback || value.key;
+    }
+    resolveToggle(value, defaultValue = false) {
+        if (typeof value === 'boolean')
+            return value;
+        if (typeof value === 'object' && value)
+            return value.enabled;
+        return defaultValue;
+    }
+    mapAggregation(aggregation) {
+        switch (aggregation) {
+            case 'avg':
+            case 'min':
+            case 'max':
+            case 'count':
+            case 'sum':
+                return aggregation;
+            case undefined:
+                return undefined;
+            default:
+                throw new Error(`x-ui.chart aggregation "${aggregation}" is not yet implemented in @praxisui/charts.`);
         }
-      </header>
-
-      <praxis-chart
-        [config]="detailChartConfig()"
-        [data]="detailData()"
-      ></praxis-chart>
-    </section>
-  `, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }] } });
-
-class PraxisChartStateProbeComponent {
-    title = input('Chart Runtime Probe', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
-    serializedValue = computed(() => JSON.stringify(this.value(), null, 2), ...(ngDevMode ? [{ debugName: "serializedValue" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStateProbeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartStateProbeComponent, isStandalone: true, selector: "praxis-chart-state-probe", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <section class="probe-shell">
-      <header class="probe-header">
-        <p class="probe-eyebrow">Probe</p>
-        <h3>{{ title() }}</h3>
-      </header>
-
-      @if (value() === null || value() === undefined || value() === '') {
-        <div class="probe-empty">Aguardando eventos do runtime.</div>
-      } @else {
-        <pre>{{ serializedValue() }}</pre>
-      }
-    </section>
-  `, isInline: true, styles: [":host{display:block}.probe-shell{display:grid;gap:12px;min-height:220px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#0b111ff5,#0b111fe0),radial-gradient(circle at top right,rgba(18,99,180,.32),transparent 35%);color:#d7e6ff}.probe-header h3,.probe-eyebrow{margin:0}.probe-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#d7e6ffb3}.probe-empty{color:#d7e6ffc7}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.45}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStateProbeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'praxis-chart-state-probe', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <section class="probe-shell">
-      <header class="probe-header">
-        <p class="probe-eyebrow">Probe</p>
-        <h3>{{ title() }}</h3>
-      </header>
-
-      @if (value() === null || value() === undefined || value() === '') {
-        <div class="probe-empty">Aguardando eventos do runtime.</div>
-      } @else {
-        <pre>{{ serializedValue() }}</pre>
-      }
-    </section>
-  `, styles: [":host{display:block}.probe-shell{display:grid;gap:12px;min-height:220px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#0b111ff5,#0b111fe0),radial-gradient(circle at top right,rgba(18,99,180,.32),transparent 35%);color:#d7e6ff}.probe-header h3,.probe-eyebrow{margin:0}.probe-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#d7e6ffb3}.probe-empty{color:#d7e6ffc7}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.45}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
-
-const PRAXIS_CHART_COMPONENT_METADATA = {
-    id: 'praxis-chart',
-    componentType: 'praxis-chart',
-    displayName: 'Praxis Chart',
-    selector: 'praxis-chart',
-    component: PraxisChartComponent,
-    friendlyName: 'Praxis Chart',
-    description: 'Chart component for analytics and metadata-driven visualizations in Praxis UI.',
-    icon: 'bar_chart',
-    tags: ['chart', 'analytics', 'widget', 'visualization'],
-    lib: '@praxisui/charts',
-    inputs: [
-        {
-            name: 'config',
-            type: 'PraxisChartConfig',
-            description: 'Declarative chart configuration with metadata-oriented semantics.',
-        },
-        {
-            name: 'data',
-            type: 'PraxisChartDataRow[]',
-            description: 'Optional local dataset that takes precedence over local datasource items.',
-        },
-    ],
-    outputs: [
-        {
-            name: 'pointClick',
-            type: 'PraxisChartPointEvent',
-            description: 'Emitted when the host wants to react to a point/series click.',
-        },
-        {
-            name: 'queryRequest',
-            type: 'PraxisChartQueryRequestEvent',
-            description: 'Emitted before a remote praxis.stats datasource is resolved, allowing host-side observability of the outgoing request.',
-        },
-        {
-            name: 'loadStateChange',
-            type: 'PraxisChartLoadState',
-            description: 'Emitted when the chart state changes.',
-        },
-    ],
-};
-function providePraxisChartsMetadata() {
-    return {
-        provide: ENVIRONMENT_INITIALIZER,
-        multi: true,
-        useFactory: (registry) => () => {
-            registry.register(PRAXIS_CHART_COMPONENT_METADATA);
-        },
-        deps: [ComponentMetadataRegistry],
-    };
+    }
+    toQueryFilterMap(filters) {
+        if (!filters?.length)
+            return undefined;
+        return filters.reduce((acc, filter) => {
+            if (filter.value !== undefined) {
+                acc[filter.field] = filter.value;
+                return acc;
+            }
+            if (filter.values !== undefined) {
+                acc[filter.field] = filter.values;
+            }
+            return acc;
+        }, {});
+    }
+    buildStatsPath(contract) {
+        return `${contract.source.resource.replace(/\/+$/, '')}/stats/${contract.source.operation}`;
+    }
+    buildStatsRequest(contract, filters) {
+        const field = this.resolveStatsField(contract);
+        const metrics = this.buildStatsMetricRequests(contract);
+        const metric = metrics[0];
+        const limit = contract.limit ?? contract.source.options?.limit;
+        const orderBy = this.mapStatsOrderByToBackend(contract.source.options?.orderBy);
+        const requestMetrics = metrics.length > 1 ? metrics : undefined;
+        switch (contract.source.operation) {
+            case 'group-by':
+                return {
+                    filter: filters,
+                    field,
+                    metric,
+                    metrics: requestMetrics,
+                    limit,
+                    orderBy,
+                };
+            case 'timeseries':
+                return {
+                    filter: filters,
+                    field,
+                    granularity: this.mapStatsGranularityToBackend(contract.source.options?.granularity),
+                    metric,
+                    metrics: requestMetrics,
+                    fillGaps: contract.source.options?.fillGaps,
+                };
+            case 'distribution':
+                return {
+                    filter: filters,
+                    field,
+                    mode: this.mapDistributionModeToBackend(contract.source.options?.mode),
+                    metric,
+                    bucketSize: contract.source.options?.bucketSize,
+                    bucketCount: contract.source.options?.bucketCount,
+                    limit,
+                    orderBy,
+                };
+            default:
+                throw new Error(`x-ui.chart source.operation "${contract.source.operation}" is not supported in @praxisui/charts.`);
+        }
+    }
+    resolveStatsField(contract) {
+        const dimensionField = contract.dimensions?.[0]?.field?.trim();
+        if (dimensionField) {
+            return dimensionField;
+        }
+        throw new Error('x-ui.chart requires dimensions[0].field to derive the canonical praxis.stats request.');
+    }
+    buildStatsMetricRequest(contract) {
+        const metric = contract.metrics?.[0];
+        if (!metric) {
+            throw new Error('x-ui.chart requires metrics[0] to derive the canonical praxis.stats request.');
+        }
+        const operation = this.mapStatsMetricOperation(metric.aggregation);
+        return {
+            operation,
+            field: operation === 'COUNT' ? undefined : metric.field,
+            alias: metric.field,
+        };
+    }
+    buildStatsMetricRequests(contract) {
+        if (!contract.metrics?.length) {
+            throw new Error('x-ui.chart requires at least one metric to derive the canonical praxis.stats request.');
+        }
+        return contract.metrics.map((metric) => {
+            const operation = this.mapStatsMetricOperation(metric.aggregation);
+            return {
+                operation,
+                field: operation === 'COUNT' ? undefined : metric.field,
+                alias: metric.field,
+            };
+        });
+    }
+    mapStatsOrderBy(value) {
+        if (!value)
+            return undefined;
+        switch (value) {
+            case 'key-asc':
+            case 'key-desc':
+            case 'value-asc':
+            case 'value-desc':
+                return value;
+            default:
+                throw new Error(`x-ui.chart source.options.orderBy "${value}" is not supported in @praxisui/charts.`);
+        }
+    }
+    mapStatsOrderByToBackend(value) {
+        switch (value) {
+            case 'key-asc':
+                return 'KEY_ASC';
+            case 'key-desc':
+                return 'KEY_DESC';
+            case 'value-asc':
+                return 'VALUE_ASC';
+            case 'value-desc':
+                return 'VALUE_DESC';
+            case undefined:
+                return undefined;
+            default:
+                throw new Error(`x-ui.chart source.options.orderBy "${value}" is not supported in @praxisui/charts.`);
+        }
+    }
+    mapStatsGranularityToBackend(value) {
+        switch (value) {
+            case 'hour':
+                return 'HOUR';
+            case 'day':
+                return 'DAY';
+            case 'week':
+                return 'WEEK';
+            case 'month':
+            case undefined:
+                return 'MONTH';
+            case 'quarter':
+                return 'QUARTER';
+            case 'year':
+                return 'YEAR';
+            default:
+                throw new Error(`x-ui.chart source.options.granularity "${value}" is not supported in @praxisui/charts.`);
+        }
+    }
+    mapDistributionModeToBackend(value) {
+        switch (value) {
+            case 'histogram':
+                return 'HISTOGRAM';
+            case 'terms':
+            case undefined:
+                return 'TERMS';
+            default:
+                throw new Error(`x-ui.chart source.options.mode "${value}" is not supported in @praxisui/charts.`);
+        }
+    }
+    mapStatsMetricOperation(aggregation) {
+        switch (aggregation) {
+            case undefined:
+            case 'count':
+                return 'COUNT';
+            case 'sum':
+                return 'SUM';
+            case 'avg':
+                return 'AVG';
+            case 'min':
+                return 'MIN';
+            case 'max':
+                return 'MAX';
+            default:
+                throw new Error(`x-ui.chart aggregation "${aggregation}" is not yet implemented in @praxisui/charts.`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, deps: [{ token: ChartContractNormalizerService }, { token: ChartContractValidationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, providedIn: 'root' });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: ChartContractNormalizerService }, { type: ChartContractValidationService }] });
 
-const PRAXIS_CHART_DRILLDOWN_PANEL_METADATA = {
-    id: 'praxis-chart-drilldown-panel',
-    componentType: 'praxis-chart-drilldown-panel',
-    displayName: 'Praxis Chart Drilldown Panel',
-    selector: 'praxis-chart-drilldown-panel',
-    component: PraxisChartDrilldownPanelComponent,
-    friendlyName: 'Praxis Chart Drilldown Panel',
-    description: 'Local drill-down panel that consumes chart point events and renders a derived detail chart.',
-    icon: 'query_stats',
-    tags: ['chart', 'drilldown', 'widget', 'analytics'],
-    lib: '@praxisui/charts',
-    inputs: [
-        {
-            name: 'title',
-            type: 'string',
-            description: 'Panel title for the drill-down view.',
-        },
-        {
-            name: 'selection',
-            type: 'PraxisChartPointEvent',
-            description: 'Event emitted by a source chart and used to resolve local detail datasets.',
-        },
-    ],
-};
-function providePraxisChartDrilldownPanelMetadata() {
-    return {
-        provide: ENVIRONMENT_INITIALIZER,
-        multi: true,
-        useFactory: (registry) => () => {
-            registry.register(PRAXIS_CHART_DRILLDOWN_PANEL_METADATA);
-        },
-        deps: [ComponentMetadataRegistry],
-    };
+class PraxisChartStatsApiService {
+    http;
+    apiUrl;
+    constructor(http, apiUrl) {
+        this.http = http;
+        this.apiUrl = apiUrl;
+    }
+    execute(event, config) {
+        const query = event.query;
+        const statsRequest = query?.statsRequest;
+        if (!query?.statsPath || !statsRequest) {
+            return throwError(() => new Error('PraxisChartStatsApiService requires query.statsPath and query.statsRequest for praxis.stats execution.'));
+        }
+        const categoryField = this.resolveCategoryField(config, statsRequest);
+        const url = this.buildStatsUrl(query.statsPath);
+        return this.http
+            .post(url, statsRequest)
+            .pipe(map((response) => this.toChartRows(response?.data, statsRequest, categoryField, config)), catchError((error) => this.handleHttpError(error)));
+    }
+    toChartRows(response, request, categoryField, config) {
+        if (!response) {
+            return [];
+        }
+        const metricBindings = this.resolveMetricBindings(config, request, response);
+        if ('points' in response) {
+            return response.points.map((point) => {
+                const category = point.label ?? point.start ?? point.end ?? '';
+                return {
+                    [categoryField]: category,
+                    ...this.projectMetricValues(metricBindings, point.values, point.value, point.count),
+                    key: point.start ?? point.label ?? point.end ?? category,
+                    label: point.label ?? category,
+                    value: point.value ?? null,
+                    count: point.count ?? null,
+                    start: point.start ?? null,
+                    end: point.end ?? null,
+                    granularity: response.granularity ?? null,
+                };
+            });
+        }
+        if ('buckets' in response) {
+            return response.buckets.map((bucket) => {
+                const category = this.resolveBucketCategory(bucket);
+                return {
+                    [categoryField]: category,
+                    ...this.projectMetricValues(metricBindings, bucket.values, bucket.value, bucket.count),
+                    key: bucket.key ?? null,
+                    label: bucket.label ?? category,
+                    value: bucket.value ?? null,
+                    count: bucket.count ?? null,
+                    from: bucket.from ?? null,
+                    to: bucket.to ?? null,
+                    mode: 'mode' in response ? response.mode ?? null : null,
+                    requestMode: 'mode' in request ? request.mode : null,
+                };
+            });
+        }
+        return [];
+    }
+    resolveBucketCategory(bucket) {
+        if (bucket.label !== null && bucket.label !== undefined && bucket.label !== '') {
+            return String(bucket.label);
+        }
+        if (bucket.key !== null && bucket.key !== undefined && bucket.key !== '') {
+            return String(bucket.key);
+        }
+        if (bucket.from !== null || bucket.to !== null) {
+            return `${bucket.from ?? ''} - ${bucket.to ?? ''}`.trim();
+        }
+        return '';
+    }
+    resolveMetricValue(value, count) {
+        if (typeof value === 'number' && Number.isFinite(value)) {
+            return value;
+        }
+        if (typeof count === 'number' && Number.isFinite(count)) {
+            return count;
+        }
+        return 0;
+    }
+    resolveCategoryField(config, request) {
+        const firstSeries = config.series[0];
+        return (firstSeries?.categoryField
+            || config.axes?.x?.field
+            || request.field
+            || 'category');
+    }
+    resolveMetricBindings(config, request, response) {
+        const queryMetrics = config.dataSource?.kind === 'remote'
+            ? (config.dataSource.query?.metrics ?? [])
+            : [];
+        if (queryMetrics.length) {
+            return queryMetrics.map((metric, index) => ({
+                field: metric.field || `value${index + 1}`,
+                alias: metric.alias || metric.field || `value${index + 1}`,
+            }));
+        }
+        const responseMetrics = 'metrics' in response ? response.metrics : undefined;
+        if (responseMetrics?.length) {
+            return responseMetrics.map((metric, index) => ({
+                field: metric.alias || metric.field || `value${index + 1}`,
+                alias: metric.alias || metric.field || `value${index + 1}`,
+            }));
+        }
+        const requestMetrics = 'metrics' in request ? request.metrics : undefined;
+        if (requestMetrics?.length) {
+            return requestMetrics.map((metric, index) => ({
+                field: metric.alias || metric.field || `value${index + 1}`,
+                alias: metric.alias || metric.field || `value${index + 1}`,
+            }));
+        }
+        const metric = ('metric' in response && response.metric) || ('metric' in request ? request.metric : undefined);
+        return [
+            {
+                field: metric?.alias || metric?.field || config.series[0]?.metric?.field || 'value',
+                alias: metric?.alias || metric?.field || config.series[0]?.metric?.field || 'value',
+            },
+        ];
+    }
+    projectMetricValues(bindings, values, primaryValue, count) {
+        return bindings.reduce((acc, binding, index) => {
+            const rawValue = values?.[binding.alias];
+            acc[binding.field] = index === 0
+                ? this.resolveMetricValue(rawValue ?? primaryValue, count)
+                : this.resolveMetricValue(rawValue, null);
+            return acc;
+        }, {});
+    }
+    buildStatsUrl(statsPath) {
+        const base = this.buildDefaultApiBase();
+        const normalizedStatsPath = this.normalizePath(statsPath);
+        const resolvedStatsPath = this.shouldStripLeadingApiSegment(base)
+            ? this.stripLeadingApiSegment(normalizedStatsPath)
+            : normalizedStatsPath;
+        return `${base}/${resolvedStatsPath}`;
+    }
+    buildDefaultApiBase() {
+        const entry = this.apiUrl?.default ?? {};
+        return buildApiUrl(entry).replace(/\/+$/, '');
+    }
+    normalizePath(value) {
+        return String(value || '').trim().replace(/^\/+|\/+$/g, '');
+    }
+    stripLeadingApiSegment(value) {
+        return value.replace(/^api\/+/i, '');
+    }
+    shouldStripLeadingApiSegment(base) {
+        return /\/api$/i.test(base);
+    }
+    handleHttpError(error) {
+        if (error instanceof HttpErrorResponse) {
+            const detail = typeof error.message === 'string' && error.message.trim()
+                ? error.message
+                : `HTTP ${error.status || 0}`;
+            return throwError(() => new Error(detail));
+        }
+        return throwError(() => error instanceof Error ? error : new Error('Unexpected failure during praxis.stats execution.'));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStatsApiService, deps: [{ token: i1.HttpClient }, { token: API_URL }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStatsApiService, providedIn: 'root' });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStatsApiService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [API_URL]
+                }] }] });
 
-const PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA = {
-    id: 'praxis-chart-state-probe',
-    componentType: 'praxis-chart-state-probe',
-    displayName: 'Praxis Chart State Probe',
-    selector: 'praxis-chart-state-probe',
-    component: PraxisChartStateProbeComponent,
-    friendlyName: 'Praxis Chart State Probe',
-    description: 'Diagnostic widget used to inspect chart events and runtime payloads during local validation.',
-    icon: 'monitoring',
-    tags: ['chart', 'probe', 'debug', 'widget'],
-    lib: '@praxisui/charts',
-    inputs: [
-        {
-            name: 'title',
-            type: 'string',
-            description: 'Probe panel title.',
-        },
-        {
-            name: 'value',
-            type: 'unknown',
-            description: 'Payload rendered as formatted JSON.',
-        },
-    ],
-};
-function providePraxisChartStateProbeMetadata() {
-    return {
-        provide: ENVIRONMENT_INITIALIZER,
-        multi: true,
-        useFactory: (registry) => () => {
-            registry.register(PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA);
-        },
-        deps: [ComponentMetadataRegistry],
-    };
-}
+const PRAXIS_CHART_ENGINE = new InjectionToken('PRAXIS_CHART_ENGINE');
 
-class PraxisChartShowcaseWidgetComponent {
+class PraxisChartComponent {
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
     data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    viewMode = input('chart', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    chartDocument = input(null, ...(ngDevMode ? [{ debugName: "chartDocument" }] : []));
+    filterCriteria = input(null, ...(ngDevMode ? [{ debugName: "filterCriteria" }] : []));
+    enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    availableResources = input([], ...(ngDevMode ? [{ debugName: "availableResources" }] : []));
+    availableFields = input([], ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    availableTargets = input([], ...(ngDevMode ? [{ debugName: "availableTargets" }] : []));
     pointClick = output();
     queryRequest = output();
     loadStateChange = output();
+    chartDocumentApplied = output();
+    chartDocumentSaved = output();
+    chartHost = viewChild('chartHost', ...(ngDevMode ? [{ debugName: "chartHost" }] : []));
+    hostElement = inject(ElementRef);
+    engine = inject(PRAXIS_CHART_ENGINE);
+    transformer = inject(PraxisChartDataTransformerService);
+    canonicalMapper = inject(PraxisChartCanonicalContractMapperService);
     statsApi = inject(PraxisChartStatsApiService);
+    i18n = inject(PraxisI18nService);
+    settingsPanel = inject(SETTINGS_PANEL_BRIDGE, { optional: true });
     destroyRef = inject(DestroyRef);
-    remoteResolvedRows = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedRows" }] : []));
+    resizeObserver = signal(null, ...(ngDevMode ? [{ debugName: "resizeObserver" }] : []));
+    shellObserver = signal(null, ...(ngDevMode ? [{ debugName: "shellObserver" }] : []));
+    currentLoadState = signal('idle', ...(ngDevMode ? [{ debugName: "currentLoadState" }] : []));
+    remoteResolvedData = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedData" }] : []));
     remoteRuntimeState = signal('idle', ...(ngDevMode ? [{ debugName: "remoteRuntimeState" }] : []));
     remoteTechnicalError = signal(null, ...(ngDevMode ? [{ debugName: "remoteTechnicalError" }] : []));
+    runtimeChartDocument = signal(null, ...(ngDevMode ? [{ debugName: "runtimeChartDocument" }] : []));
+    mappedRuntimeConfig = signal(null, ...(ngDevMode ? [{ debugName: "mappedRuntimeConfig" }] : []));
+    chartDocumentMappingError = signal(null, ...(ngDevMode ? [{ debugName: "chartDocumentMappingError" }] : []));
+    fillContainerHeight = signal(false, ...(ngDevMode ? [{ debugName: "fillContainerHeight" }] : []));
     previousRemoteSignature = null;
-    resolvedRows = computed(() => {
+    previousDocumentSignature = null;
+    editorSessionSubscriptions = [];
+    effectiveConfig = computed(() => {
+        const base = this.mappedRuntimeConfig() ?? this.config();
+        const runtimeFilters = normalizeFilterCriteria(this.filterCriteria());
+        if (!runtimeFilters || base.dataSource?.kind !== 'remote' || !base.dataSource.query) {
+            return base;
+        }
+        return mergeRemoteFilterCriteria(base, runtimeFilters);
+    }, ...(ngDevMode ? [{ debugName: "effectiveConfig" }] : []));
+    resolvedData = computed(() => {
+        const inputData = this.data();
+        if (inputData !== null && inputData !== undefined) {
+            return inputData;
+        }
+        const remoteData = this.remoteResolvedData();
+        if (remoteData !== null) {
+            return remoteData;
+        }
+        const dataSource = this.effectiveConfig().dataSource;
+        if (dataSource?.kind === 'local') {
+            return dataSource.items ?? [];
+        }
+        return [];
+    }, ...(ngDevMode ? [{ debugName: "resolvedData" }] : []));
+    resolvedHeight = computed(() => {
+        if (this.fillContainerHeight()) {
+            return '100%';
+        }
+        const value = this.effectiveConfig().height;
+        if (typeof value === 'number')
+            return `${value}px`;
+        return value || 'var(--praxis-chart-runtime-height, 320px)';
+    }, ...(ngDevMode ? [{ debugName: "resolvedHeight" }] : []));
+    renderConfig = computed(() => {
+        const config = this.effectiveConfig();
         const explicitData = this.data();
+        const remoteState = this.remoteRuntimeState();
+        const remoteData = this.remoteResolvedData();
         if (explicitData !== null && explicitData !== undefined) {
-            return explicitData;
+            return config;
         }
-        return this.remoteResolvedRows() ?? [];
-    }, ...(ngDevMode ? [{ debugName: "resolvedRows" }] : []));
-    tableId = computed(() => `${this.config().id || 'praxis-chart'}-showcase-table`, ...(ngDevMode ? [{ debugName: "tableId" }] : []));
-    resolvedTitle = computed(() => resolveText(this.config().title) || 'Tabela analitica', ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : []));
-    resolvedSubtitle = computed(() => resolveText(this.config().subtitle) || 'Mesmo dataset em visualizacao tabular', ...(ngDevMode ? [{ debugName: "resolvedSubtitle" }] : []));
-    loadingLabel = computed(() => resolveText(this.config().state?.loadingLabel) || 'Carregando analytics...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
-    errorTitle = computed(() => this.remoteTechnicalError()
-        || resolveText(this.config().state?.error?.title)
-        || 'Falha no contrato analitico', ...(ngDevMode ? [{ debugName: "errorTitle" }] : []));
-    errorDescription = computed(() => resolveText(this.config().state?.error?.description), ...(ngDevMode ? [{ debugName: "errorDescription" }] : []));
-    stateMode = computed(() => resolveShowcaseStateMode(this.config(), this.remoteRuntimeState()), ...(ngDevMode ? [{ debugName: "stateMode" }] : []));
-    tableConfig = computed(() => buildTableConfig(this.config(), this.resolvedRows()), ...(ngDevMode ? [{ debugName: "tableConfig" }] : []));
+        if (config.dataSource?.kind !== 'remote') {
+            return config;
+        }
+        if (remoteState === 'loading') {
+            return {
+                ...config,
+                preferredLoadState: 'loading',
+            };
+        }
+        if (remoteState === 'error') {
+            return {
+                ...config,
+                preferredLoadState: 'error',
+                state: config.state?.error
+                    ? {
+                        ...config.state,
+                        error: {
+                            ...config.state.error,
+                            technicalDetails: this.remoteTechnicalError() ?? config.state.error.technicalDetails,
+                        },
+                    }
+                    : config.state,
+            };
+        }
+        if (remoteData !== null) {
+            return {
+                ...config,
+                preferredLoadState: undefined,
+                series: config.series.map((series) => ({
+                    ...series,
+                    metric: {
+                        ...series.metric,
+                        aggregation: 'sum',
+                        field: series.metric?.field || 'value',
+                    },
+                })),
+            };
+        }
+        return config;
+    }, ...(ngDevMode ? [{ debugName: "renderConfig" }] : []));
+    loadingLabel = computed(() => this.i18n.resolve(this.renderConfig().state?.loadingLabel), ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+    emptyTitle = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.title), ...(ngDevMode ? [{ debugName: "emptyTitle" }] : []));
+    emptyDescription = computed(() => this.i18n.resolve(this.renderConfig().emptyState?.description), ...(ngDevMode ? [{ debugName: "emptyDescription" }] : []));
+    errorTitle = computed(() => this.chartDocumentMappingError()
+        ? this.i18n.resolve({
+            key: 'praxis.charts.runtime.invalidDocumentTitle',
+            text: 'Chart configuration is invalid',
+        })
+        : this.i18n.resolve(this.renderConfig().state?.error?.title), ...(ngDevMode ? [{ debugName: "errorTitle" }] : []));
+    errorDescription = computed(() => this.chartDocumentMappingError()
+        ? this.i18n.resolve({
+            key: 'praxis.charts.runtime.invalidDocumentDescription',
+            text: 'The canonical chart document could not be mapped to the current Praxis chart runtime. Review the chart contract before continuing.',
+        })
+        : this.i18n.resolve(this.renderConfig().state?.error?.description), ...(ngDevMode ? [{ debugName: "errorDescription" }] : []));
+    editChartLabel = computed(() => this.i18n.resolve({ key: 'praxis.charts.runtime.editChart', text: 'Edit chart settings' }), ...(ngDevMode ? [{ debugName: "editChartLabel" }] : []));
+    loadState = computed(() => {
+        if (this.chartDocumentMappingError()) {
+            return 'error';
+        }
+        const config = this.renderConfig();
+        if (config.preferredLoadState === 'loading')
+            return 'loading';
+        if (config.preferredLoadState === 'error')
+            return 'error';
+        const dataSource = config.dataSource;
+        const explicitData = this.data();
+        if (dataSource?.kind === 'remote' && (explicitData === null || explicitData === undefined)) {
+            return this.remoteRuntimeState() === 'ready' ? 'ready' : 'loading';
+        }
+        const transformed = this.transformer.transform(config, this.resolvedData());
+        return transformed.hasData ? 'ready' : 'empty';
+    }, ...(ngDevMode ? [{ debugName: "loadState" }] : []));
     constructor() {
+        afterNextRender(() => {
+            this.observeShellSizingContext();
+        });
         effect(() => {
-            const config = this.config();
+            const document = this.chartDocument();
+            const signature = document ? JSON.stringify(document) : null;
+            if (signature === this.previousDocumentSignature) {
+                return;
+            }
+            this.previousDocumentSignature = signature;
+            this.runtimeChartDocument.set(document ? structuredClone(document) : null);
+        });
+        effect(() => {
+            const runtimeDocument = this.runtimeChartDocument();
+            if (!runtimeDocument) {
+                this.mappedRuntimeConfig.set(null);
+                this.chartDocumentMappingError.set(null);
+                return;
+            }
+            try {
+                this.mappedRuntimeConfig.set(this.canonicalMapper.toPraxisChartConfig(runtimeDocument));
+                this.chartDocumentMappingError.set(null);
+            }
+            catch (error) {
+                this.mappedRuntimeConfig.set(null);
+                this.chartDocumentMappingError.set(error instanceof Error && error.message.trim()
+                    ? error.message
+                    : 'Invalid x-ui.chart document for Praxis chart runtime.');
+            }
+        });
+        effect(() => {
+            const config = this.effectiveConfig();
             const explicitData = this.data();
             const nextSignature = explicitData === null || explicitData === undefined
-                ? buildRemoteSignature(config)
+                ? this.buildRemoteSignature(config)
                 : null;
             if (nextSignature === this.previousRemoteSignature) {
                 return;
             }
             this.previousRemoteSignature = nextSignature;
-            this.remoteResolvedRows.set(null);
+            this.remoteResolvedData.set(null);
             this.remoteRuntimeState.set('idle');
             this.remoteTechnicalError.set(null);
         });
         effect(() => {
-            const config = this.config();
+            const nextState = this.loadState();
+            if (this.currentLoadState() !== nextState) {
+                this.currentLoadState.set(nextState);
+                this.loadStateChange.emit(nextState);
+            }
+        });
+        effect(() => {
+            const effectiveConfig = this.effectiveConfig();
             const explicitData = this.data();
-            if (this.viewMode() !== 'table') {
+            if (effectiveConfig.dataSource?.kind !== 'remote' || (explicitData !== null && explicitData !== undefined)) {
                 return;
             }
-            if (config.dataSource?.kind !== 'remote' || (explicitData !== null && explicitData !== undefined)) {
+            if (this.remoteRuntimeState() === 'loading' || this.remoteResolvedData() !== null) {
+                return;
+            }
+            const event = {
+                chartId: effectiveConfig.id,
+                dataSource: effectiveConfig.dataSource,
+                query: effectiveConfig.dataSource.query,
+            };
+            this.queryRequest.emit(event);
+            this.remoteRuntimeState.set('loading');
+            this.remoteResolvedData.set([]);
+            this.remoteTechnicalError.set(null);
+            this.statsApi.execute(event, effectiveConfig)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (rows) => {
+                    this.remoteResolvedData.set(rows);
+                    this.remoteRuntimeState.set('ready');
+                    this.remoteTechnicalError.set(null);
+                },
+                error: (error) => {
+                    this.remoteResolvedData.set([]);
+                    this.remoteRuntimeState.set('error');
+                    this.remoteTechnicalError.set(error instanceof Error && error.message.trim()
+                        ? error.message
+                        : 'praxis.stats request failed');
+                },
+            });
+        });
+        effect(() => {
+            if (this.loadState() !== 'ready') {
+                this.engine.destroy();
+                return;
+            }
+            const host = this.chartHost()?.nativeElement;
+            if (!host)
+                return;
+            this.engine.render(host, {
+                config: this.renderConfig(),
+                data: this.resolvedData(),
+                onPointClick: (event) => this.pointClick.emit(event),
+            });
+            this.ensureResizeObserver(host);
+        });
+        this.destroyRef.onDestroy(() => {
+            this.clearEditorSessionSubscriptions();
+            this.resizeObserver()?.disconnect();
+            this.shellObserver()?.disconnect();
+            this.engine.destroy();
+        });
+    }
+    canOpenConfigEditor() {
+        return this.enableCustomization() && !!this.settingsPanel && !!this.runtimeChartDocument();
+    }
+    async openConfigEditor() {
+        if (!this.settingsPanel) {
+            return;
+        }
+        const document = this.runtimeChartDocument();
+        if (!document) {
+            return;
+        }
+        const { PraxisChartConfigEditor } = await Promise.resolve().then(function () { return praxisChartConfigEditor; });
+        this.clearEditorSessionSubscriptions();
+        const ref = this.settingsPanel.open({
+            id: `chart.${document.chartId || this.effectiveConfig().id || 'praxis-chart'}`,
+            title: this.editChartLabel(),
+            content: {
+                component: PraxisChartConfigEditor,
+                inputs: {
+                    chartDocument: document,
+                    document,
+                    mode: 'edit',
+                    readonly: false,
+                    availableResources: this.availableResources(),
+                    availableFields: this.availableFields(),
+                    availableTargets: this.availableTargets(),
+                },
+            },
+        });
+        const appliedSubscription = ref.applied$
+            .subscribe((nextDocument) => {
+            if (!nextDocument) {
                 return;
             }
-            if (this.remoteRuntimeState() === 'loading' || this.remoteResolvedRows() !== null) {
+            const clone = structuredClone(nextDocument);
+            this.runtimeChartDocument.set(clone);
+            this.chartDocumentApplied.emit(clone);
+        });
+        const savedSubscription = ref.saved$
+            .subscribe((nextDocument) => {
+            if (!nextDocument) {
                 return;
             }
-            const event = {
-                chartId: config.id,
-                dataSource: config.dataSource,
-                query: config.dataSource.query,
-            };
-            this.queryRequest.emit(event);
-            this.remoteRuntimeState.set('loading');
-            this.remoteResolvedRows.set([]);
-            this.remoteTechnicalError.set(null);
-            this.statsApi.execute(event, config)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: (rows) => {
-                    this.remoteResolvedRows.set(rows);
-                    this.remoteRuntimeState.set('ready');
-                    this.remoteTechnicalError.set(null);
-                },
-                error: (error) => {
-                    this.remoteResolvedRows.set([]);
-                    this.remoteRuntimeState.set('error');
-                    this.remoteTechnicalError.set(error instanceof Error && error.message.trim()
-                        ? error.message
-                        : 'praxis.stats request failed');
-                },
-            });
+            const clone = structuredClone(nextDocument);
+            this.runtimeChartDocument.set(clone);
+            this.chartDocumentSaved.emit(clone);
         });
+        this.editorSessionSubscriptions = [appliedSubscription, savedSubscription];
     }
-    handleRowClick(event) {
-        const row = event?.row;
-        if (!row) {
+    ensureResizeObserver(host) {
+        if (this.resizeObserver()) {
             return;
         }
-        const config = this.config();
-        const primarySeries = config.series[0];
-        const categoryField = primarySeries?.categoryField || config.axes?.x?.field;
-        const metricField = primarySeries?.metric?.field;
-        this.pointClick.emit({
-            chartId: config.id,
-            seriesId: primarySeries?.id,
-            seriesName: primarySeries?.name,
-            category: categoryField ? stringifyCell(row[categoryField]) : undefined,
-            value: metricField ? row[metricField] : undefined,
-            data: row,
+        const observer = new ResizeObserver(() => {
+            this.engine.resize();
         });
+        observer.observe(host);
+        this.resizeObserver.set(observer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartShowcaseWidgetComponent, isStandalone: true, selector: "praxis-chart-showcase-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: `
-    @if (viewMode() === 'chart') {
-      <praxis-chart
-        [config]="config()"
-        [data]="data()"
-        (pointClick)="pointClick.emit($event)"
-        (queryRequest)="queryRequest.emit($event)"
-        (loadStateChange)="loadStateChange.emit($event)"
-      ></praxis-chart>
-    } @else if (stateMode() === 'loading') {
-      <section class="showcase-state-card">
-        <h4>{{ loadingLabel() }}</h4>
-      </section>
-    } @else if (stateMode() === 'error') {
-      <section class="showcase-state-card showcase-state-card-error">
-        <h4>{{ errorTitle() }}</h4>
-        @if (errorDescription()) {
-          <p>{{ errorDescription() }}</p>
+    buildRemoteSignature(config) {
+        if (config.dataSource?.kind !== 'remote') {
+            return null;
         }
-      </section>
-    } @else {
-      <praxis-table
-        [config]="tableConfig()"
-        [data]="resolvedRows()"
-        [tableId]="tableId()"
-        [title]="resolvedTitle()"
-        [subtitle]="resolvedSubtitle()"
-        [icon]="'table_view'"
-        (rowClick)="handleRowClick($event)"
-      ></praxis-table>
+        return JSON.stringify({
+            id: config.id,
+            resourcePath: config.dataSource.resourcePath,
+            query: config.dataSource.query,
+        });
+    }
+    clearEditorSessionSubscriptions() {
+        for (const subscription of this.editorSessionSubscriptions) {
+            subscription.unsubscribe();
+        }
+        this.editorSessionSubscriptions = [];
+    }
+    observeShellSizingContext() {
+        const host = this.hostElement.nativeElement;
+        const shell = host.closest('.pdx-shell');
+        if (!shell) {
+            this.fillContainerHeight.set(false);
+            return;
+        }
+        const syncShellMode = () => {
+            this.fillContainerHeight.set(shell.classList.contains('expanded') || shell.classList.contains('fullscreen'));
+            this.scheduleResizeAfterShellModeChange();
+        };
+        syncShellMode();
+        const observer = new MutationObserver(() => {
+            syncShellMode();
+        });
+        observer.observe(shell, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        this.shellObserver.set(observer);
+    }
+    scheduleResizeAfterShellModeChange() {
+        const runResize = () => {
+            this.engine.resize();
+        };
+        if (typeof requestAnimationFrame === 'function') {
+            requestAnimationFrame(() => {
+                runResize();
+                requestAnimationFrame(() => {
+                    runResize();
+                });
+            });
+            return;
+        }
+        setTimeout(() => {
+            runResize();
+        }, 0);
     }
-  `, isInline: true, styles: [":host{display:block;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data"], outputs: ["pointClick", "queryRequest", "loadStateChange"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "editModeEnabled", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartComponent, isStandalone: true, selector: "praxis-chart", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, filterCriteria: { classPropertyName: "filterCriteria", publicName: "filterCriteria", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, availableResources: { classPropertyName: "availableResources", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFields: { classPropertyName: "availableFields", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargets: { classPropertyName: "availableTargets", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange", chartDocumentApplied: "chartDocumentApplied", chartDocumentSaved: "chartDocumentSaved" }, providers: [
+            EChartsEngineAdapter,
+            {
+                provide: PRAXIS_CHART_ENGINE,
+                useExisting: EChartsEngineAdapter,
+            },
+        ], viewQueries: [{ propertyName: "chartHost", first: true, predicate: ["chartHost"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <section class="praxis-chart-shell" [style.height]="resolvedHeight()">
+      @if (canOpenConfigEditor()) {
+        <button
+          class="praxis-chart-settings-trigger"
+          mat-icon-button
+          type="button"
+          [attr.aria-label]="editChartLabel()"
+          [matTooltip]="editChartLabel()"
+          (click)="openConfigEditor()"
+        >
+          <mat-icon>tune</mat-icon>
+        </button>
+      }
+
+      @if (loadState() === 'loading') {
+        <div class="praxis-chart-state praxis-chart-state-loading">
+          <div class="praxis-chart-spinner" aria-hidden="true"></div>
+          @if (loadingLabel()) {
+            <div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
+          }
+        </div>
+      } @else if (loadState() === 'error') {
+        <div class="praxis-chart-state praxis-chart-state-error">
+          @if (errorTitle()) {
+            <div class="praxis-chart-state-title">{{ errorTitle() }}</div>
+          }
+          @if (errorDescription()) {
+            <div class="praxis-chart-state-description">{{ errorDescription() }}</div>
+          }
+        </div>
+      } @else if (loadState() === 'empty') {
+        <div class="praxis-chart-state praxis-chart-state-empty">
+          @if (emptyTitle()) {
+            <div class="praxis-chart-state-title">{{ emptyTitle() }}</div>
+          }
+          @if (emptyDescription()) {
+            <div class="praxis-chart-state-description">{{ emptyDescription() }}</div>
+          }
+        </div>
+      } @else {
+        <div #chartHost class="praxis-chart-host"></div>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;place-content:center;gap:10px;padding:24px;text-align:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-spinner{width:34px;height:34px;margin-inline:auto;border-radius:999px;border:3px solid rgba(18,99,180,.18);border-top-color:#1263b4d1;animation:praxis-chart-spin .8s linear infinite}@keyframes praxis-chart-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'praxis-chart-showcase-widget', standalone: true, imports: [CommonModule, PraxisChartComponent, PraxisTable], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    @if (viewMode() === 'chart') {
+            args: [{ selector: 'praxis-chart', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule, MatTooltipModule], providers: [
+                        EChartsEngineAdapter,
+                        {
+                            provide: PRAXIS_CHART_ENGINE,
+                            useExisting: EChartsEngineAdapter,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="praxis-chart-shell" [style.height]="resolvedHeight()">
+      @if (canOpenConfigEditor()) {
+        <button
+          class="praxis-chart-settings-trigger"
+          mat-icon-button
+          type="button"
+          [attr.aria-label]="editChartLabel()"
+          [matTooltip]="editChartLabel()"
+          (click)="openConfigEditor()"
+        >
+          <mat-icon>tune</mat-icon>
+        </button>
+      }
+
+      @if (loadState() === 'loading') {
+        <div class="praxis-chart-state praxis-chart-state-loading">
+          <div class="praxis-chart-spinner" aria-hidden="true"></div>
+          @if (loadingLabel()) {
+            <div class="praxis-chart-state-title">{{ loadingLabel() }}</div>
+          }
+        </div>
+      } @else if (loadState() === 'error') {
+        <div class="praxis-chart-state praxis-chart-state-error">
+          @if (errorTitle()) {
+            <div class="praxis-chart-state-title">{{ errorTitle() }}</div>
+          }
+          @if (errorDescription()) {
+            <div class="praxis-chart-state-description">{{ errorDescription() }}</div>
+          }
+        </div>
+      } @else if (loadState() === 'empty') {
+        <div class="praxis-chart-state praxis-chart-state-empty">
+          @if (emptyTitle()) {
+            <div class="praxis-chart-state-title">{{ emptyTitle() }}</div>
+          }
+          @if (emptyDescription()) {
+            <div class="praxis-chart-state-description">{{ emptyDescription() }}</div>
+          }
+        </div>
+      } @else {
+        <div #chartHost class="praxis-chart-host"></div>
+      }
+    </section>
+  `, styles: [":host{display:block;height:100%;min-width:0}:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{position:relative;width:100%;height:100%;min-height:240px;border-radius:18px;overflow:hidden;background:radial-gradient(circle at top left,rgba(18,99,180,.12),transparent 38%),linear-gradient(180deg,#1263b408,#1263b400);border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent)}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 88%,rgba(18,99,180,.12));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-host{width:100%;height:100%}.praxis-chart-state{height:100%;min-height:240px;display:grid;place-content:center;gap:10px;padding:24px;text-align:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.praxis-chart-state-description{font-size:.925rem;color:var(--md-sys-color-on-surface-variant, #5a5d67);max-width:36rem}.praxis-chart-spinner{width:34px;height:34px;margin-inline:auto;border-radius:999px;border:3px solid rgba(18,99,180,.18);border-top-color:#1263b4d1;animation:praxis-chart-spin .8s linear infinite}@keyframes praxis-chart-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
+function normalizeFilterCriteria(criteria) {
+    if (!criteria)
+        return null;
+    const next = Object.entries(criteria).reduce((acc, [key, value]) => {
+        if (value === null || value === undefined)
+            return acc;
+        if (Array.isArray(value) && value.length === 0)
+            return acc;
+        if (typeof value === 'string' && value.trim() === '')
+            return acc;
+        acc[key] = value;
+        return acc;
+    }, {});
+    return Object.keys(next).length ? next : null;
+}
+function mergeRemoteFilterCriteria(config, runtimeFilters) {
+    const dataSource = config.dataSource;
+    if (dataSource?.kind !== 'remote' || !dataSource.query)
+        return config;
+    const query = dataSource.query;
+    const nextFilters = {
+        ...(query.filters || {}),
+        ...runtimeFilters,
+    };
+    const statsRequest = query.statsRequest && typeof query.statsRequest === 'object'
+        ? {
+            ...query.statsRequest,
+            filter: {
+                ...((query.statsRequest.filter) || {}),
+                ...runtimeFilters,
+            },
+        }
+        : query.statsRequest;
+    return {
+        ...config,
+        dataSource: {
+            ...dataSource,
+            query: {
+                ...query,
+                filters: nextFilters,
+                statsRequest,
+            },
+        },
+    };
+}
+
+const PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH = {
+    Jan: [
+        { segment: 'Enterprise', total: 52000 },
+        { segment: 'Mid-market', total: 38000 },
+        { segment: 'SMB', total: 30000 },
+    ],
+    Fev: [
+        { segment: 'Enterprise', total: 61000 },
+        { segment: 'Mid-market', total: 42000 },
+        { segment: 'SMB', total: 35000 },
+    ],
+    Mar: [
+        { segment: 'Enterprise', total: 68000 },
+        { segment: 'Mid-market', total: 47000 },
+        { segment: 'SMB', total: 36000 },
+    ],
+    Abr: [
+        { segment: 'Enterprise', total: 64000 },
+        { segment: 'Mid-market', total: 49500 },
+        { segment: 'SMB', total: 36000 },
+    ],
+};
+
+class PraxisChartDrilldownPanelComponent {
+    title = input('Detalhamento por segmento', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    selection = input(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    activeCategory = computed(() => {
+        const raw = this.selection()?.category;
+        return typeof raw === 'string' ? raw : null;
+    }, ...(ngDevMode ? [{ debugName: "activeCategory" }] : []));
+    detailData = computed(() => {
+        const category = this.activeCategory();
+        if (!category)
+            return [];
+        return PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH[category] ?? [];
+    }, ...(ngDevMode ? [{ debugName: "detailData" }] : []));
+    detailChartConfig = computed(() => {
+        const category = this.activeCategory();
+        return {
+            id: 'chart-drilldown-detail',
+            type: 'donut',
+            title: { text: category ? `Mix de receita em ${category}` : 'Aguardando selecao' },
+            subtitle: { text: category ? 'Drill-down local com JSON mockado' : 'Selecione um ponto no chart principal' },
+            height: 280,
+            series: [
+                {
+                    id: 'segmentMix',
+                    categoryField: 'segment',
+                    metric: { field: 'total', aggregation: 'sum' },
+                    labels: { visible: true },
+                },
+            ],
+            emptyState: {
+                title: { text: 'Nenhum recorte selecionado' },
+                description: { text: 'O painel de drill-down usa mocks locais e reage ao pointClick do chart principal.' },
+            },
+            theme: {
+                palette: ['#1263b4', '#2b8a3e', '#f08c00', '#7b61ff'],
+            },
+        };
+    }, ...(ngDevMode ? [{ debugName: "detailChartConfig" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDrilldownPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartDrilldownPanelComponent, isStandalone: true, selector: "praxis-chart-drilldown-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <section class="drilldown-shell">
+      <header class="drilldown-header">
+        <p class="drilldown-eyebrow">Drill-down local</p>
+        <h3>{{ title() }}</h3>
+        @if (activeCategory()) {
+          <p class="drilldown-description">Recorte atual: {{ activeCategory() }}</p>
+        } @else {
+          <p class="drilldown-description">Clique em uma barra do chart principal para abrir o detalhamento local.</p>
+        }
+      </header>
+
       <praxis-chart
-        [config]="config()"
-        [data]="data()"
-        (pointClick)="pointClick.emit($event)"
-        (queryRequest)="queryRequest.emit($event)"
-        (loadStateChange)="loadStateChange.emit($event)"
+        [config]="detailChartConfig()"
+        [data]="detailData()"
       ></praxis-chart>
-    } @else if (stateMode() === 'loading') {
-      <section class="showcase-state-card">
-        <h4>{{ loadingLabel() }}</h4>
-      </section>
-    } @else if (stateMode() === 'error') {
-      <section class="showcase-state-card showcase-state-card-error">
-        <h4>{{ errorTitle() }}</h4>
-        @if (errorDescription()) {
-          <p>{{ errorDescription() }}</p>
-        }
-      </section>
-    } @else {
-      <praxis-table
-        [config]="tableConfig()"
-        [data]="resolvedRows()"
-        [tableId]="tableId()"
-        [title]="resolvedTitle()"
-        [subtitle]="resolvedSubtitle()"
-        [icon]="'table_view'"
-        (rowClick)="handleRowClick($event)"
-      ></praxis-table>
-    }
-  `, styles: [":host{display:block;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
-function resolveShowcaseStateMode(config, remoteRuntimeState = 'idle') {
-    if (config.preferredLoadState === 'loading') {
-        return 'loading';
-    }
-    if (config.preferredLoadState === 'error') {
-        return 'error';
-    }
-    if (config.dataSource?.kind === 'remote' && remoteRuntimeState === 'error') {
-        return 'error';
-    }
-    if (config.dataSource?.kind === 'remote' && remoteRuntimeState !== 'ready') {
-        return 'loading';
-    }
-    return 'ready';
+    </section>
+  `, isInline: true, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-function buildTableConfig(config, rows) {
-    const tableConfig = createDefaultTableConfig();
-    const toolbar = tableConfig.toolbar;
-    const behavior = tableConfig.behavior;
-    const pagination = behavior.pagination;
-    const sorting = behavior.sorting;
-    const filtering = behavior.filtering;
-    const selection = behavior.selection;
-    const localDataMode = behavior.localDataMode;
-    const actions = tableConfig.actions;
-    const rowActions = actions.row;
-    const bulkActions = actions.bulk;
-    const appearance = tableConfig.appearance;
-    const categoryField = config.axes?.x?.field || config.series[0]?.categoryField;
-    const categoryLabel = config.axes?.x?.label || categoryField;
-    const sampleRow = rows[0] || {};
-    const seriesColumns = config.series
-        .map((series) => {
-        const field = series.metric?.field || series.categoryField;
-        if (!field) {
-            return null;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDrilldownPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-chart-drilldown-panel', standalone: true, imports: [CommonModule, PraxisChartComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="drilldown-shell">
+      <header class="drilldown-header">
+        <p class="drilldown-eyebrow">Drill-down local</p>
+        <h3>{{ title() }}</h3>
+        @if (activeCategory()) {
+          <p class="drilldown-description">Recorte atual: {{ activeCategory() }}</p>
+        } @else {
+          <p class="drilldown-description">Clique em uma barra do chart principal para abrir o detalhamento local.</p>
         }
-        return {
-            field,
-            header: series.name || series.metric?.label || field,
-        };
-    })
-        .filter((column) => column !== null);
-    const fallbackColumns = Object.keys(sampleRow).map((field) => ({
-        field,
-        header: field,
-    }));
-    const categoryColumn = categoryField
-        ? [{
-                field: categoryField,
-                header: categoryLabel || categoryField,
-            }]
-        : [];
-    const dedupedColumns = [...categoryColumn, ...seriesColumns, ...fallbackColumns].filter((column, index, source) => source.findIndex((candidate) => candidate.field === column.field) === index);
-    tableConfig.columns = dedupedColumns;
-    toolbar.visible = false;
-    pagination.enabled = rows.length > 10;
-    sorting.enabled = true;
-    filtering.enabled = false;
-    selection.enabled = false;
-    localDataMode.enabled = true;
-    rowActions.enabled = false;
-    rowActions.actions = [];
-    bulkActions.enabled = false;
-    bulkActions.actions = [];
-    appearance.density = 'comfortable';
-    return tableConfig;
-}
-function resolveText(value) {
-    if (typeof value === 'string') {
-        return value;
-    }
-    if (value && typeof value === 'object' && 'text' in value) {
-        const text = value.text;
-        return typeof text === 'string' ? text : '';
-    }
-    return '';
-}
-function stringifyCell(value) {
-    if (value === null || value === undefined) {
-        return undefined;
-    }
-    return String(value);
-}
-function buildRemoteSignature(config) {
-    if (config.dataSource?.kind !== 'remote') {
-        return null;
-    }
-    return JSON.stringify({
-        id: config.id,
-        resourcePath: config.dataSource.resourcePath,
-        query: config.dataSource.query,
-    });
+      </header>
+
+      <praxis-chart
+        [config]="detailChartConfig()"
+        [data]="detailData()"
+      ></praxis-chart>
+    </section>
+  `, styles: [":host{display:block}.drilldown-shell{display:grid;gap:14px}.drilldown-header h3,.drilldown-eyebrow,.drilldown-description{margin:0}.drilldown-eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--md-sys-color-on-surface-variant, #5a5d67)}.drilldown-header h3{font-size:1.2rem;color:var(--md-sys-color-on-surface, #1a1b20)}.drilldown-description{color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }] } });
+
+class PraxisChartStateProbeComponent {
+    title = input('Chart Runtime Probe', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    serializedValue = computed(() => JSON.stringify(this.value(), null, 2), ...(ngDevMode ? [{ debugName: "serializedValue" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStateProbeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartStateProbeComponent, isStandalone: true, selector: "praxis-chart-state-probe", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <section class="probe-shell">
+      <header class="probe-header">
+        <p class="probe-eyebrow">Probe</p>
+        <h3>{{ title() }}</h3>
+      </header>
+
+      @if (value() === null || value() === undefined || value() === '') {
+        <div class="probe-empty">Aguardando eventos do runtime.</div>
+      } @else {
+        <pre>{{ serializedValue() }}</pre>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block}.probe-shell{display:grid;gap:12px;min-height:220px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#0b111ff5,#0b111fe0),radial-gradient(circle at top right,rgba(18,99,180,.32),transparent 35%);color:#d7e6ff}.probe-header h3,.probe-eyebrow{margin:0}.probe-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#d7e6ffb3}.probe-empty{color:#d7e6ffc7}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.45}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartStateProbeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-chart-state-probe', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="probe-shell">
+      <header class="probe-header">
+        <p class="probe-eyebrow">Probe</p>
+        <h3>{{ title() }}</h3>
+      </header>
 
-const PRAXIS_CHART_SHOWCASE_WIDGET_METADATA = {
-    id: 'praxis-chart-showcase-widget',
-    componentType: 'praxis-chart-showcase-widget',
-    displayName: 'Praxis Chart Showcase Widget',
-    selector: 'praxis-chart-showcase-widget',
-    component: PraxisChartShowcaseWidgetComponent,
-    friendlyName: 'Praxis Chart Showcase Widget',
-    description: 'Showcase-only widget that toggles between Praxis chart and Praxis table using the same dataset.',
-    icon: 'swap_horiz',
-    tags: ['chart', 'table', 'showcase', 'analytics'],
+      @if (value() === null || value() === undefined || value() === '') {
+        <div class="probe-empty">Aguardando eventos do runtime.</div>
+      } @else {
+        <pre>{{ serializedValue() }}</pre>
+      }
+    </section>
+  `, styles: [":host{display:block}.probe-shell{display:grid;gap:12px;min-height:220px;padding:18px;border-radius:20px;background:linear-gradient(180deg,#0b111ff5,#0b111fe0),radial-gradient(circle at top right,rgba(18,99,180,.32),transparent 35%);color:#d7e6ff}.probe-header h3,.probe-eyebrow{margin:0}.probe-eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:#d7e6ffb3}.probe-empty{color:#d7e6ffc7}pre{margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;font-size:.84rem;line-height:1.45}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
+
+const PRAXIS_CHART_COMPONENT_METADATA = {
+    id: 'praxis-chart',
+    componentType: 'praxis-chart',
+    displayName: 'Praxis Chart',
+    selector: 'praxis-chart',
+    component: PraxisChartComponent,
+    friendlyName: 'Praxis Chart',
+    description: 'Chart component for analytics and metadata-driven visualizations in Praxis UI.',
+    icon: 'bar_chart',
+    tags: ['chart', 'analytics', 'widget', 'visualization'],
     lib: '@praxisui/charts',
     inputs: [
         {
             name: 'config',
             type: 'PraxisChartConfig',
-            description: 'Chart configuration preserved across chart and table views.',
+            description: 'Declarative chart configuration with metadata-oriented semantics.',
         },
         {
             name: 'data',
             type: 'PraxisChartDataRow[]',
-            description: 'Local dataset shared by the chart and table renderers.',
+            description: 'Optional local dataset that takes precedence over local datasource items.',
         },
         {
-            name: 'viewMode',
-            type: "'chart' | 'table'",
-            description: 'Current showcase view mode.',
+            name: 'chartDocument',
+            type: 'PraxisXUiChartContract | null',
+            description: 'Optional canonical x-ui.chart document used as the authoring source of truth for settings-panel integration.',
+        },
+        {
+            name: 'filterCriteria',
+            type: 'Record<string, unknown> | null',
+            description: 'Declarative filter criteria merged into remote datasource queries, enabling dynamic-page connections without host orchestration.',
+        },
+        {
+            name: 'enableCustomization',
+            type: 'boolean',
+            description: 'When true and a settings-panel bridge is available, exposes the chart config editor from the runtime.',
+            default: false,
         },
     ],
     outputs: [
         {
             name: 'pointClick',
             type: 'PraxisChartPointEvent',
-            description: 'Forwards point selection from the chart or mapped row selection from the table.',
+            description: 'Emitted when the host wants to react to a point/series click.',
+        },
+        {
+            name: 'queryRequest',
+            type: 'PraxisChartQueryRequestEvent',
+            description: 'Emitted before a remote praxis.stats datasource is resolved, allowing host-side observability of the outgoing request.',
+        },
+        {
+            name: 'loadStateChange',
+            type: 'PraxisChartLoadState',
+            description: 'Emitted when the chart state changes.',
+        },
+        {
+            name: 'chartDocumentApplied',
+            type: 'PraxisXUiChartContract',
+            description: 'Emitted when the runtime chart editor applies a canonical x-ui.chart document through the settings panel bridge.',
+        },
+        {
+            name: 'chartDocumentSaved',
+            type: 'PraxisXUiChartContract',
+            description: 'Emitted when the runtime chart editor saves a canonical x-ui.chart document through the settings panel bridge.',
+        },
+    ],
+    actions: [
+        {
+            id: 'open-chart-editor',
+            label: 'Open Chart Editor',
+            icon: 'tune',
+            description: 'Opens the canonical chart config editor when the host provides a settings panel bridge and chartDocument.',
+            command: 'openConfigEditor',
+            scope: 'toolbar',
         },
+    ],
+};
+function providePraxisChartsMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PRAXIS_CHART_COMPONENT_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
+const PRAXIS_CHART_DRILLDOWN_PANEL_METADATA = {
+    id: 'praxis-chart-drilldown-panel',
+    componentType: 'praxis-chart-drilldown-panel',
+    displayName: 'Praxis Chart Drilldown Panel',
+    selector: 'praxis-chart-drilldown-panel',
+    component: PraxisChartDrilldownPanelComponent,
+    friendlyName: 'Praxis Chart Drilldown Panel',
+    description: 'Local drill-down panel that consumes chart point events and renders a derived detail chart.',
+    icon: 'query_stats',
+    tags: ['chart', 'drilldown', 'widget', 'analytics'],
+    lib: '@praxisui/charts',
+    inputs: [
         {
-            name: 'queryRequest',
-            type: 'PraxisChartQueryRequestEvent',
-            description: 'Forwards remote chart data requests.',
+            name: 'title',
+            type: 'string',
+            description: 'Panel title for the drill-down view.',
         },
         {
-            name: 'loadStateChange',
-            type: 'PraxisChartLoadState',
-            description: 'Forwards chart runtime state transitions.',
+            name: 'selection',
+            type: 'PraxisChartPointEvent',
+            description: 'Event emitted by a source chart and used to resolve local detail datasets.',
         },
     ],
 };
-function providePraxisChartShowcaseWidgetMetadata() {
+function providePraxisChartDrilldownPanelMetadata() {
     return {
         provide: ENVIRONMENT_INITIALIZER,
         multi: true,
         useFactory: (registry) => () => {
-            registry.register(PRAXIS_CHART_SHOWCASE_WIDGET_METADATA);
+            registry.register(PRAXIS_CHART_DRILLDOWN_PANEL_METADATA);
         },
         deps: [ComponentMetadataRegistry],
     };
 }
 
-function providePraxisCharts() {
-    return [
-        EChartsEngineAdapter,
-        {
-            provide: PRAXIS_CHART_ENGINE,
-            useExisting: EChartsEngineAdapter,
-        },
-        providePraxisChartsMetadata(),
-        providePraxisChartDrilldownPanelMetadata(),
-        providePraxisChartStateProbeMetadata(),
-        providePraxisChartShowcaseWidgetMetadata(),
-    ];
-}
-
-class PraxisChartCanonicalContractMapperService {
-    toPraxisChartConfig(contract) {
-        this.assertSupportedContract(contract);
-        return {
-            id: contract.chartId,
-            type: contract.kind,
-            orientation: this.resolveOrientation(contract),
-            title: this.mapTextValue(contract.title),
-            subtitle: this.mapTextValue(contract.subtitle),
-            height: contract.height,
-            axes: this.buildAxes(contract),
-            series: this.buildSeries(contract),
-            dataSource: this.buildDataSource(contract),
-            interactions: this.buildInteractions(contract),
-            theme: this.buildTheme(contract),
-            emptyState: contract.state?.empty
-                ? {
-                    title: this.mapTextValue(contract.state.empty.title),
-                    description: this.mapTextValue(contract.state.empty.description),
-                }
-                : undefined,
-            state: {
-                loadingLabel: this.mapTextValue(contract.state?.loading?.title),
-                error: contract.state?.error
-                    ? {
-                        title: this.mapTextValue(contract.state.error.title),
-                        description: this.mapTextValue(contract.state.error.description),
-                    }
-                    : undefined,
-            },
-        };
-    }
-    assertSupportedContract(contract) {
-        if (contract.source.kind !== 'praxis.stats' && contract.source.kind !== 'derived') {
-            throw new Error(`x-ui.chart source.kind="${contract.source.kind}" is not supported in @praxisui/charts.`);
-        }
-        if (contract.source.kind === 'praxis.stats' && !contract.source.resource?.trim()) {
-            throw new Error('x-ui.chart source.resource is required for source.kind="praxis.stats".');
-        }
-        if (contract.source.kind === 'praxis.stats' && !contract.source.operation) {
-            throw new Error('x-ui.chart source.operation is required for source.kind="praxis.stats".');
-        }
-        if (contract.theme?.palette && typeof contract.theme.palette === 'string') {
-            throw new Error('x-ui.chart theme.palette as palette token reference is not yet implemented in @praxisui/charts.');
-        }
-        if (contract.theme?.variant) {
-            throw new Error('x-ui.chart theme.variant is not yet implemented in @praxisui/charts.');
-        }
-        const aggregations = [
-            ...(contract.metrics?.map((metric) => metric.aggregation).filter(Boolean) ?? []),
-            ...(contract.aggregations?.map((aggregation) => aggregation.operation) ?? []),
-        ];
-        if (aggregations.includes('distinct-count')) {
-            throw new Error('x-ui.chart aggregation "distinct-count" is not yet implemented in @praxisui/charts.');
-        }
-        if (!contract.metrics?.length) {
-            throw new Error('x-ui.chart requires at least one metric for the current @praxisui/charts runtime.');
-        }
-        if (contract.kind !== 'pie' && contract.kind !== 'donut' && !contract.dimensions?.length) {
-            throw new Error('x-ui.chart cartesian charts require at least one dimension in the current @praxisui/charts runtime.');
-        }
-        if ((contract.kind === 'pie' || contract.kind === 'donut') && !contract.dimensions?.[0]?.field) {
-            throw new Error('x-ui.chart pie/donut charts require a first dimension for category mapping.');
-        }
-        if (contract.metrics.length > 1 && (contract.kind === 'pie' || contract.kind === 'donut')) {
-            throw new Error('x-ui.chart pie/donut charts with multiple metrics are not yet implemented in @praxisui/charts.');
-        }
-        if (contract.kind === 'combo') {
-            if (contract.metrics.length < 2) {
-                throw new Error('x-ui.chart combo charts require at least two metrics.');
-            }
-            if (contract.source.kind === 'praxis.stats'
-                && contract.source.operation !== 'group-by'
-                && contract.source.operation !== 'timeseries') {
-                throw new Error('x-ui.chart combo charts over praxis.stats currently support only group-by or timeseries operations in @praxisui/charts.');
-            }
-        }
-        if (contract.kind !== 'combo' && contract.metrics.some((metric) => metric.axis === 'secondary')) {
-            throw new Error('x-ui.chart axis="secondary" is supported only for combo charts in @praxisui/charts.');
-        }
-        if (contract.source.kind === 'praxis.stats'
-            && contract.source.operation === 'distribution'
-            && contract.metrics.length > 1) {
-            throw new Error('x-ui.chart praxis.stats distribution currently supports only a single metric in @praxisui/charts.');
-        }
-        if (contract.kind === 'horizontal-bar' && contract.orientation && contract.orientation !== 'horizontal') {
-            throw new Error('x-ui.chart kind="horizontal-bar" requires orientation="horizontal" when orientation is provided.');
-        }
-        if (contract.kind === 'scatter') {
-            const firstDimension = contract.dimensions?.[0];
-            if (!firstDimension?.field) {
-                throw new Error('x-ui.chart scatter charts require dimensions[0].field for the x axis.');
-            }
-            if (!contract.metrics?.[0]?.field) {
-                throw new Error('x-ui.chart scatter charts require metrics[0].field for the y axis.');
-            }
-        }
-        if (contract.events?.selectionChange || contract.events?.crossFilter) {
-            throw new Error('x-ui.chart selectionChange/crossFilter declarative runtime actions are not yet implemented in @praxisui/charts.');
-        }
-    }
-    buildAxes(contract) {
-        const firstDimension = contract.dimensions?.[0];
-        const firstMetric = contract.metrics?.[0];
-        const secondaryMetric = contract.metrics?.find((metric) => metric.axis === 'secondary');
-        const metricCount = contract.metrics?.length ?? 0;
-        if (contract.kind === 'pie' || contract.kind === 'donut') {
-            return {
-                x: {
-                    field: firstDimension?.field,
-                    label: this.toLabel(firstDimension?.label),
-                },
-            };
-        }
-        if (contract.kind === 'scatter') {
-            return {
-                x: {
-                    field: firstDimension?.field,
-                    label: this.toLabel(firstDimension?.label),
-                    type: firstDimension?.role === 'time' ? 'time' : 'value',
-                },
-                y: {
-                    field: firstMetric?.field,
-                    label: this.toLabel(firstMetric?.label),
-                    type: 'value',
-                },
-            };
-        }
-        return {
-            x: {
-                field: firstDimension?.field,
-                label: this.toLabel(firstDimension?.label),
-                type: firstDimension?.role === 'time' ? 'time' : 'category',
-            },
-            y: {
-                label: metricCount > 1 ? undefined : this.toLabel(firstMetric?.label),
-                type: 'value',
-            },
-            ySecondary: contract.kind === 'combo' && secondaryMetric
-                ? {
-                    label: this.toLabel(secondaryMetric.label),
-                    type: 'value',
-                    position: 'right',
-                }
-                : undefined,
-        };
-    }
-    buildSeries(contract) {
-        const firstDimension = contract.dimensions?.[0];
-        const labelsVisible = this.resolveToggle(contract.labels);
-        return (contract.metrics ?? []).map((metric, index) => ({
-            id: `${metric.field}-${index + 1}`,
-            name: this.toLabel(metric.label) ?? metric.field,
-            type: this.resolveSeriesType(contract.kind, metric.seriesKind, index),
-            axis: metric.axis ?? 'primary',
-            categoryField: contract.kind === 'pie' || contract.kind === 'donut' ? firstDimension?.field : undefined,
-            metric: {
-                field: metric.field,
-                aggregation: this.mapAggregation(metric.aggregation),
-                label: this.toLabel(metric.label),
-            },
-            color: metric.color,
-            stackId: contract.kind === 'stacked-bar' || contract.kind === 'stacked-area' ? 'stack-1' : undefined,
-            labels: labelsVisible ? { visible: true } : undefined,
-            smooth: this.shouldSmoothSeries(contract.kind, metric.seriesKind),
-        }));
-    }
-    buildDataSource(contract) {
-        if (contract.source.kind === 'derived') {
-            return undefined;
-        }
-        return {
-            kind: 'remote',
-            resourcePath: contract.source.resource,
-            schemaId: contract.source.resource,
-            query: this.buildQuery(contract),
-        };
-    }
-    buildQuery(contract) {
-        if (contract.source.kind !== 'praxis.stats') {
-            return undefined;
-        }
-        const filtersFromContract = this.toQueryFilterMap(contract.filters);
-        const combinedFilters = {
-            ...filtersFromContract,
-        };
-        return {
-            sourceKind: 'praxis.stats',
-            statsOperation: contract.source.operation,
-            granularity: contract.source.options?.granularity,
-            fillGaps: contract.source.options?.fillGaps,
-            distributionMode: contract.source.options?.mode,
-            bucketSize: contract.source.options?.bucketSize,
-            bucketCount: contract.source.options?.bucketCount,
-            statsOrderBy: this.mapStatsOrderBy(contract.source.options?.orderBy),
-            statsPath: this.buildStatsPath(contract),
-            statsRequest: this.buildStatsRequest(contract, combinedFilters),
-            dimensions: contract.dimensions?.map((dimension) => dimension.field),
-            metrics: contract.metrics?.map((metric) => ({
-                field: metric.field,
-                aggregation: this.mapAggregation(metric.aggregation),
-                alias: metric.field,
-            })),
-            filters: Object.keys(combinedFilters).length ? combinedFilters : undefined,
-            sort: contract.sort?.map((item) => `${item.field}:${item.direction}`),
-            limit: contract.limit ?? contract.source.options?.limit,
-        };
-    }
-    buildInteractions(contract) {
-        return {
-            pointClick: Boolean(contract.events?.pointClick || contract.events?.drillDown),
-            selection: Boolean(contract.events?.selectionChange),
-            drillDown: Boolean(contract.events?.drillDown),
-        };
-    }
-    buildTheme(contract) {
-        return {
-            palette: Array.isArray(contract.theme?.palette) ? contract.theme.palette : undefined,
-            legend: { visible: this.resolveToggle(contract.legend, true) },
-            tooltip: {
-                enabled: this.resolveToggle(contract.tooltip, true),
-                trigger: contract.kind === 'pie' || contract.kind === 'donut' || contract.kind === 'scatter' ? 'item' : 'axis',
-            },
-        };
-    }
-    resolveOrientation(contract) {
-        if (contract.kind === 'horizontal-bar') {
-            return 'horizontal';
-        }
-        return contract.orientation;
-    }
-    resolveSeriesType(chartKind, seriesKind, index) {
-        if (chartKind === 'combo') {
-            return seriesKind ?? (index === 0 ? 'bar' : 'line');
-        }
-        return chartKind === 'stacked-bar' ? 'bar' : chartKind;
-    }
-    shouldSmoothSeries(chartKind, seriesKind) {
-        if (chartKind === 'combo') {
-            return seriesKind === 'line' || seriesKind === 'area' ? true : undefined;
-        }
-        return chartKind === 'line' || chartKind === 'area' || chartKind === 'stacked-area' ? true : undefined;
-    }
-    mapTextValue(value) {
-        if (!value)
-            return undefined;
-        if (typeof value === 'string')
-            return value;
-        return {
-            key: value.key,
-            text: value.fallback,
-        };
-    }
-    toLabel(value) {
-        if (!value)
-            return undefined;
-        if (typeof value === 'string')
-            return value;
-        return value.fallback || value.key;
-    }
-    resolveToggle(value, defaultValue = false) {
-        if (typeof value === 'boolean')
-            return value;
-        if (typeof value === 'object' && value)
-            return value.enabled;
-        return defaultValue;
-    }
-    mapAggregation(aggregation) {
-        switch (aggregation) {
-            case 'avg':
-            case 'min':
-            case 'max':
-            case 'count':
-            case 'sum':
-                return aggregation;
-            case undefined:
-                return undefined;
-            default:
-                throw new Error(`x-ui.chart aggregation "${aggregation}" is not yet implemented in @praxisui/charts.`);
+const PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA = {
+    id: 'praxis-chart-state-probe',
+    componentType: 'praxis-chart-state-probe',
+    displayName: 'Praxis Chart State Probe',
+    selector: 'praxis-chart-state-probe',
+    component: PraxisChartStateProbeComponent,
+    friendlyName: 'Praxis Chart State Probe',
+    description: 'Diagnostic widget used to inspect chart events and runtime payloads during local validation.',
+    icon: 'monitoring',
+    tags: ['chart', 'probe', 'debug', 'widget'],
+    lib: '@praxisui/charts',
+    inputs: [
+        {
+            name: 'title',
+            type: 'string',
+            description: 'Probe panel title.',
+        },
+        {
+            name: 'value',
+            type: 'unknown',
+            description: 'Payload rendered as formatted JSON.',
+        },
+    ],
+};
+function providePraxisChartStateProbeMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
+class PraxisChartShowcaseWidgetComponent {
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+    data = input(null, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    chartDocument = input(null, ...(ngDevMode ? [{ debugName: "chartDocument" }] : []));
+    enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization" }] : []));
+    viewMode = input('chart', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    pointClick = output();
+    queryRequest = output();
+    loadStateChange = output();
+    statsApi = inject(PraxisChartStatsApiService);
+    destroyRef = inject(DestroyRef);
+    remoteResolvedRows = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedRows" }] : []));
+    remoteRuntimeState = signal('idle', ...(ngDevMode ? [{ debugName: "remoteRuntimeState" }] : []));
+    remoteTechnicalError = signal(null, ...(ngDevMode ? [{ debugName: "remoteTechnicalError" }] : []));
+    previousRemoteSignature = null;
+    resolvedRows = computed(() => {
+        const explicitData = this.data();
+        if (explicitData !== null && explicitData !== undefined) {
+            return explicitData;
         }
-    }
-    toQueryFilterMap(filters) {
-        if (!filters?.length)
-            return undefined;
-        return filters.reduce((acc, filter) => {
-            if (filter.value !== undefined) {
-                acc[filter.field] = filter.value;
-                return acc;
+        return this.remoteResolvedRows() ?? [];
+    }, ...(ngDevMode ? [{ debugName: "resolvedRows" }] : []));
+    tableId = computed(() => `${this.config().id || 'praxis-chart'}-showcase-table`, ...(ngDevMode ? [{ debugName: "tableId" }] : []));
+    resolvedTitle = computed(() => resolveText(this.config().title) || 'Tabela analitica', ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : []));
+    resolvedSubtitle = computed(() => resolveText(this.config().subtitle) || 'Mesmo dataset em visualizacao tabular', ...(ngDevMode ? [{ debugName: "resolvedSubtitle" }] : []));
+    loadingLabel = computed(() => resolveText(this.config().state?.loadingLabel) || 'Carregando analytics...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+    errorTitle = computed(() => this.remoteTechnicalError()
+        || resolveText(this.config().state?.error?.title)
+        || 'Falha no contrato analitico', ...(ngDevMode ? [{ debugName: "errorTitle" }] : []));
+    errorDescription = computed(() => resolveText(this.config().state?.error?.description), ...(ngDevMode ? [{ debugName: "errorDescription" }] : []));
+    stateMode = computed(() => resolveShowcaseStateMode(this.config(), this.remoteRuntimeState()), ...(ngDevMode ? [{ debugName: "stateMode" }] : []));
+    tableConfig = computed(() => buildTableConfig(this.config(), this.resolvedRows()), ...(ngDevMode ? [{ debugName: "tableConfig" }] : []));
+    constructor() {
+        effect(() => {
+            const config = this.config();
+            const explicitData = this.data();
+            const nextSignature = explicitData === null || explicitData === undefined
+                ? buildRemoteSignature(config)
+                : null;
+            if (nextSignature === this.previousRemoteSignature) {
+                return;
             }
-            if (filter.values !== undefined) {
-                acc[filter.field] = filter.values;
+            this.previousRemoteSignature = nextSignature;
+            this.remoteResolvedRows.set(null);
+            this.remoteRuntimeState.set('idle');
+            this.remoteTechnicalError.set(null);
+        });
+        effect(() => {
+            const config = this.config();
+            const explicitData = this.data();
+            if (this.viewMode() !== 'table') {
+                return;
             }
-            return acc;
-        }, {});
-    }
-    buildStatsPath(contract) {
-        return `${contract.source.resource.replace(/\/+$/, '')}/stats/${contract.source.operation}`;
+            if (config.dataSource?.kind !== 'remote' || (explicitData !== null && explicitData !== undefined)) {
+                return;
+            }
+            if (this.remoteRuntimeState() === 'loading' || this.remoteResolvedRows() !== null) {
+                return;
+            }
+            const event = {
+                chartId: config.id,
+                dataSource: config.dataSource,
+                query: config.dataSource.query,
+            };
+            this.queryRequest.emit(event);
+            this.remoteRuntimeState.set('loading');
+            this.remoteResolvedRows.set([]);
+            this.remoteTechnicalError.set(null);
+            this.statsApi.execute(event, config)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: (rows) => {
+                    this.remoteResolvedRows.set(rows);
+                    this.remoteRuntimeState.set('ready');
+                    this.remoteTechnicalError.set(null);
+                },
+                error: (error) => {
+                    this.remoteResolvedRows.set([]);
+                    this.remoteRuntimeState.set('error');
+                    this.remoteTechnicalError.set(error instanceof Error && error.message.trim()
+                        ? error.message
+                        : 'praxis.stats request failed');
+                },
+            });
+        });
     }
-    buildStatsRequest(contract, filters) {
-        const field = this.resolveStatsField(contract);
-        const metrics = this.buildStatsMetricRequests(contract);
-        const metric = metrics[0];
-        const limit = contract.limit ?? contract.source.options?.limit;
-        const orderBy = this.mapStatsOrderByToBackend(contract.source.options?.orderBy);
-        const requestMetrics = metrics.length > 1 ? metrics : undefined;
-        switch (contract.source.operation) {
-            case 'group-by':
-                return {
-                    filter: filters,
-                    field,
-                    metric,
-                    metrics: requestMetrics,
-                    limit,
-                    orderBy,
-                };
-            case 'timeseries':
-                return {
-                    filter: filters,
-                    field,
-                    granularity: this.mapStatsGranularityToBackend(contract.source.options?.granularity),
-                    metric,
-                    metrics: requestMetrics,
-                    fillGaps: contract.source.options?.fillGaps,
-                };
-            case 'distribution':
-                return {
-                    filter: filters,
-                    field,
-                    mode: this.mapDistributionModeToBackend(contract.source.options?.mode),
-                    metric,
-                    bucketSize: contract.source.options?.bucketSize,
-                    bucketCount: contract.source.options?.bucketCount,
-                    limit,
-                    orderBy,
-                };
-            default:
-                throw new Error(`x-ui.chart source.operation "${contract.source.operation}" is not supported in @praxisui/charts.`);
+    handleRowClick(event) {
+        const row = event?.row;
+        if (!row) {
+            return;
         }
+        const config = this.config();
+        const primarySeries = config.series[0];
+        const categoryField = primarySeries?.categoryField || config.axes?.x?.field;
+        const metricField = primarySeries?.metric?.field;
+        this.pointClick.emit({
+            chartId: config.id,
+            seriesId: primarySeries?.id,
+            seriesName: primarySeries?.name,
+            category: categoryField ? stringifyCell(row[categoryField]) : undefined,
+            value: metricField ? row[metricField] : undefined,
+            data: row,
+        });
     }
-    resolveStatsField(contract) {
-        const dimensionField = contract.dimensions?.[0]?.field?.trim();
-        if (dimensionField) {
-            return dimensionField;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartShowcaseWidgetComponent, isStandalone: true, selector: "praxis-chart-showcase-widget", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, chartDocument: { classPropertyName: "chartDocument", publicName: "chartDocument", isSignal: true, isRequired: false, transformFunction: null }, enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointClick: "pointClick", queryRequest: "queryRequest", loadStateChange: "loadStateChange" }, ngImport: i0, template: `
+    @if (viewMode() === 'chart') {
+      <praxis-chart
+        [config]="config()"
+        [data]="data()"
+        [chartDocument]="chartDocument()"
+        [enableCustomization]="enableCustomization()"
+        (pointClick)="pointClick.emit($event)"
+        (queryRequest)="queryRequest.emit($event)"
+        (loadStateChange)="loadStateChange.emit($event)"
+      ></praxis-chart>
+    } @else if (stateMode() === 'loading') {
+      <section class="showcase-state-card">
+        <h4>{{ loadingLabel() }}</h4>
+      </section>
+    } @else if (stateMode() === 'error') {
+      <section class="showcase-state-card showcase-state-card-error">
+        <h4>{{ errorTitle() }}</h4>
+        @if (errorDescription()) {
+          <p>{{ errorDescription() }}</p>
         }
-        throw new Error('x-ui.chart requires dimensions[0].field to derive the canonical praxis.stats request.');
+      </section>
+    } @else {
+      <praxis-table
+        [config]="tableConfig()"
+        [data]="resolvedRows()"
+        [tableId]="tableId()"
+        [title]="resolvedTitle()"
+        [subtitle]="resolvedSubtitle()"
+        [icon]="'table_view'"
+        (rowClick)="handleRowClick($event)"
+      ></praxis-table>
     }
-    buildStatsMetricRequest(contract) {
-        const metric = contract.metrics?.[0];
-        if (!metric) {
-            throw new Error('x-ui.chart requires metrics[0] to derive the canonical praxis.stats request.');
+  `, isInline: true, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }, { kind: "component", type: PraxisTable, selector: "praxis-table", inputs: ["config", "resourcePath", "data", "tableId", "componentInstanceId", "title", "subtitle", "icon", "autoDelete", "notifyIfOutdated", "snoozeMs", "autoOpenSettingsOnOutdated", "crudContext", "dslFunctionRegistry", "editModeEnabled", "dense"], outputs: ["rowClick", "rowDoubleClick", "rowExpansionChange", "rowAction", "toolbarAction", "bulkAction", "columnReorder", "columnReorderAttempt", "beforeDelete", "afterDelete", "deleteError", "beforeBulkDelete", "afterBulkDelete", "bulkDeleteError", "schemaStatusChange", "metadataChange", "loadingStateChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartShowcaseWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-chart-showcase-widget', standalone: true, imports: [CommonModule, PraxisChartComponent, PraxisTable], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (viewMode() === 'chart') {
+      <praxis-chart
+        [config]="config()"
+        [data]="data()"
+        [chartDocument]="chartDocument()"
+        [enableCustomization]="enableCustomization()"
+        (pointClick)="pointClick.emit($event)"
+        (queryRequest)="queryRequest.emit($event)"
+        (loadStateChange)="loadStateChange.emit($event)"
+      ></praxis-chart>
+    } @else if (stateMode() === 'loading') {
+      <section class="showcase-state-card">
+        <h4>{{ loadingLabel() }}</h4>
+      </section>
+    } @else if (stateMode() === 'error') {
+      <section class="showcase-state-card showcase-state-card-error">
+        <h4>{{ errorTitle() }}</h4>
+        @if (errorDescription()) {
+          <p>{{ errorDescription() }}</p>
         }
-        const operation = this.mapStatsMetricOperation(metric.aggregation);
-        return {
-            operation,
-            field: operation === 'COUNT' ? undefined : metric.field,
-            alias: metric.field,
-        };
+      </section>
+    } @else {
+      <praxis-table
+        [config]="tableConfig()"
+        [data]="resolvedRows()"
+        [tableId]="tableId()"
+        [title]="resolvedTitle()"
+        [subtitle]="resolvedSubtitle()"
+        [icon]="'table_view'"
+        (rowClick)="handleRowClick($event)"
+      ></praxis-table>
     }
-    buildStatsMetricRequests(contract) {
-        if (!contract.metrics?.length) {
-            throw new Error('x-ui.chart requires at least one metric to derive the canonical praxis.stats request.');
-        }
-        return contract.metrics.map((metric) => {
-            const operation = this.mapStatsMetricOperation(metric.aggregation);
-            return {
-                operation,
-                field: operation === 'COUNT' ? undefined : metric.field,
-                alias: metric.field,
-            };
-        });
+  `, styles: [":host{display:block;height:100%;min-width:0}.showcase-state-card{min-height:240px;display:grid;place-content:center;gap:8px;padding:24px;border-radius:18px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#fffffff5,#f4f7fbfa);text-align:center}.showcase-state-card h4{margin:0;font-size:1rem;font-weight:600;color:var(--md-sys-color-on-surface, #1a1b20)}.showcase-state-card p{margin:0;color:var(--md-sys-color-on-surface-variant, #5a5d67)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], viewMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewMode", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }] } });
+function resolveShowcaseStateMode(config, remoteRuntimeState = 'idle') {
+    if (config.preferredLoadState === 'loading') {
+        return 'loading';
     }
-    mapStatsOrderBy(value) {
-        if (!value)
-            return undefined;
-        switch (value) {
-            case 'key-asc':
-            case 'key-desc':
-            case 'value-asc':
-            case 'value-desc':
-                return value;
-            default:
-                throw new Error(`x-ui.chart source.options.orderBy "${value}" is not supported in @praxisui/charts.`);
-        }
+    if (config.preferredLoadState === 'error') {
+        return 'error';
     }
-    mapStatsOrderByToBackend(value) {
-        switch (value) {
-            case 'key-asc':
-                return 'KEY_ASC';
-            case 'key-desc':
-                return 'KEY_DESC';
-            case 'value-asc':
-                return 'VALUE_ASC';
-            case 'value-desc':
-                return 'VALUE_DESC';
-            case undefined:
-                return undefined;
-            default:
-                throw new Error(`x-ui.chart source.options.orderBy "${value}" is not supported in @praxisui/charts.`);
-        }
+    if (config.dataSource?.kind === 'remote' && remoteRuntimeState === 'error') {
+        return 'error';
     }
-    mapStatsGranularityToBackend(value) {
-        switch (value) {
-            case 'hour':
-                return 'HOUR';
-            case 'day':
-                return 'DAY';
-            case 'week':
-                return 'WEEK';
-            case 'month':
-            case undefined:
-                return 'MONTH';
-            case 'quarter':
-                return 'QUARTER';
-            case 'year':
-                return 'YEAR';
-            default:
-                throw new Error(`x-ui.chart source.options.granularity "${value}" is not supported in @praxisui/charts.`);
-        }
+    if (config.dataSource?.kind === 'remote' && remoteRuntimeState !== 'ready') {
+        return 'loading';
     }
-    mapDistributionModeToBackend(value) {
-        switch (value) {
-            case 'histogram':
-                return 'HISTOGRAM';
-            case 'terms':
-            case undefined:
-                return 'TERMS';
-            default:
-                throw new Error(`x-ui.chart source.options.mode "${value}" is not supported in @praxisui/charts.`);
+    return 'ready';
+}
+function buildTableConfig(config, rows) {
+    const tableConfig = createDefaultTableConfig();
+    const toolbar = tableConfig.toolbar;
+    const behavior = tableConfig.behavior;
+    const pagination = behavior.pagination;
+    const sorting = behavior.sorting;
+    const filtering = behavior.filtering;
+    const selection = behavior.selection;
+    const localDataMode = behavior.localDataMode;
+    const actions = tableConfig.actions;
+    const rowActions = actions.row;
+    const bulkActions = actions.bulk;
+    const appearance = tableConfig.appearance;
+    const categoryField = config.axes?.x?.field || config.series[0]?.categoryField;
+    const categoryLabel = config.axes?.x?.label || categoryField;
+    const sampleRow = rows[0] || {};
+    const seriesColumns = config.series
+        .map((series) => {
+        const field = series.metric?.field || series.categoryField;
+        if (!field) {
+            return null;
         }
+        return {
+            field,
+            header: series.name || series.metric?.label || field,
+        };
+    })
+        .filter((column) => column !== null);
+    const fallbackColumns = Object.keys(sampleRow).map((field) => ({
+        field,
+        header: field,
+    }));
+    const categoryColumn = categoryField
+        ? [{
+                field: categoryField,
+                header: categoryLabel || categoryField,
+            }]
+        : [];
+    const dedupedColumns = [...categoryColumn, ...seriesColumns, ...fallbackColumns].filter((column, index, source) => source.findIndex((candidate) => candidate.field === column.field) === index);
+    tableConfig.columns = dedupedColumns;
+    toolbar.visible = false;
+    pagination.enabled = rows.length > 10;
+    sorting.enabled = true;
+    filtering.enabled = false;
+    selection.enabled = false;
+    localDataMode.enabled = true;
+    rowActions.enabled = false;
+    rowActions.actions = [];
+    bulkActions.enabled = false;
+    bulkActions.actions = [];
+    appearance.density = 'comfortable';
+    return tableConfig;
+}
+function resolveText(value) {
+    if (typeof value === 'string') {
+        return value;
     }
-    mapStatsMetricOperation(aggregation) {
-        switch (aggregation) {
-            case undefined:
-            case 'count':
-                return 'COUNT';
-            case 'sum':
-                return 'SUM';
-            case 'avg':
-                return 'AVG';
-            case 'min':
-                return 'MIN';
-            case 'max':
-                return 'MAX';
-            default:
-                throw new Error(`x-ui.chart aggregation "${aggregation}" is not yet implemented in @praxisui/charts.`);
-        }
+    if (value && typeof value === 'object' && 'text' in value) {
+        const text = value.text;
+        return typeof text === 'string' ? text : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, providedIn: 'root' });
+    return '';
+}
+function stringifyCell(value) {
+    if (value === null || value === undefined) {
+        return undefined;
+    }
+    return String(value);
+}
+function buildRemoteSignature(config) {
+    if (config.dataSource?.kind !== 'remote') {
+        return null;
+    }
+    return JSON.stringify({
+        id: config.id,
+        resourcePath: config.dataSource.resourcePath,
+        query: config.dataSource.query,
+    });
+}
+
+const PRAXIS_CHART_SHOWCASE_WIDGET_METADATA = {
+    id: 'praxis-chart-showcase-widget',
+    componentType: 'praxis-chart-showcase-widget',
+    displayName: 'Praxis Chart Showcase Widget',
+    selector: 'praxis-chart-showcase-widget',
+    component: PraxisChartShowcaseWidgetComponent,
+    friendlyName: 'Praxis Chart Showcase Widget',
+    description: 'Showcase-only widget that toggles between Praxis chart and Praxis table using the same dataset.',
+    icon: 'swap_horiz',
+    tags: ['chart', 'table', 'showcase', 'analytics'],
+    lib: '@praxisui/charts',
+    inputs: [
+        {
+            name: 'config',
+            type: 'PraxisChartConfig',
+            description: 'Chart configuration preserved across chart and table views.',
+        },
+        {
+            name: 'data',
+            type: 'PraxisChartDataRow[]',
+            description: 'Local dataset shared by the chart and table renderers.',
+        },
+        {
+            name: 'chartDocument',
+            type: 'PraxisXUiChartContract | null',
+            description: 'Canonical x-ui.chart contract forwarded to the runtime chart editor affordance.',
+        },
+        {
+            name: 'enableCustomization',
+            type: 'boolean',
+            description: 'Enables runtime chart editor affordances when the host is in customization mode.',
+        },
+        {
+            name: 'viewMode',
+            type: "'chart' | 'table'",
+            description: 'Current showcase view mode.',
+        },
+    ],
+    outputs: [
+        {
+            name: 'pointClick',
+            type: 'PraxisChartPointEvent',
+            description: 'Forwards point selection from the chart or mapped row selection from the table.',
+        },
+        {
+            name: 'queryRequest',
+            type: 'PraxisChartQueryRequestEvent',
+            description: 'Forwards remote chart data requests.',
+        },
+        {
+            name: 'loadStateChange',
+            type: 'PraxisChartLoadState',
+            description: 'Forwards chart runtime state transitions.',
+        },
+    ],
+};
+function providePraxisChartShowcaseWidgetMetadata() {
+    return {
+        provide: ENVIRONMENT_INITIALIZER,
+        multi: true,
+        useFactory: (registry) => () => {
+            registry.register(PRAXIS_CHART_SHOWCASE_WIDGET_METADATA);
+        },
+        deps: [ComponentMetadataRegistry],
+    };
+}
+
+function providePraxisCharts() {
+    return [
+        EChartsEngineAdapter,
+        {
+            provide: PRAXIS_CHART_ENGINE,
+            useExisting: EChartsEngineAdapter,
+        },
+        providePraxisChartsMetadata(),
+        providePraxisChartDrilldownPanelMetadata(),
+        providePraxisChartStateProbeMetadata(),
+        providePraxisChartShowcaseWidgetMetadata(),
+    ];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCanonicalContractMapperService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
 
 class PraxisChartMetadataRegistrationService {
     registry;
@@ -2012,13 +2488,13 @@ class PraxisChartMetadataRegistrationService {
         this.registry.register(PRAXIS_CHART_SHOWCASE_WIDGET_METADATA);
         this.registered = true;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartMetadataRegistrationService, deps: [{ token: i1$1.ComponentMetadataRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartMetadataRegistrationService, deps: [{ token: i1$2.ComponentMetadataRegistry }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartMetadataRegistrationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartMetadataRegistrationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$1.ComponentMetadataRegistry }] });
+        }], ctorParameters: () => [{ type: i1$2.ComponentMetadataRegistry }] });
 
 class PraxisChartSchemaMapperService {
     metadataRegistration;
@@ -2173,6 +2649,7 @@ class PraxisChartBackendPayloadAdapterService {
                 inputs: {
                     ...(widget.definition.inputs || {}),
                     config: this.toChartConfig(payload),
+                    chartDocument: payload.widget.chart ?? null,
                 },
             },
         };
@@ -2200,6 +2677,7 @@ class PraxisChartBackendPayloadAdapterService {
                 inputs: {
                     ...(widget.definition.inputs || {}),
                     config: this.toChartConfig(payload),
+                    chartDocument: payload.widget.chart ?? null,
                 },
             },
         };
@@ -2924,9 +3402,10 @@ function withShowcaseViewToggle(widget, initialViewMode = 'chart') {
             id: 'praxis-chart-showcase-widget',
             inputs: {
                 ...(widget.definition.inputs || {}),
+                enableCustomization: '${enableCustomization}',
                 viewMode: initialViewMode,
             },
-            bindingOrder: ['config', 'data', 'viewMode'],
+            bindingOrder: ['config', 'chartDocument', 'data', 'enableCustomization', 'viewMode'],
         },
         shell: {
             ...(widget.shell || {}),
@@ -2962,15 +3441,17 @@ function buildShowcaseToggleActions() {
 }
 
 class PraxisChartCompositionShowcaseComponent {
+    enableCustomization = input(false, ...(ngDevMode ? [{ debugName: "enableCustomization", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     layoutMode = signal('widget', ...(ngDevMode ? [{ debugName: "layoutMode" }] : []));
     payloadMode = signal('group-by', ...(ngDevMode ? [{ debugName: "payloadMode" }] : []));
     scenarioMode = signal('baseline', ...(ngDevMode ? [{ debugName: "scenarioMode" }] : []));
-    runtimeContext = {
+    backendPayloadAdapter = inject(PraxisChartBackendPayloadAdapterService);
+    runtimeContext = computed(() => ({
         tenantId: 'demo-enterprise',
         locale: 'pt-BR',
         environment: 'published-api',
-    };
-    backendPayloadAdapter = inject(PraxisChartBackendPayloadAdapterService);
+        enableCustomization: this.enableCustomization(),
+    }), ...(ngDevMode ? [{ debugName: "runtimeContext" }] : []));
     widgetPage = computed(() => {
         switch (this.scenarioMode()) {
             case 'interactive':
@@ -3123,7 +3604,7 @@ class PraxisChartCompositionShowcaseComponent {
         }
     }, ...(ngDevMode ? [{ debugName: "selectedPayload" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", providers: [providePraxisCharts()], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartCompositionShowcaseComponent, isStandalone: true, selector: "praxis-chart-composition-showcase", inputs: { enableCustomization: { classPropertyName: "enableCustomization", publicName: "enableCustomization", isSignal: true, isRequired: false, transformFunction: null } }, providers: [providePraxisCharts()], ngImport: i0, template: `
     <section class="showcase-shell">
       <header class="showcase-hero">
         <div class="showcase-copy">
@@ -3215,11 +3696,14 @@ class PraxisChartCompositionShowcaseComponent {
           @if (layoutMode() === 'widget') {
             <praxis-dynamic-page
               [page]="widgetPage()"
-              [context]="runtimeContext"
+              [context]="runtimeContext()"
               [autoPersist]="false"
             ></praxis-dynamic-page>
           } @else {
-            <praxis-dynamic-grid-page [page]="gridPage()" [context]="runtimeContext"></praxis-dynamic-grid-page>
+            <praxis-dynamic-grid-page
+              [page]="gridPage()"
+              [context]="runtimeContext()"
+            ></praxis-dynamic-grid-page>
           }
         </article>
 
@@ -3332,11 +3816,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           @if (layoutMode() === 'widget') {
             <praxis-dynamic-page
               [page]="widgetPage()"
-              [context]="runtimeContext"
+              [context]="runtimeContext()"
               [autoPersist]="false"
             ></praxis-dynamic-page>
           } @else {
-            <praxis-dynamic-grid-page [page]="gridPage()" [context]="runtimeContext"></praxis-dynamic-grid-page>
+            <praxis-dynamic-grid-page
+              [page]="gridPage()"
+              [context]="runtimeContext()"
+            ></praxis-dynamic-grid-page>
           }
         </article>
 
@@ -3354,8 +3841,1048 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
       </div>
     </section>
   `, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"] }]
+        }], propDecorators: { enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }] } });
+
+const PRAXIS_CHARTS_EN_US = {
+    'praxis.charts.runtime.editChart': 'Edit chart settings',
+    'praxis.charts.runtime.invalidDocumentTitle': 'Invalid canonical configuration',
+    'praxis.charts.runtime.invalidDocumentDescription': 'The canonical chart document could not be mapped to the current Praxis Charts runtime. Review the chart contract before continuing.',
+    'praxis.charts.editor.section.general': 'General',
+    'praxis.charts.editor.section.data': 'Data',
+    'praxis.charts.editor.section.analytics': 'Analytics',
+    'praxis.charts.editor.section.appearance': 'Appearance',
+    'praxis.charts.editor.section.motion': 'Motion',
+    'praxis.charts.editor.section.events': 'Events',
+    'praxis.charts.editor.section.preview': 'Preview',
+    'praxis.charts.editor.field.chartId': 'Chart ID',
+    'praxis.charts.editor.field.kind': 'Kind',
+    'praxis.charts.editor.field.title': 'Title',
+    'praxis.charts.editor.field.subtitle': 'Subtitle',
+    'praxis.charts.editor.field.height': 'Height',
+    'praxis.charts.editor.field.sourceKind': 'Source',
+    'praxis.charts.editor.field.resource': 'Resource',
+    'praxis.charts.editor.field.operation': 'Operation',
+    'praxis.charts.editor.field.granularity': 'Granularity',
+    'praxis.charts.editor.field.fillGaps': 'Fill missing intervals',
+    'praxis.charts.editor.field.distributionMode': 'Distribution mode',
+    'praxis.charts.editor.field.bucketSize': 'Bucket size',
+    'praxis.charts.editor.field.bucketCount': 'Bucket count',
+    'praxis.charts.editor.field.dimension': 'Dimension',
+    'praxis.charts.editor.field.dimensionRole': 'Dimension role',
+    'praxis.charts.editor.field.metric': 'Metric',
+    'praxis.charts.editor.field.metricLabel': 'Metric label',
+    'praxis.charts.editor.field.metricAggregation': 'Aggregation',
+    'praxis.charts.editor.field.metricAxis': 'Axis',
+    'praxis.charts.editor.field.metricSeriesKind': 'Series kind',
+    'praxis.charts.editor.field.legendEnabled': 'Show legend',
+    'praxis.charts.editor.field.labelsEnabled': 'Show labels',
+    'praxis.charts.editor.field.tooltipEnabled': 'Show tooltip',
+    'praxis.charts.editor.field.palette': 'Palette colors',
+    'praxis.charts.editor.field.emptyTitle': 'Empty title',
+    'praxis.charts.editor.field.emptyDescription': 'Empty description',
+    'praxis.charts.editor.field.loadingTitle': 'Loading title',
+    'praxis.charts.editor.field.loadingDescription': 'Loading description',
+    'praxis.charts.editor.field.errorTitle': 'Error title',
+    'praxis.charts.editor.field.errorDescription': 'Error description',
+    'praxis.charts.editor.field.motionEnabled': 'Enable animations',
+    'praxis.charts.editor.field.motionPreset': 'Motion preset',
+    'praxis.charts.editor.field.eventAction': 'Action',
+    'praxis.charts.editor.field.eventTarget': 'Target',
+    'praxis.charts.editor.field.eventMapping': 'Mapping',
+    'praxis.charts.editor.preview.title': 'Chart preview',
+    'praxis.charts.editor.preview.caption': 'Local preview derived from the canonical contract without remote calls.',
+    'praxis.charts.editor.preview.invalid': 'Preview is unavailable while the contract has blocking errors.',
+    'praxis.charts.editor.issues.title': 'Validation issues',
+    'praxis.charts.editor.issues.empty': 'No issues were identified.',
+    'praxis.charts.editor.appearance.featuresTitle': 'Display features',
+    'praxis.charts.editor.appearance.paletteTitle': 'Palette',
+    'praxis.charts.editor.appearance.paletteHint': 'Use comma or line separated colors to persist theme.palette as a canonical array.',
+    'praxis.charts.editor.appearance.statesTitle': 'State messages',
+    'praxis.charts.editor.analytics.dimensionsTitle': 'Dimensions',
+    'praxis.charts.editor.analytics.metricsTitle': 'Metrics',
+    'praxis.charts.editor.analytics.addDimension': 'Add dimension',
+    'praxis.charts.editor.analytics.addMetric': 'Add metric',
+    'praxis.charts.editor.analytics.removeDimension': 'Remove dimension',
+    'praxis.charts.editor.analytics.removeMetric': 'Remove metric',
+    'praxis.charts.editor.specialization.timeseriesTitle': 'Timeseries options',
+    'praxis.charts.editor.specialization.distributionTitle': 'Distribution options',
+    'praxis.charts.editor.specialization.comboTitle': 'Combo guidance',
+    'praxis.charts.editor.specialization.comboHint': 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.',
+    'praxis.charts.editor.specialization.pieDonutTitle': 'Composition guidance',
+    'praxis.charts.editor.specialization.pieDonutHint': 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.',
+    'praxis.charts.editor.specialization.scatterTitle': 'Scatter guidance',
+    'praxis.charts.editor.specialization.scatterHint': 'Scatter charts use the first dimension as X and the first metric as Y.',
+    'praxis.charts.editor.events.pointClickTitle': 'Point click',
+    'praxis.charts.editor.events.drillDownTitle': 'Drill down',
+    'praxis.charts.editor.events.none': 'None',
+    'praxis.charts.editor.sourceKind.praxisStats': 'praxis.stats',
+    'praxis.charts.editor.sourceKind.derived': 'derived',
+    'praxis.charts.editor.operation.groupBy': 'group-by',
+    'praxis.charts.editor.operation.timeseries': 'timeseries',
+    'praxis.charts.editor.operation.distribution': 'distribution',
+    'praxis.charts.editor.granularity.hour': 'hour',
+    'praxis.charts.editor.granularity.day': 'day',
+    'praxis.charts.editor.granularity.week': 'week',
+    'praxis.charts.editor.granularity.month': 'month',
+    'praxis.charts.editor.granularity.quarter': 'quarter',
+    'praxis.charts.editor.granularity.year': 'year',
+    'praxis.charts.editor.distributionMode.terms': 'terms',
+    'praxis.charts.editor.distributionMode.histogram': 'histogram',
+    'praxis.charts.editor.motionPreset.subtle': 'subtle',
+    'praxis.charts.editor.motionPreset.standard': 'standard',
+    'praxis.charts.editor.motionPreset.expressive': 'expressive',
+    'praxis.charts.editor.dimensionRole.category': 'category',
+    'praxis.charts.editor.dimensionRole.series': 'series',
+    'praxis.charts.editor.dimensionRole.segment': 'segment',
+    'praxis.charts.editor.dimensionRole.time': 'time',
+    'praxis.charts.editor.dimensionRole.value': 'value',
+    'praxis.charts.editor.metricAggregation.sum': 'sum',
+    'praxis.charts.editor.metricAggregation.count': 'count',
+    'praxis.charts.editor.metricAggregation.avg': 'avg',
+    'praxis.charts.editor.metricAggregation.min': 'min',
+    'praxis.charts.editor.metricAggregation.max': 'max',
+    'praxis.charts.editor.metricAxis.primary': 'primary',
+    'praxis.charts.editor.metricAxis.secondary': 'secondary',
+    'praxis.charts.editor.metricSeriesKind.bar': 'bar',
+    'praxis.charts.editor.metricSeriesKind.line': 'line',
+    'praxis.charts.editor.metricSeriesKind.area': 'area',
+    'praxis.charts.editor.eventAction.filter-widget': 'filter-widget',
+    'praxis.charts.editor.eventAction.open-detail': 'open-detail',
+    'praxis.charts.editor.eventAction.navigate': 'navigate',
+    'praxis.charts.editor.eventAction.update-context': 'update-context',
+    'praxis.charts.editor.eventAction.emit': 'emit',
+    'praxis.charts.editor.kind.bar': 'Bar',
+    'praxis.charts.editor.kind.horizontal-bar': 'Horizontal Bar',
+    'praxis.charts.editor.kind.line': 'Line',
+    'praxis.charts.editor.kind.area': 'Area',
+    'praxis.charts.editor.kind.stacked-bar': 'Stacked Bar',
+    'praxis.charts.editor.kind.stacked-area': 'Stacked Area',
+    'praxis.charts.editor.kind.combo': 'Combo',
+    'praxis.charts.editor.kind.pie': 'Pie',
+    'praxis.charts.editor.kind.donut': 'Donut',
+    'praxis.charts.editor.kind.scatter': 'Scatter',
+};
+
+const PRAXIS_CHARTS_PT_BR = {
+    'praxis.charts.runtime.editChart': 'Editar configuracoes do chart',
+    'praxis.charts.runtime.invalidDocumentTitle': 'Configuracao canonica invalida',
+    'praxis.charts.runtime.invalidDocumentDescription': 'O documento canonico do chart nao pode ser mapeado para o runtime atual do Praxis Charts. Revise o contrato do chart antes de continuar.',
+    'praxis.charts.editor.section.general': 'Geral',
+    'praxis.charts.editor.section.data': 'Dados',
+    'praxis.charts.editor.section.analytics': 'Estrutura',
+    'praxis.charts.editor.section.appearance': 'Aparencia',
+    'praxis.charts.editor.section.motion': 'Motion',
+    'praxis.charts.editor.section.events': 'Eventos',
+    'praxis.charts.editor.section.preview': 'Preview',
+    'praxis.charts.editor.field.chartId': 'Chart ID',
+    'praxis.charts.editor.field.kind': 'Tipo',
+    'praxis.charts.editor.field.title': 'Titulo',
+    'praxis.charts.editor.field.subtitle': 'Subtitulo',
+    'praxis.charts.editor.field.height': 'Altura',
+    'praxis.charts.editor.field.sourceKind': 'Fonte',
+    'praxis.charts.editor.field.resource': 'Recurso',
+    'praxis.charts.editor.field.operation': 'Operacao',
+    'praxis.charts.editor.field.granularity': 'Granularidade',
+    'praxis.charts.editor.field.fillGaps': 'Preencher intervalos sem dados',
+    'praxis.charts.editor.field.distributionMode': 'Modo da distribuicao',
+    'praxis.charts.editor.field.bucketSize': 'Tamanho do bucket',
+    'praxis.charts.editor.field.bucketCount': 'Quantidade de buckets',
+    'praxis.charts.editor.field.dimension': 'Dimensao',
+    'praxis.charts.editor.field.dimensionRole': 'Papel da dimensao',
+    'praxis.charts.editor.field.metric': 'Metrica',
+    'praxis.charts.editor.field.metricLabel': 'Label da metrica',
+    'praxis.charts.editor.field.metricAggregation': 'Agregacao',
+    'praxis.charts.editor.field.metricAxis': 'Eixo',
+    'praxis.charts.editor.field.metricSeriesKind': 'Tipo da serie',
+    'praxis.charts.editor.field.legendEnabled': 'Exibir legenda',
+    'praxis.charts.editor.field.labelsEnabled': 'Exibir labels',
+    'praxis.charts.editor.field.tooltipEnabled': 'Exibir tooltip',
+    'praxis.charts.editor.field.palette': 'Cores da paleta',
+    'praxis.charts.editor.field.emptyTitle': 'Titulo do estado vazio',
+    'praxis.charts.editor.field.emptyDescription': 'Descricao do estado vazio',
+    'praxis.charts.editor.field.loadingTitle': 'Titulo do loading',
+    'praxis.charts.editor.field.loadingDescription': 'Descricao do loading',
+    'praxis.charts.editor.field.errorTitle': 'Titulo do erro',
+    'praxis.charts.editor.field.errorDescription': 'Descricao do erro',
+    'praxis.charts.editor.field.motionEnabled': 'Ativar animacoes',
+    'praxis.charts.editor.field.motionPreset': 'Preset de motion',
+    'praxis.charts.editor.field.eventAction': 'Acao',
+    'praxis.charts.editor.field.eventTarget': 'Destino',
+    'praxis.charts.editor.field.eventMapping': 'Mapeamento',
+    'praxis.charts.editor.preview.title': 'Preview do chart',
+    'praxis.charts.editor.preview.caption': 'Preview local derivado do contrato canonico, sem chamadas remotas.',
+    'praxis.charts.editor.preview.invalid': 'O preview fica indisponivel enquanto houver erro bloqueante no contrato.',
+    'praxis.charts.editor.issues.title': 'Issues de validacao',
+    'praxis.charts.editor.issues.empty': 'Nenhum issue identificado.',
+    'praxis.charts.editor.appearance.featuresTitle': 'Recursos visuais',
+    'praxis.charts.editor.appearance.paletteTitle': 'Paleta',
+    'praxis.charts.editor.appearance.paletteHint': 'Use cores separadas por virgula ou linha para persistir `theme.palette` como array canonico.',
+    'praxis.charts.editor.appearance.statesTitle': 'Mensagens de estado',
+    'praxis.charts.editor.analytics.dimensionsTitle': 'Dimensoes',
+    'praxis.charts.editor.analytics.metricsTitle': 'Metricas',
+    'praxis.charts.editor.analytics.addDimension': 'Adicionar dimensao',
+    'praxis.charts.editor.analytics.addMetric': 'Adicionar metrica',
+    'praxis.charts.editor.analytics.removeDimension': 'Remover dimensao',
+    'praxis.charts.editor.analytics.removeMetric': 'Remover metrica',
+    'praxis.charts.editor.specialization.timeseriesTitle': 'Opcoes de series temporais',
+    'praxis.charts.editor.specialization.distributionTitle': 'Opcoes de distribuicao',
+    'praxis.charts.editor.specialization.comboTitle': 'Guia de combo',
+    'praxis.charts.editor.specialization.comboHint': 'Charts combo exigem pelo menos duas metricas e permitem configurar eixo e tipo de serie por metrica.',
+    'praxis.charts.editor.specialization.pieDonutTitle': 'Guia de composicao',
+    'praxis.charts.editor.specialization.pieDonutHint': 'Charts pie e donut mantem apenas a primeira metrica e usam a primeira dimensao como segmento categorico.',
+    'praxis.charts.editor.specialization.scatterTitle': 'Guia de scatter',
+    'praxis.charts.editor.specialization.scatterHint': 'Charts scatter usam a primeira dimensao como eixo X e a primeira metrica como eixo Y.',
+    'praxis.charts.editor.events.pointClickTitle': 'Clique no ponto',
+    'praxis.charts.editor.events.drillDownTitle': 'Drill down',
+    'praxis.charts.editor.events.none': 'Nenhuma',
+    'praxis.charts.editor.sourceKind.praxisStats': 'praxis.stats',
+    'praxis.charts.editor.sourceKind.derived': 'derived',
+    'praxis.charts.editor.operation.groupBy': 'group-by',
+    'praxis.charts.editor.operation.timeseries': 'timeseries',
+    'praxis.charts.editor.operation.distribution': 'distribution',
+    'praxis.charts.editor.granularity.hour': 'hour',
+    'praxis.charts.editor.granularity.day': 'day',
+    'praxis.charts.editor.granularity.week': 'week',
+    'praxis.charts.editor.granularity.month': 'month',
+    'praxis.charts.editor.granularity.quarter': 'quarter',
+    'praxis.charts.editor.granularity.year': 'year',
+    'praxis.charts.editor.distributionMode.terms': 'terms',
+    'praxis.charts.editor.distributionMode.histogram': 'histogram',
+    'praxis.charts.editor.motionPreset.subtle': 'sutil',
+    'praxis.charts.editor.motionPreset.standard': 'padrao',
+    'praxis.charts.editor.motionPreset.expressive': 'expressivo',
+    'praxis.charts.editor.dimensionRole.category': 'category',
+    'praxis.charts.editor.dimensionRole.series': 'series',
+    'praxis.charts.editor.dimensionRole.segment': 'segment',
+    'praxis.charts.editor.dimensionRole.time': 'time',
+    'praxis.charts.editor.dimensionRole.value': 'value',
+    'praxis.charts.editor.metricAggregation.sum': 'sum',
+    'praxis.charts.editor.metricAggregation.count': 'count',
+    'praxis.charts.editor.metricAggregation.avg': 'avg',
+    'praxis.charts.editor.metricAggregation.min': 'min',
+    'praxis.charts.editor.metricAggregation.max': 'max',
+    'praxis.charts.editor.metricAxis.primary': 'primary',
+    'praxis.charts.editor.metricAxis.secondary': 'secondary',
+    'praxis.charts.editor.metricSeriesKind.bar': 'bar',
+    'praxis.charts.editor.metricSeriesKind.line': 'line',
+    'praxis.charts.editor.metricSeriesKind.area': 'area',
+    'praxis.charts.editor.eventAction.filter-widget': 'filter-widget',
+    'praxis.charts.editor.eventAction.open-detail': 'open-detail',
+    'praxis.charts.editor.eventAction.navigate': 'navigate',
+    'praxis.charts.editor.eventAction.update-context': 'update-context',
+    'praxis.charts.editor.eventAction.emit': 'emit',
+    'praxis.charts.editor.kind.bar': 'Bar',
+    'praxis.charts.editor.kind.horizontal-bar': 'Horizontal Bar',
+    'praxis.charts.editor.kind.line': 'Line',
+    'praxis.charts.editor.kind.area': 'Area',
+    'praxis.charts.editor.kind.stacked-bar': 'Stacked Bar',
+    'praxis.charts.editor.kind.stacked-area': 'Stacked Area',
+    'praxis.charts.editor.kind.combo': 'Combo',
+    'praxis.charts.editor.kind.pie': 'Pie',
+    'praxis.charts.editor.kind.donut': 'Donut',
+    'praxis.charts.editor.kind.scatter': 'Scatter',
+};
+
+const PRAXIS_CHARTS_I18N = new InjectionToken('PRAXIS_CHARTS_I18N', {
+    factory: () => ({}),
+});
+function createPraxisChartsI18nConfig(options = {}) {
+    const localeDictionaries = {
+        'pt-BR': {
+            ...PRAXIS_CHARTS_PT_BR,
+            ...(options.dictionaries?.['pt-BR'] ?? {}),
+        },
+        'en-US': {
+            ...PRAXIS_CHARTS_EN_US,
+            ...(options.dictionaries?.['en-US'] ?? {}),
+        },
+    };
+    for (const [locale, dictionary] of Object.entries(options.dictionaries ?? {})) {
+        if (locale === 'pt-BR' || locale === 'en-US') {
+            continue;
+        }
+        localeDictionaries[locale] = {
+            ...(localeDictionaries[locale] ?? {}),
+            ...dictionary,
+        };
+    }
+    return {
+        locale: options.locale,
+        fallbackLocale: options.fallbackLocale ?? 'pt-BR',
+        namespaces: {
+            charts: localeDictionaries,
+        },
+    };
+}
+function providePraxisChartsI18n(options = {}) {
+    return [
+        {
+            provide: PRAXIS_CHARTS_I18N,
+            useValue: {},
+        },
+        providePraxisI18n(createPraxisChartsI18nConfig(options)),
+    ];
+}
+function resolvePraxisChartsText(value, fallback) {
+    if (typeof value === 'string') {
+        return { text: value };
+    }
+    if (value?.key || value?.text) {
+        return value;
+    }
+    return { text: fallback ?? '' };
+}
+
+class ChartEditorDefaultsService {
+    create() {
+        return {
+            version: '1.0.0',
+            kind: 'bar',
+            title: 'Untitled chart',
+            source: {
+                kind: 'derived',
+            },
+            dimensions: [{ field: 'category', role: 'category' }],
+            metrics: [{ field: 'value', aggregation: 'sum', label: 'Value' }],
+            legend: { enabled: true },
+            labels: { enabled: false },
+            tooltip: { enabled: true },
+            motion: {
+                enabled: true,
+                preset: 'standard',
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartEditorDefaultsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartEditorDefaultsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartEditorDefaultsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
+class ChartEditorPreviewMapperService {
+    mapper;
+    constructor(mapper) {
+        this.mapper = mapper;
+    }
+    build(document) {
+        const config = this.mapper.toPraxisChartConfig(document);
+        return {
+            config,
+            data: this.buildRows(document),
+        };
+    }
+    buildRows(document) {
+        const dimensionField = document.dimensions?.[0]?.field?.trim();
+        const metrics = document.metrics ?? [];
+        if (!dimensionField || !metrics.length) {
+            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 },
+                ]
+                : [];
+        }
+        const categories = document.source.kind === 'praxis.stats' && document.source.operation === 'timeseries'
+            ? ['2026-01', '2026-02', '2026-03']
+            : ['Alpha', 'Beta', 'Gamma'];
+        return categories.map((category, index) => {
+            const row = {
+                [dimensionField]: category,
+            };
+            metrics.forEach((metric, metricIndex) => {
+                if (!metric.field) {
+                    return;
+                }
+                row[metric.field] = (index + 1) * 10 * (metricIndex + 1) + metricIndex * 5;
+            });
+            return row;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartEditorPreviewMapperService, deps: [{ token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartEditorPreviewMapperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: ChartEditorPreviewMapperService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PraxisChartCanonicalContractMapperService }] });
+
+class PraxisChartConfigEditor {
+    documentInput = input(null, ...(ngDevMode ? [{ debugName: "documentInput", alias: 'document' }] : [{ alias: 'document' }]));
+    modeInput = input('edit', ...(ngDevMode ? [{ debugName: "modeInput", alias: 'mode' }] : [{ alias: 'mode' }]));
+    readonlyInput = input(false, ...(ngDevMode ? [{ debugName: "readonlyInput", alias: 'readonly' }] : [{ alias: 'readonly' }]));
+    availableResourcesInput = input([], ...(ngDevMode ? [{ debugName: "availableResourcesInput", alias: 'availableResources' }] : [{ alias: 'availableResources' }]));
+    availableFieldsInput = input([], ...(ngDevMode ? [{ debugName: "availableFieldsInput", alias: 'availableFields' }] : [{ alias: 'availableFields' }]));
+    availableTargetsInput = input([], ...(ngDevMode ? [{ debugName: "availableTargetsInput", alias: 'availableTargets' }] : [{ alias: 'availableTargets' }]));
+    apply = output();
+    save = output();
+    resetChange = output();
+    documentChange = output();
+    isDirty$ = new BehaviorSubject(false);
+    isValid$ = new BehaviorSubject(true);
+    isBusy$ = new BehaviorSubject(false);
+    sections = [
+        { id: 'general', labelKey: 'praxis.charts.editor.section.general', fallback: 'General' },
+        { id: 'data', labelKey: 'praxis.charts.editor.section.data', fallback: 'Data' },
+        { id: 'analytics', labelKey: 'praxis.charts.editor.section.analytics', fallback: 'Analytics' },
+        { id: 'appearance', labelKey: 'praxis.charts.editor.section.appearance', fallback: 'Appearance' },
+        { id: 'motion', labelKey: 'praxis.charts.editor.section.motion', fallback: 'Motion' },
+        { id: 'events', labelKey: 'praxis.charts.editor.section.events', fallback: 'Events' },
+        { id: 'preview', labelKey: 'praxis.charts.editor.section.preview', fallback: 'Preview' },
+    ];
+    chartKinds = [
+        'bar',
+        'horizontal-bar',
+        'line',
+        'area',
+        'stacked-bar',
+        'stacked-area',
+        'combo',
+        'pie',
+        'donut',
+        'scatter',
+    ];
+    sourceKinds = ['praxis.stats', 'derived'];
+    operations = ['group-by', 'timeseries', 'distribution'];
+    timeGranularities = ['hour', 'day', 'week', 'month', 'quarter', 'year'];
+    distributionModes = ['terms', 'histogram'];
+    dimensionRoles = ['category', 'series', 'segment', 'time', 'value'];
+    metricAggregations = ['sum', 'count', 'avg', 'min', 'max'];
+    metricAxes = ['primary', 'secondary'];
+    metricSeriesKinds = ['bar', 'line', 'area'];
+    motionPresets = ['subtle', 'standard', 'expressive'];
+    eventActionOptions = ['filter-widget', 'open-detail', 'navigate', 'update-context', 'emit'];
+    activeSection = signal('general', ...(ngDevMode ? [{ debugName: "activeSection" }] : []));
+    injectedData = inject(SETTINGS_PANEL_DATA, { optional: true });
+    defaults = inject(ChartEditorDefaultsService);
+    normalizer = inject(ChartContractNormalizerService);
+    validator = inject(ChartContractValidationService);
+    previewMapper = inject(ChartEditorPreviewMapperService);
+    i18n = inject(PraxisI18nService);
+    currentDocument = signal(this.defaults.create(), ...(ngDevMode ? [{ debugName: "currentDocument" }] : []));
+    initialDocument = signal(this.defaults.create(), ...(ngDevMode ? [{ debugName: "initialDocument" }] : []));
+    lastExternalSignature = null;
+    normalizedDocument = computed(() => this.normalizer.normalize(this.currentDocument()), ...(ngDevMode ? [{ debugName: "normalizedDocument" }] : []));
+    validation = computed(() => this.validator.validate(this.normalizedDocument()), ...(ngDevMode ? [{ debugName: "validation" }] : []));
+    issues = computed(() => this.validation().issues, ...(ngDevMode ? [{ debugName: "issues" }] : []));
+    availableResources = computed(() => this.availableResourcesInput().length
+        ? this.availableResourcesInput()
+        : (this.injectedData?.availableResources ?? []), ...(ngDevMode ? [{ debugName: "availableResources" }] : []));
+    availableFields = computed(() => this.availableFieldsInput().length
+        ? this.availableFieldsInput()
+        : (this.injectedData?.availableFields ?? []), ...(ngDevMode ? [{ debugName: "availableFields" }] : []));
+    availableTargets = computed(() => this.availableTargetsInput().length
+        ? this.availableTargetsInput()
+        : (this.injectedData?.availableTargets ?? []), ...(ngDevMode ? [{ debugName: "availableTargets" }] : []));
+    preview = computed(() => {
+        if (!this.validation().valid) {
+            return null;
+        }
+        return this.previewMapper.build(this.normalizedDocument());
+    }, ...(ngDevMode ? [{ debugName: "preview" }] : []));
+    constructor() {
+        effect(() => {
+            const externalDocument = this.documentInput()
+                ?? this.injectedData?.chartDocument
+                ?? this.injectedData?.document
+                ?? null;
+            if (!externalDocument) {
+                return;
+            }
+            const signature = JSON.stringify(externalDocument);
+            if (signature === this.lastExternalSignature || this.isDirty$.getValue()) {
+                return;
+            }
+            const normalized = this.normalizer.normalize(externalDocument);
+            this.currentDocument.set(structuredClone(normalized));
+            this.initialDocument.set(structuredClone(normalized));
+            this.lastExternalSignature = signature;
+            this.refreshState(false);
+        });
+    }
+    getSettingsValue() {
+        return structuredClone(this.normalizedDocument());
+    }
+    onSave() {
+        return this.saveChanges().document;
+    }
+    reset() {
+        const snapshot = structuredClone(this.initialDocument());
+        this.currentDocument.set(snapshot);
+        this.refreshState(false);
+        this.resetChange.emit({ document: snapshot });
+    }
+    applyChanges() {
+        const payload = this.createApplyPayload();
+        this.apply.emit(payload);
+        return payload;
+    }
+    saveChanges() {
+        const payload = this.createSavePayload();
+        this.initialDocument.set(structuredClone(payload.document));
+        this.refreshState(false);
+        this.save.emit(payload);
+        return payload;
+    }
+    setSection(section) {
+        this.activeSection.set(section);
+    }
+    setChartId(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            chartId: value.trim() || undefined,
+        }));
+    }
+    setKind(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            kind: value,
+        }));
+    }
+    setTitle(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            title: value.trim() || undefined,
+        }));
+    }
+    setSubtitle(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            subtitle: value.trim() || undefined,
+        }));
+    }
+    setHeight(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            height: value.trim() || undefined,
+        }));
+    }
+    setSourceKind(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            source: value === 'derived'
+                ? { kind: 'derived' }
+                : {
+                    kind: 'praxis.stats',
+                    resource: document.source.kind === 'praxis.stats' ? document.source.resource : '',
+                    operation: document.source.kind === 'praxis.stats' ? document.source.operation ?? 'group-by' : 'group-by',
+                    options: document.source.kind === 'praxis.stats' ? document.source.options : undefined,
+                },
+        }));
+    }
+    setResource(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    resource: value.trim() || undefined,
+                }
+                : document.source,
+        }));
+    }
+    setOperation(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    operation: value,
+                }
+                : document.source,
+        }));
+    }
+    setGranularity(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    options: {
+                        ...(document.source.options ?? {}),
+                        granularity: value,
+                    },
+                }
+                : document.source,
+        }));
+    }
+    setFillGaps(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    options: {
+                        ...(document.source.options ?? {}),
+                        fillGaps: value,
+                    },
+                }
+                : document.source,
+        }));
+    }
+    setDistributionMode(value) {
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    options: {
+                        ...(document.source.options ?? {}),
+                        mode: value,
+                    },
+                }
+                : document.source,
+        }));
+    }
+    setBucketSize(value) {
+        const parsed = Number(value);
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    options: {
+                        ...(document.source.options ?? {}),
+                        bucketSize: Number.isFinite(parsed) && value.trim() !== '' ? parsed : undefined,
+                    },
+                }
+                : document.source,
+        }));
+    }
+    setBucketCount(value) {
+        const parsed = Number(value);
+        this.patchDocument((document) => ({
+            ...document,
+            source: document.source.kind === 'praxis.stats'
+                ? {
+                    ...document.source,
+                    options: {
+                        ...(document.source.options ?? {}),
+                        bucketCount: Number.isFinite(parsed) && value.trim() !== '' ? parsed : undefined,
+                    },
+                }
+                : document.source,
+        }));
+    }
+    addDimension() {
+        this.patchDocument((document) => ({
+            ...document,
+            dimensions: [
+                ...(document.dimensions ?? []),
+                { field: '', role: 'category' },
+            ],
+        }));
+    }
+    removeDimension(index) {
+        this.patchDocument((document) => ({
+            ...document,
+            dimensions: (document.dimensions ?? []).filter((_, currentIndex) => currentIndex !== index),
+        }));
+    }
+    setDimensionField(index, field) {
+        this.patchDocument((document) => ({
+            ...document,
+            dimensions: (document.dimensions ?? []).map((dimension, currentIndex) => currentIndex === index
+                ? { ...dimension, field: field.trim() || '' }
+                : dimension),
+        }));
+    }
+    setDimensionRole(index, role) {
+        this.patchDocument((document) => ({
+            ...document,
+            dimensions: (document.dimensions ?? []).map((dimension, currentIndex) => currentIndex === index
+                ? { ...dimension, role }
+                : dimension),
+        }));
+    }
+    addMetric() {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: [
+                ...(document.metrics ?? []),
+                { field: '', aggregation: 'sum', label: '' },
+            ],
+        }));
+    }
+    removeMetric(index) {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: (document.metrics ?? []).filter((_, currentIndex) => currentIndex !== index),
+        }));
+    }
+    setMetricField(index, field) {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
+                ? { ...metric, field: field.trim() || '' }
+                : metric),
+        }));
+    }
+    setMetricLabel(index, label) {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
+                ? { ...metric, label: label.trim() || undefined }
+                : metric),
+        }));
+    }
+    setMetricAggregation(index, aggregation) {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
+                ? { ...metric, aggregation }
+                : metric),
+        }));
+    }
+    setMetricAxis(index, axis) {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
+                ? { ...metric, axis }
+                : metric),
+        }));
+    }
+    setMetricSeriesKind(index, seriesKind) {
+        this.patchDocument((document) => ({
+            ...document,
+            metrics: (document.metrics ?? []).map((metric, currentIndex) => currentIndex === index
+                ? { ...metric, seriesKind }
+                : metric),
+        }));
+    }
+    setMotionEnabled(enabled) {
+        this.patchDocument((document) => ({
+            ...document,
+            motion: {
+                ...(document.motion ?? {}),
+                enabled,
+            },
+        }));
+    }
+    setMotionPreset(preset) {
+        this.patchDocument((document) => ({
+            ...document,
+            motion: {
+                ...(document.motion ?? {}),
+                enabled: document.motion?.enabled ?? true,
+                preset,
+            },
+        }));
+    }
+    setFeatureEnabled(feature, enabled) {
+        this.patchDocument((document) => ({
+            ...document,
+            [feature]: {
+                enabled,
+            },
+        }));
+    }
+    setPalette(value) {
+        const palette = value
+            .split(/[\n,]/)
+            .map((item) => item.trim())
+            .filter(Boolean);
+        this.patchDocument((document) => ({
+            ...document,
+            theme: {
+                ...(document.theme ?? {}),
+                palette: palette.length ? palette : undefined,
+            },
+        }));
+    }
+    setStateTitle(stateKey, value) {
+        this.patchStateDescriptor(stateKey, (descriptor) => ({
+            ...descriptor,
+            title: value.trim() || undefined,
+        }));
+    }
+    setStateDescription(stateKey, value) {
+        this.patchStateDescriptor(stateKey, (descriptor) => ({
+            ...descriptor,
+            description: value.trim() || undefined,
+        }));
+    }
+    setEventAction(eventKey, action) {
+        this.patchDocument((document) => {
+            const currentEvent = document.events?.[eventKey];
+            if (!action) {
+                return {
+                    ...document,
+                    events: {
+                        ...(document.events ?? {}),
+                        [eventKey]: undefined,
+                    },
+                };
+            }
+            return {
+                ...document,
+                events: {
+                    ...(document.events ?? {}),
+                    [eventKey]: {
+                        ...(currentEvent ?? {}),
+                        action,
+                    },
+                },
+            };
+        });
+    }
+    setEventTarget(eventKey, target) {
+        this.patchEvent(eventKey, (currentEvent) => ({
+            ...currentEvent,
+            target: target.trim() || undefined,
+        }));
+    }
+    setEventMapping(eventKey, value) {
+        const mapping = this.parseMappingText(value);
+        this.patchEvent(eventKey, (currentEvent) => ({
+            ...currentEvent,
+            mapping: Object.keys(mapping).length ? mapping : undefined,
+        }));
+    }
+    isReadonly() {
+        return this.readonlyInput() || this.injectedData?.readonly === true;
+    }
+    titleValue() {
+        const value = this.currentDocument().title;
+        if (typeof value === 'string') {
+            return value;
+        }
+        return value?.fallback ?? '';
+    }
+    subtitleValue() {
+        const value = this.currentDocument().subtitle;
+        if (typeof value === 'string') {
+            return value;
+        }
+        return value?.fallback ?? '';
+    }
+    resourceValue() {
+        return this.currentDocument().source.kind === 'praxis.stats'
+            ? this.currentDocument().source.resource ?? ''
+            : '';
+    }
+    resourceOptions() {
+        return this.availableResources();
+    }
+    granularityValue() {
+        return this.doc().source.kind === 'praxis.stats'
+            ? (this.doc().source.options?.granularity ?? 'day')
+            : 'day';
+    }
+    fillGapsValue() {
+        return this.doc().source.kind === 'praxis.stats'
+            ? this.doc().source.options?.fillGaps ?? false
+            : false;
+    }
+    distributionModeValue() {
+        return this.doc().source.kind === 'praxis.stats'
+            ? (this.doc().source.options?.mode ?? 'terms')
+            : 'terms';
+    }
+    bucketSizeValue() {
+        const value = this.doc().source.kind === 'praxis.stats'
+            ? this.doc().source.options?.bucketSize
+            : undefined;
+        return value === undefined ? '' : String(value);
+    }
+    bucketCountValue() {
+        const value = this.doc().source.kind === 'praxis.stats'
+            ? this.doc().source.options?.bucketCount
+            : undefined;
+        return value === undefined ? '' : String(value);
+    }
+    heightValue() {
+        const height = this.currentDocument().height;
+        return height === undefined || height === null ? '' : String(height);
+    }
+    featureEnabled(feature) {
+        const value = this.doc()[feature];
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        return value?.enabled ?? false;
+    }
+    paletteValue() {
+        const palette = this.doc().theme?.palette;
+        return Array.isArray(palette) ? palette.join(', ') : '';
+    }
+    stateTitle(stateKey) {
+        const value = this.doc().state?.[stateKey]?.title;
+        if (typeof value === 'string') {
+            return value;
+        }
+        return value?.fallback ?? '';
+    }
+    stateDescription(stateKey) {
+        const value = this.doc().state?.[stateKey]?.description;
+        if (typeof value === 'string') {
+            return value;
+        }
+        return value?.fallback ?? '';
+    }
+    eventAction(eventKey) {
+        return this.doc().events?.[eventKey]?.action ?? '';
+    }
+    eventTarget(eventKey) {
+        return this.doc().events?.[eventKey]?.target ?? '';
+    }
+    targetOptions() {
+        return this.availableTargets();
+    }
+    eventMappingText(eventKey) {
+        const mapping = this.doc().events?.[eventKey]?.mapping;
+        if (!mapping) {
+            return '';
+        }
+        return Object.entries(mapping)
+            .map(([key, value]) => `${key}=${value}`)
+            .join('\n');
+    }
+    dimensions() {
+        return this.doc().dimensions ?? [];
+    }
+    metrics() {
+        return this.doc().metrics ?? [];
+    }
+    fieldOptions(role) {
+        const fields = this.availableFields();
+        if (!fields.length) {
+            return [];
+        }
+        return fields.filter((field) => {
+            if (!field.roles?.length) {
+                return role === 'dimension' ? field.aggregable !== true : true;
+            }
+            return field.roles.includes(role);
+        });
+    }
+    showMetricAxisControls() {
+        return this.doc().kind === 'combo';
+    }
+    showMetricSeriesKindControls() {
+        return this.doc().kind === 'combo';
+    }
+    showTimeseriesControls() {
+        return this.doc().source.kind === 'praxis.stats' && this.doc().source.operation === 'timeseries';
+    }
+    showDistributionControls() {
+        return this.doc().source.kind === 'praxis.stats' && this.doc().source.operation === 'distribution';
+    }
+    showComboPanel() {
+        return this.doc().kind === 'combo';
+    }
+    showPieDonutPanel() {
+        return this.doc().kind === 'pie' || this.doc().kind === 'donut';
+    }
+    showScatterPanel() {
+        return this.doc().kind === 'scatter';
+    }
+    issueTrackBy(_, issue) {
+        return `${issue.code}:${issue.field}`;
+    }
+    t(key, fallback) {
+        return this.i18n.resolve(resolvePraxisChartsText({ key, text: fallback }, fallback));
+    }
+    doc() {
+        return this.currentDocument();
+    }
+    patchStateDescriptor(stateKey, updater) {
+        this.patchDocument((document) => ({
+            ...document,
+            state: {
+                ...(document.state ?? {}),
+                [stateKey]: updater(document.state?.[stateKey] ?? {}),
+            },
+        }));
+    }
+    patchEvent(eventKey, updater) {
+        this.patchDocument((document) => {
+            const currentEvent = document.events?.[eventKey];
+            if (!currentEvent?.action) {
+                return document;
+            }
+            return {
+                ...document,
+                events: {
+                    ...(document.events ?? {}),
+                    [eventKey]: updater(currentEvent),
+                },
+            };
+        });
+    }
+    parseMappingText(value) {
+        return value
+            .split('\n')
+            .map((line) => line.trim())
+            .filter(Boolean)
+            .reduce((accumulator, line) => {
+            const separatorIndex = line.indexOf('=');
+            if (separatorIndex <= 0) {
+                return accumulator;
+            }
+            const key = line.slice(0, separatorIndex).trim();
+            const mappedValue = line.slice(separatorIndex + 1).trim();
+            if (!key || !mappedValue) {
+                return accumulator;
+            }
+            accumulator[key] = mappedValue;
+            return accumulator;
+        }, {});
+    }
+    createApplyPayload() {
+        return {
+            document: this.getSettingsValue(),
+            issues: [...this.issues()],
+            dirty: this.isDirty$.getValue(),
+        };
+    }
+    createSavePayload() {
+        return {
+            document: this.getSettingsValue(),
+            issues: [...this.issues()],
+            dirty: this.isDirty$.getValue(),
+        };
+    }
+    patchDocument(updater) {
+        if (this.isReadonly()) {
+            return;
+        }
+        this.currentDocument.set(updater(structuredClone(this.currentDocument())));
+        this.refreshState(true);
+    }
+    refreshState(markDirty) {
+        this.isDirty$.next(markDirty);
+        this.isValid$.next(this.validation().valid);
+        this.documentChange.emit(structuredClone(this.normalizedDocument()));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartConfigEditor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.17", type: PraxisChartConfigEditor, isStandalone: true, selector: "praxis-chart-config-editor", inputs: { documentInput: { classPropertyName: "documentInput", publicName: "document", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, availableResourcesInput: { classPropertyName: "availableResourcesInput", publicName: "availableResources", isSignal: true, isRequired: false, transformFunction: null }, availableFieldsInput: { classPropertyName: "availableFieldsInput", publicName: "availableFields", isSignal: true, isRequired: false, transformFunction: null }, availableTargetsInput: { classPropertyName: "availableTargetsInput", publicName: "availableTargets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", save: "save", resetChange: "resetChange", documentChange: "documentChange" }, providers: [providePraxisChartsI18n()], ngImport: i0, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setHeight($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                      <textarea\n                        matInput\n                        rows=\"3\"\n                        [ngModel]=\"paletteValue()\"\n                        (ngModelChange)=\"setPalette($event)\"\n                        [disabled]=\"isReadonly()\"\n                      ></textarea>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use comma or line separated colors to persist theme.palette as a canonical array.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregations; track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px}.editor-card{border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: PraxisChartComponent, selector: "praxis-chart", inputs: ["config", "data", "chartDocument", "filterCriteria", "enableCustomization", "availableResources", "availableFields", "availableTargets"], outputs: ["pointClick", "queryRequest", "loadStateChange", "chartDocumentApplied", "chartDocumentSaved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartConfigEditor, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-chart-config-editor', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatButtonModule,
+                        MatCardModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        PraxisChartComponent,
+                    ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                  <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setHeight($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      @if (resourceOptions().length) {\n                        <mat-select [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\">\n                          @for (resource of resourceOptions(); track resource.id) {\n                            <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly()\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        @for (operation of operations; track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                        <input matInput [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                      <textarea\n                        matInput\n                        rows=\"3\"\n                        [ngModel]=\"paletteValue()\"\n                        (ngModelChange)=\"setPalette($event)\"\n                        [disabled]=\"isReadonly()\"\n                      ></textarea>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use comma or line separated colors to persist theme.palette as a canonical array.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie and donut charts keep only the first metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'Scatter charts use the first dimension as X and the first metric as Y, so keep both fields mapped.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <input matInput [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\" />\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregations; track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" (click)=\"addMetric()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      @if (targetOptions().length) {\n                        <mat-select [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\">\n                          @for (target of targetOptions(); track target.id) {\n                            <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                          }\n                        </mat-select>\n                      } @else {\n                        <input matInput [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown')\" />\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px}.editor-card{border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
+        }], 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({
+    __proto__: null,
+    PraxisChartConfigEditor: PraxisChartConfigEditor
+});
+
 /*
  * Public API Surface of praxis-charts
  */
@@ -3364,5 +4891,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveGridPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockGridPage, buildPraxisChartMockWidgetPage, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsMetadata };
+export { ChartContractNormalizerService, ChartContractValidationService, ChartEditorDefaultsService, ChartEditorPreviewMapperService, PRAXIS_CHARTS_I18N, PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_COMBO, PRAXIS_CHART_BACKEND_MOCK_DONUT, PRAXIS_CHART_BACKEND_MOCK_HORIZONTAL_BAR, PRAXIS_CHART_BACKEND_MOCK_MULTI_METRIC_BAR, PRAXIS_CHART_BACKEND_MOCK_SCATTER, PRAXIS_CHART_BACKEND_MOCK_STACKED_AREA, PRAXIS_CHART_BACKEND_MOCK_TIMESERIES, PRAXIS_CHART_COMPONENT_METADATA, PRAXIS_CHART_DRILLDOWN_DATA_BY_MONTH, PRAXIS_CHART_DRILLDOWN_PANEL_METADATA, PRAXIS_CHART_ENGINE, PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA, PraxisChartBackendPayloadAdapterService, PraxisChartCanonicalContractMapperService, PraxisChartComponent, PraxisChartCompositionShowcaseComponent, PraxisChartConfigEditor, PraxisChartDataTransformerService, PraxisChartDrilldownPanelComponent, PraxisChartOptionBuilderService, PraxisChartSchemaMapperService, PraxisChartStateProbeComponent, PraxisChartStatsApiService, buildPraxisChartInteractiveGridPage, buildPraxisChartInteractiveWidgetPage, buildPraxisChartMockGridPage, buildPraxisChartMockWidgetPage, createPraxisChartsI18nConfig, providePraxisChartDrilldownPanelMetadata, providePraxisChartStateProbeMetadata, providePraxisCharts, providePraxisChartsI18n, providePraxisChartsMetadata, resolvePraxisChartsText };
 //# sourceMappingURL=praxisui-charts.mjs.map