@praxisui/charts 1.0.0-beta.68

package/fesm2022/praxisui-charts.mjs

@@ -0,0 +1,2662 @@
+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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { use, init } from 'echarts/core';
+import { BarChart, LineChart, PieChart } 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 { catchError } from 'rxjs/operators';
+import { PraxisTable } from '@praxisui/table';
+
+class PraxisChartDataTransformerService {
+    transform(config, rows) {
+        if (config.type === 'pie' || config.type === 'donut') {
+            return this.transformPie(config, rows);
+        }
+        return this.transformCartesian(config, rows);
+    }
+    transformCartesian(config, rows) {
+        const categoryField = config.axes?.x?.field;
+        if (!categoryField || !rows.length || !config.series.length) {
+            return {
+                mode: 'cartesian',
+                categories: [],
+                series: [],
+                slices: [],
+                hasData: false,
+            };
+        }
+        const categories = Array.from(new Set(rows.map((row) => this.normalizeCategory(row[categoryField]))));
+        const series = config.series.map((seriesConfig) => this.buildCartesianSeries(config, seriesConfig, rows, categories));
+        return {
+            mode: 'cartesian',
+            categories,
+            series,
+            slices: [],
+            hasData: categories.length > 0 && series.some((item) => item.points.some((point) => point !== null)),
+        };
+    }
+    transformPie(config, rows) {
+        const seriesConfig = config.series[0];
+        const categoryField = seriesConfig?.categoryField ?? config.axes?.x?.field;
+        if (!seriesConfig || !categoryField || !rows.length) {
+            return {
+                mode: 'pie',
+                categories: [],
+                series: [],
+                slices: [],
+                hasData: false,
+            };
+        }
+        const bucket = new Map();
+        for (const row of rows) {
+            const key = this.normalizeCategory(row[categoryField]);
+            const nextValue = this.extractMetricValue(row, seriesConfig);
+            bucket.set(key, (bucket.get(key) ?? 0) + nextValue);
+        }
+        const slices = Array.from(bucket.entries()).map(([name, value]) => ({
+            id: `${seriesConfig.id}:${name}`,
+            name,
+            value,
+            color: seriesConfig.color,
+        }));
+        return {
+            mode: 'pie',
+            categories: slices.map((slice) => slice.name),
+            series: [],
+            slices,
+            hasData: slices.some((slice) => slice.value > 0),
+        };
+    }
+    buildCartesianSeries(config, seriesConfig, rows, categories) {
+        const categoryField = config.axes?.x?.field;
+        const byCategory = new Map();
+        for (const row of rows) {
+            const key = this.normalizeCategory(row[categoryField]);
+            const bucket = byCategory.get(key) ?? [];
+            bucket.push(row);
+            byCategory.set(key, bucket);
+        }
+        return {
+            id: seriesConfig.id,
+            name: seriesConfig.name ?? seriesConfig.metric?.label ?? seriesConfig.id,
+            type: config.type === 'bar' || config.type === 'stacked-bar' ? 'bar' : 'line',
+            stack: config.type === 'stacked-bar' ? seriesConfig.stackId ?? 'stack-1' : undefined,
+            smooth: seriesConfig.smooth ?? config.type === 'area',
+            area: config.type === 'area',
+            color: seriesConfig.color,
+            labelsVisible: seriesConfig.labels?.visible ?? false,
+            points: categories.map((category) => {
+                const bucket = byCategory.get(category) ?? [];
+                if (!bucket.length)
+                    return null;
+                return this.aggregate(bucket, seriesConfig);
+            }),
+        };
+    }
+    aggregate(rows, seriesConfig) {
+        const aggregation = seriesConfig.metric?.aggregation ?? 'sum';
+        if (aggregation === 'count') {
+            return rows.length;
+        }
+        const values = rows
+            .map((row) => this.extractMetricValue(row, seriesConfig))
+            .filter((value) => Number.isFinite(value));
+        if (!values.length)
+            return 0;
+        switch (aggregation) {
+            case 'avg':
+                return values.reduce((sum, value) => sum + value, 0) / values.length;
+            case 'min':
+                return Math.min(...values);
+            case 'max':
+                return Math.max(...values);
+            case 'sum':
+            default:
+                return values.reduce((sum, value) => sum + value, 0);
+        }
+    }
+    extractMetricValue(row, seriesConfig) {
+        const field = seriesConfig.metric?.field;
+        if (!field) {
+            return 1;
+        }
+        const value = row[field];
+        if (typeof value === 'number')
+            return value;
+        if (typeof value === 'string') {
+            const parsed = Number(value);
+            return Number.isFinite(parsed) ? parsed : 0;
+        }
+        return 0;
+    }
+    normalizeCategory(value) {
+        if (value instanceof Date) {
+            return value.toISOString();
+        }
+        if (value === null || value === undefined || value === '') {
+            return 'undefined';
+        }
+        return String(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDataTransformerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDataTransformerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartDataTransformerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class PraxisChartOptionBuilderService {
+    transformer;
+    constructor(transformer) {
+        this.transformer = transformer;
+    }
+    build(config, rows) {
+        const transformed = this.transformer.transform(config, rows);
+        const palette = config.theme?.palette;
+        const tooltipEnabled = config.theme?.tooltip?.enabled ?? true;
+        const legendVisible = config.theme?.legend?.visible ?? true;
+        if (transformed.mode === 'pie') {
+            const pieSeries = {
+                type: 'pie',
+                radius: config.type === 'donut' ? ['45%', '70%'] : '70%',
+                label: {
+                    show: config.series[0]?.labels?.visible ?? false,
+                },
+                data: transformed.slices.map((slice) => ({
+                    name: slice.name,
+                    value: slice.value,
+                    itemStyle: slice.color ? { color: slice.color } : undefined,
+                })),
+            };
+            return {
+                backgroundColor: config.theme?.backgroundColor,
+                color: palette,
+                title: {
+                    text: this.resolveText(config.title),
+                    subtext: this.resolveText(config.subtitle),
+                    left: 'center',
+                },
+                tooltip: tooltipEnabled ? { trigger: 'item' } : undefined,
+                legend: legendVisible
+                    ? { show: true, orient: 'horizontal', bottom: 0 }
+                    : { show: false },
+                series: [pieSeries],
+            };
+        }
+        return {
+            backgroundColor: config.theme?.backgroundColor,
+            color: palette,
+            title: {
+                text: this.resolveText(config.title),
+                subtext: this.resolveText(config.subtitle),
+                left: 'left',
+            },
+            tooltip: tooltipEnabled
+                ? { trigger: config.theme?.tooltip?.trigger ?? 'axis' }
+                : undefined,
+            legend: legendVisible
+                ? { show: true, top: 0 }
+                : { show: false },
+            grid: {
+                top: 56,
+                right: 24,
+                bottom: 32,
+                left: 48,
+                containLabel: true,
+            },
+            xAxis: {
+                type: config.axes?.x?.type ?? 'category',
+                name: config.axes?.x?.label,
+                data: transformed.categories,
+                axisLabel: {
+                    show: config.axes?.x?.labels?.visible ?? true,
+                    rotate: config.axes?.x?.labels?.rotate ?? 0,
+                },
+            },
+            yAxis: {
+                type: config.axes?.y?.type ?? 'value',
+                name: config.axes?.y?.label,
+                min: config.axes?.y?.min,
+                max: config.axes?.y?.max,
+                axisLabel: {
+                    show: config.axes?.y?.labels?.visible ?? true,
+                },
+            },
+            series: transformed.series.map((series) => ({
+                id: series.id,
+                name: series.name,
+                type: series.type,
+                stack: series.stack,
+                smooth: series.smooth,
+                areaStyle: series.area ? {} : undefined,
+                label: { show: series.labelsVisible },
+                itemStyle: series.color ? { color: series.color } : undefined,
+                data: series.points,
+            })),
+        };
+    }
+    resolveText(value) {
+        if (!value)
+            return undefined;
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'object' && value && 'text' in value) {
+            const text = value.text;
+            return text || undefined;
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartOptionBuilderService, deps: [{ token: PraxisChartDataTransformerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartOptionBuilderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartOptionBuilderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PraxisChartDataTransformerService }] });
+
+use([
+    AriaComponent,
+    BarChart,
+    CanvasRenderer,
+    DatasetComponent,
+    GridComponent,
+    LegendComponent,
+    LineChart,
+    PieChart,
+    TitleComponent,
+    TooltipComponent,
+    TransformComponent,
+]);
+class EChartsEngineAdapter {
+    optionBuilder;
+    chart;
+    constructor(optionBuilder) {
+        this.optionBuilder = optionBuilder;
+    }
+    render(host, payload) {
+        if (!this.chart) {
+            this.chart = init(host);
+        }
+        const option = this.optionBuilder.build(payload.config, payload.data);
+        this.chart?.setOption(option, true);
+        this.chart?.off('click');
+        this.chart?.on('click', (params) => {
+            payload.onPointClick?.({
+                chartId: payload.config.id,
+                seriesId: params?.seriesId,
+                seriesName: params?.seriesName,
+                category: params?.name,
+                value: params?.value,
+                data: params?.data,
+            });
+        });
+    }
+    resize() {
+        this.chart?.resize();
+    }
+    destroy() {
+        this.chart?.dispose();
+        this.chart = undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EChartsEngineAdapter, deps: [{ token: PraxisChartOptionBuilderService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EChartsEngineAdapter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: EChartsEngineAdapter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: PraxisChartOptionBuilderService }] });
+
+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 metricField = this.resolveMetricField(config);
+        const url = this.buildStatsUrl(query.statsPath);
+        return this.http
+            .post(url, statsRequest)
+            .pipe(map((response) => this.toChartRows(response?.data, statsRequest, categoryField, metricField)), catchError((error) => this.handleHttpError(error)));
+    }
+    toChartRows(response, request, categoryField, metricField) {
+        if (!response) {
+            return [];
+        }
+        if ('points' in response) {
+            return response.points.map((point) => {
+                const category = point.label ?? point.start ?? point.end ?? '';
+                const metricValue = this.resolveMetricValue(point.value, point.count);
+                return {
+                    [categoryField]: category,
+                    [metricField]: metricValue,
+                    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);
+                const metricValue = this.resolveMetricValue(bucket.value, bucket.count);
+                return {
+                    [categoryField]: category,
+                    [metricField]: metricValue,
+                    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');
+    }
+    resolveMetricField(config) {
+        return config.series[0]?.metric?.field || 'value';
+    }
+    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_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;
+        }
+        const dataSource = this.config().dataSource;
+        if (dataSource?.kind === 'local') {
+            return dataSource.items ?? [];
+        }
+        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') {
+            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.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 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();
+        });
+    }
+    ensureResizeObserver(host) {
+        if (this.resizeObserver()) {
+            return;
+        }
+        const observer = new ResizeObserver(() => {
+            this.engine.resize();
+        });
+        observer.observe(host);
+        this.resizeObserver.set(observer);
+    }
+    buildRemoteSignature(config) {
+        if (config.dataSource?.kind !== 'remote') {
+            return null;
+        }
+        return JSON.stringify({
+            id: config.id,
+            resourcePath: config.dataSource.resourcePath,
+            query: config.dataSource.query,
+        });
+    }
+    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();
+        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]="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>
+        }
+      </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 or overrides.',
+        },
+        {
+            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],
+    };
+}
+
+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],
+    };
+}
+
+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" }] : []));
+    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;
+        }
+        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;
+            }
+            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;
+            }
+            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');
+                },
+            });
+        });
+    }
+    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,
+        });
+    }
+    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>
+        }
+      </section>
+    } @else {
+      <praxis-table
+        [config]="tableConfig()"
+        [data]="resolvedRows()"
+        [tableId]="tableId()"
+        [title]="resolvedTitle()"
+        [subtitle]="resolvedSubtitle()"
+        [icon]="'table_view'"
+        (rowClick)="handleRowClick($event)"
+      ></praxis-table>
+    }
+  `, 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 });
+}
+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()"
+        (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>
+        }
+      </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';
+}
+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;
+    }
+    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,
+    });
+}
+
+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: '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(),
+    ];
+}
+
+class PraxisChartCanonicalContractMapperService {
+    toPraxisChartConfig(contract) {
+        this.assertSupportedContract(contract);
+        return {
+            id: contract.chartId,
+            type: contract.kind,
+            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 === 'derived') {
+            throw new Error('x-ui.chart source.kind="derived" is not yet implemented in @praxisui/charts.');
+        }
+        if (contract.source.kind !== 'praxis.stats') {
+            throw new Error(`x-ui.chart source.kind="${contract.source.kind}" is not supported in @praxisui/charts.`);
+        }
+        if (!contract.source.resource?.trim()) {
+            throw new Error('x-ui.chart source.resource is required for source.kind="praxis.stats".');
+        }
+        if (!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.source.kind === 'praxis.stats' && contract.metrics.length > 1) {
+            throw new Error('x-ui.chart praxis.stats currently supports a single metric per chart in @praxisui/charts.');
+        }
+        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];
+        if (contract.kind === 'pie' || contract.kind === 'donut') {
+            return {
+                x: {
+                    field: firstDimension?.field,
+                    label: this.toLabel(firstDimension?.label),
+                },
+            };
+        }
+        return {
+            x: {
+                field: firstDimension?.field,
+                label: this.toLabel(firstDimension?.label),
+                type: firstDimension?.role === 'time' ? 'time' : 'category',
+            },
+            y: {
+                label: this.toLabel(firstMetric?.label),
+                type: 'value',
+            },
+        };
+    }
+    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: contract.kind === 'stacked-bar' ? 'bar' : contract.kind,
+            categoryField: contract.kind === 'pie' || contract.kind === 'donut' ? firstDimension?.field : undefined,
+            metric: {
+                field: metric.field,
+                aggregation: this.mapAggregation(metric.aggregation),
+                label: this.toLabel(metric.label),
+            },
+            stackId: contract.kind === 'stacked-bar' ? 'stack-1' : undefined,
+            labels: labelsVisible ? { visible: true } : undefined,
+            smooth: contract.kind === 'line' || contract.kind === 'area' ? true : undefined,
+        }));
+    }
+    buildDataSource(contract) {
+        return {
+            kind: 'remote',
+            resourcePath: contract.source.resource,
+            schemaId: contract.source.resource,
+            query: this.buildQuery(contract),
+        };
+    }
+    buildQuery(contract) {
+        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' ? 'item' : 'axis',
+            },
+        };
+    }
+    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.`);
+        }
+    }
+    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 metric = this.buildStatsMetricRequest(contract);
+        const limit = contract.limit ?? contract.source.options?.limit;
+        const orderBy = this.mapStatsOrderByToBackend(contract.source.options?.orderBy);
+        switch (contract.source.operation) {
+            case 'group-by':
+                return {
+                    filter: filters,
+                    field,
+                    metric,
+                    limit,
+                    orderBy,
+                };
+            case 'timeseries':
+                return {
+                    filter: filters,
+                    field,
+                    granularity: this.mapStatsGranularityToBackend(contract.source.options?.granularity),
+                    metric,
+                    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,
+        };
+    }
+    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: [], 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' }]
+        }] });
+
+class PraxisChartMetadataRegistrationService {
+    registry;
+    registered = false;
+    constructor(registry) {
+        this.registry = registry;
+        this.ensureRegistered();
+    }
+    ensureRegistered() {
+        if (this.registered) {
+            return;
+        }
+        this.registry.register(PRAXIS_CHART_COMPONENT_METADATA);
+        this.registry.register(PRAXIS_CHART_DRILLDOWN_PANEL_METADATA);
+        this.registry.register(PRAXIS_CHART_STATE_PROBE_COMPONENT_METADATA);
+        this.registry.register(PRAXIS_CHART_SHOWCASE_WIDGET_METADATA);
+        this.registered = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartMetadataRegistrationService, deps: [{ token: i1$1.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 }] });
+
+class PraxisChartSchemaMapperService {
+    metadataRegistration;
+    canonicalContractMapper;
+    constructor(metadataRegistration, canonicalContractMapper) {
+        this.metadataRegistration = metadataRegistration;
+        this.canonicalContractMapper = canonicalContractMapper;
+        this.metadataRegistration.ensureRegistered();
+    }
+    resolve(input, defaults) {
+        const schema = this.normalize(input);
+        const config = this.toConfig(schema);
+        const key = schema.key?.trim()
+            || defaults?.key?.trim()
+            || schema.chart?.chartId?.trim()
+            || config.id?.trim()
+            || 'praxis-chart';
+        return {
+            componentId: 'praxis-chart',
+            key,
+            className: schema.className,
+            shell: schema.shell,
+            layout: schema.layout ?? defaults?.layout,
+            definition: this.toWidgetDefinition(schema),
+        };
+    }
+    toWidgetDefinition(input) {
+        const schema = this.normalize(input);
+        return {
+            id: 'praxis-chart',
+            inputs: {
+                config: this.toConfig(schema),
+                data: schema.data ?? null,
+            },
+            outputs: this.toOutputs(schema),
+            bindingOrder: schema.bindingOrder ?? ['config', 'data'],
+        };
+    }
+    toWidgetInstance(input, defaults) {
+        const resolved = this.resolve(input, defaults);
+        return {
+            key: resolved.key,
+            definition: resolved.definition,
+            className: resolved.className,
+            shell: resolved.shell,
+        };
+    }
+    toGridWidgetInstance(input, defaults) {
+        const resolved = this.resolve(input, defaults);
+        return {
+            key: resolved.key,
+            definition: resolved.definition,
+            layout: resolved.layout ?? defaults.layout,
+            className: resolved.className,
+            shell: resolved.shell,
+        };
+    }
+    normalize(input) {
+        if (this.isCanonicalChartContract(input)) {
+            return {
+                kind: 'x-ui.chart',
+                componentId: 'praxis-chart',
+                chart: input,
+            };
+        }
+        if (this.isWidgetSchema(input)) {
+            return {
+                kind: input.kind ?? 'x-ui.chart',
+                componentId: 'praxis-chart',
+                ...input,
+            };
+        }
+        throw new Error('PraxisChartSchemaMapperService requires x-ui.chart as the primary public input.');
+    }
+    isWidgetSchema(input) {
+        return typeof input === 'object'
+            && input !== null
+            && ('chart' in input
+                || 'componentId' in input
+                || 'key' in input
+                || 'className' in input
+                || 'outputs' in input
+                || 'bindingOrder' in input
+                || 'shell' in input
+                || 'layout' in input
+                || 'data' in input);
+    }
+    isCanonicalChartContract(input) {
+        return typeof input === 'object'
+            && input !== null
+            && 'version' in input
+            && 'kind' in input
+            && 'source' in input;
+    }
+    toConfig(schema) {
+        if (!schema.chart) {
+            throw new Error('PraxisChartWidgetSchema requires widget.chart as the canonical public input.');
+        }
+        return this.canonicalContractMapper.toPraxisChartConfig(schema.chart);
+    }
+    toOutputs(schema) {
+        if (schema.outputs) {
+            return schema.outputs;
+        }
+        if (schema.chart?.events?.pointClick || schema.chart?.events?.drillDown) {
+            return {
+                pointClick: 'emit',
+            };
+        }
+        return undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartSchemaMapperService, deps: [{ token: PraxisChartMetadataRegistrationService }, { token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartSchemaMapperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartSchemaMapperService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PraxisChartMetadataRegistrationService }, { type: PraxisChartCanonicalContractMapperService }] });
+
+class PraxisChartBackendPayloadAdapterService {
+    chartSchemaMapper;
+    canonicalContractMapper;
+    constructor(chartSchemaMapper, canonicalContractMapper) {
+        this.chartSchemaMapper = chartSchemaMapper;
+        this.canonicalContractMapper = canonicalContractMapper;
+    }
+    toChartConfig(payload) {
+        if (!payload.widget.chart) {
+            throw new Error('PraxisChartBackendPayload requires widget.chart as the canonical public input.');
+        }
+        const baseConfig = this.canonicalContractMapper.toPraxisChartConfig(payload.widget.chart);
+        return {
+            ...baseConfig,
+            preferredLoadState: payload.widget.runtime?.preferredLoadState ?? baseConfig.preferredLoadState,
+        };
+    }
+    toWidgetInstance(payload) {
+        const widget = this.chartSchemaMapper.toWidgetInstance({
+            kind: payload.widget.kind ?? 'x-ui.chart',
+            key: payload.widget.key,
+            className: payload.widget.className,
+            shell: payload.widget.shell,
+            bindingOrder: payload.widget.bindingOrder,
+            outputs: payload.widget.outputs,
+            chart: payload.widget.chart,
+            data: payload.data,
+        });
+        return {
+            ...widget,
+            definition: {
+                ...widget.definition,
+                inputs: {
+                    ...(widget.definition.inputs || {}),
+                    config: this.toChartConfig(payload),
+                },
+            },
+        };
+    }
+    toGridWidgetInstance(payload) {
+        const layout = payload.widget.layout ?? { col: 1, row: 1, colSpan: 6, rowSpan: 4 };
+        const widget = this.chartSchemaMapper.toGridWidgetInstance({
+            kind: payload.widget.kind ?? 'x-ui.chart',
+            key: payload.widget.key,
+            className: payload.widget.className,
+            shell: payload.widget.shell,
+            bindingOrder: payload.widget.bindingOrder,
+            outputs: payload.widget.outputs,
+            layout,
+            chart: payload.widget.chart,
+            data: payload.data,
+        }, {
+            key: payload.widget.key,
+            layout,
+        });
+        return {
+            ...widget,
+            definition: {
+                ...widget.definition,
+                inputs: {
+                    ...(widget.definition.inputs || {}),
+                    config: this.toChartConfig(payload),
+                },
+            },
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, deps: [{ token: PraxisChartSchemaMapperService }, { token: PraxisChartCanonicalContractMapperService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartBackendPayloadAdapterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: PraxisChartSchemaMapperService }, { type: PraxisChartCanonicalContractMapperService }] });
+
+const PRAXIS_CHART_BACKEND_MOCK_BAR = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-perfil-heroi|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-hero-universe-v1',
+        resourcePath: 'api/human-resources/vw-perfil-heroi',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'monthly-revenue-chart',
+        className: 'analytics-widget analytics-widget-revenue',
+        layout: { col: 1, row: 1, colSpan: 6, rowSpan: 4 },
+        shell: {
+            title: 'Heroes por universo',
+            subtitle: 'Group-by real consumindo praxis.stats publicado',
+        },
+        outputs: {
+            pointClick: 'emit',
+            loadStateChange: 'emit',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'bar',
+            preset: 'ranking',
+            chartId: 'monthly-revenue-chart',
+            title: { key: 'charts.heroes.universe.title', fallback: 'Heroes por universo' },
+            subtitle: { key: 'charts.heroes.universe.subtitle', fallback: 'Group-by em /vw-perfil-heroi' },
+            height: 320,
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-perfil-heroi',
+                operation: 'group-by',
+                options: {
+                    orderBy: 'value-desc',
+                    limit: 10,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'universo',
+                    label: 'Universo',
+                    role: 'category',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'count',
+                    label: 'Total de heroes',
+                    aggregation: 'count',
+                },
+            ],
+            groupBy: ['universo'],
+            sort: [{ field: 'universo', direction: 'asc' }],
+            legend: { enabled: true },
+            tooltip: { enabled: true },
+            labels: false,
+            theme: {
+                palette: ['#1263b4'],
+            },
+            state: {
+                empty: {
+                    title: { key: 'charts.empty.title', fallback: 'Sem dados analiticos' },
+                    description: { key: 'charts.empty.description', fallback: 'O backend retornou zero linhas para este recorte.' },
+                },
+                loading: {
+                    title: { key: 'charts.loading.title', fallback: 'Carregando dados publicados...' },
+                },
+                error: {
+                    title: { key: 'charts.error.title', fallback: 'Falha no contrato analitico' },
+                    description: { key: 'charts.error.description', fallback: 'Use este cenario para validar falha controlada do runtime.' },
+                },
+            },
+            events: {
+                pointClick: {
+                    action: 'emit',
+                },
+            },
+        },
+    },
+};
+const PRAXIS_CHART_BACKEND_MOCK_TIMESERIES = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-incident-timeseries-v1',
+        resourcePath: 'api/human-resources/vw-indicadores-incidentes',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'incident-timeseries-chart',
+        layout: { col: 7, row: 1, colSpan: 5, rowSpan: 4 },
+        shell: {
+            title: 'Incidentes por mes',
+            subtitle: 'Time series real consumindo praxis.stats publicado',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'line',
+            preset: 'kpi-trend',
+            chartId: 'incident-timeseries-chart',
+            title: { key: 'charts.incidents.timeline.title', fallback: 'Incidentes por mes' },
+            subtitle: { key: 'charts.incidents.timeline.subtitle', fallback: 'Timeseries em /vw-indicadores-incidentes' },
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-indicadores-incidentes',
+                operation: 'timeseries',
+                options: {
+                    granularity: 'month',
+                    fillGaps: false,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'ocorridoEm',
+                    label: 'Ocorrido em',
+                    role: 'time',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'count',
+                    label: 'Total de incidentes',
+                    aggregation: 'count',
+                },
+            ],
+            legend: { enabled: true },
+            tooltip: { enabled: true },
+            labels: false,
+            theme: {
+                palette: ['#2b8a3e'],
+            },
+        },
+    },
+};
+const PRAXIS_CHART_BACKEND_MOCK_DONUT = {
+    schemaMeta: {
+        schemaId: 'api/human-resources/vw-indicadores-incidentes|post|response|tenant:demo|locale:pt-BR',
+        schemaHash: 'published-hash-incident-severity-v1',
+        resourcePath: 'api/human-resources/vw-indicadores-incidentes',
+        operation: 'post',
+        schemaType: 'response',
+        source: 'backend',
+    },
+    widget: {
+        kind: 'x-ui.chart',
+        key: 'ticket-status-chart',
+        layout: { col: 7, row: 1, colSpan: 5, rowSpan: 4 },
+        shell: {
+            title: 'Severidade de incidentes',
+            subtitle: 'Distribution real consumindo praxis.stats publicado',
+        },
+        chart: {
+            version: '0.1.0',
+            kind: 'donut',
+            preset: 'distribution',
+            chartId: 'ticket-status-chart',
+            title: { key: 'charts.incidents.severity.title', fallback: 'Severidade de incidentes' },
+            source: {
+                kind: 'praxis.stats',
+                resource: 'api/human-resources/vw-indicadores-incidentes',
+                operation: 'distribution',
+                options: {
+                    mode: 'terms',
+                    orderBy: 'value-desc',
+                    limit: 10,
+                },
+            },
+            dimensions: [
+                {
+                    field: 'severidade',
+                    label: 'Severidade',
+                    role: 'segment',
+                },
+            ],
+            metrics: [
+                {
+                    field: 'count',
+                    label: 'Total',
+                    aggregation: 'count',
+                },
+            ],
+            labels: { enabled: true },
+            legend: { enabled: true },
+            tooltip: { enabled: true },
+            theme: {
+                palette: ['#1263b4', '#2b8a3e', '#f08c00', '#c92a2a'],
+            },
+        },
+    },
+};
+
+function buildPraxisChartMockWidgetPage(adapter) {
+    return {
+        widgets: [
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+        ],
+        layout: {
+            orientation: 'columns',
+            columns: 2,
+            gap: '16px',
+        },
+    };
+}
+function buildPraxisChartMockGridPage(adapter) {
+    return {
+        widgets: [
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+        ],
+        options: {
+            cols: 12,
+            rowHeight: 88,
+            gap: 16,
+        },
+    };
+}
+function buildPraxisChartInteractiveWidgetPage(adapter) {
+    return {
+        widgets: [
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES)),
+            {
+                key: 'chart-drilldown-panel',
+                definition: {
+                    id: 'praxis-chart-drilldown-panel',
+                    inputs: {
+                        title: 'Drill-down por segmento',
+                        selection: null,
+                    },
+                },
+                shell: {
+                    title: 'Local Drill-down',
+                    subtitle: 'Filtrado por pointClick do chart principal',
+                },
+            },
+            {
+                key: 'chart-event-probe',
+                definition: {
+                    id: 'praxis-chart-state-probe',
+                    inputs: {
+                        title: 'Eventos do chart principal',
+                        value: 'Clique em uma barra para inspecionar o payload emitido.',
+                    },
+                },
+                shell: {
+                    title: 'Runtime Probe',
+                    subtitle: 'Conectado via WidgetDefinition.connections',
+                },
+            },
+            withShowcaseViewToggle(adapter.toWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT)),
+        ],
+        connections: [
+            {
+                from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
+                to: { widget: 'chart-event-probe', input: 'value' },
+            },
+            {
+                from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
+                to: { widget: 'chart-drilldown-panel', input: 'selection' },
+            },
+        ],
+        layout: {
+            orientation: 'columns',
+            columns: 2,
+            gap: '16px',
+        },
+    };
+}
+function buildPraxisChartInteractiveGridPage(adapter) {
+    return {
+        widgets: [
+            withShowcaseViewToggle(adapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_BAR)),
+            buildDrilldownGridWidget(),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance({
+                ...PRAXIS_CHART_BACKEND_MOCK_TIMESERIES,
+                widget: {
+                    ...PRAXIS_CHART_BACKEND_MOCK_TIMESERIES.widget,
+                    layout: { col: 1, row: 5, colSpan: 6, rowSpan: 4 },
+                },
+            })),
+            buildProbeGridWidget(),
+            withShowcaseViewToggle(adapter.toGridWidgetInstance({
+                ...PRAXIS_CHART_BACKEND_MOCK_DONUT,
+                widget: {
+                    ...PRAXIS_CHART_BACKEND_MOCK_DONUT.widget,
+                    layout: { col: 7, row: 5, colSpan: 6, rowSpan: 4 },
+                },
+            })),
+        ],
+        connections: [
+            {
+                from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
+                to: { widget: 'chart-event-probe', input: 'value' },
+            },
+            {
+                from: { widget: 'monthly-revenue-chart', output: 'pointClick' },
+                to: { widget: 'chart-drilldown-panel', input: 'selection' },
+            },
+        ],
+        options: {
+            cols: 12,
+            rowHeight: 88,
+            gap: 16,
+        },
+    };
+}
+function buildDrilldownGridWidget() {
+    return {
+        key: 'chart-drilldown-panel',
+        definition: {
+            id: 'praxis-chart-drilldown-panel',
+            inputs: {
+                title: 'Drill-down por segmento',
+                selection: null,
+            },
+        },
+        layout: { col: 7, row: 1, colSpan: 6, rowSpan: 4 },
+        shell: {
+            title: 'Local Drill-down',
+            subtitle: 'Filtrado por pointClick do chart principal',
+        },
+    };
+}
+function buildProbeGridWidget() {
+    return {
+        key: 'chart-event-probe',
+        definition: {
+            id: 'praxis-chart-state-probe',
+            inputs: {
+                title: 'Eventos do chart principal',
+                value: 'Clique em uma barra para inspecionar o payload emitido.',
+            },
+        },
+        layout: { col: 7, row: 9, colSpan: 6, rowSpan: 3 },
+        shell: {
+            title: 'Runtime Probe',
+            subtitle: 'Conectado via WidgetDefinition.connections',
+        },
+    };
+}
+function withShowcaseViewToggle(widget, initialViewMode = 'chart') {
+    return {
+        ...widget,
+        definition: {
+            ...widget.definition,
+            id: 'praxis-chart-showcase-widget',
+            inputs: {
+                ...(widget.definition.inputs || {}),
+                viewMode: initialViewMode,
+            },
+            bindingOrder: ['config', 'data', 'viewMode'],
+        },
+        shell: {
+            ...(widget.shell || {}),
+            actions: [...(widget.shell?.actions || []), ...buildShowcaseToggleActions()],
+        },
+    };
+}
+function buildShowcaseToggleActions() {
+    return [
+        {
+            id: 'show-chart',
+            icon: 'bar_chart',
+            tooltip: 'Ver grafico',
+            variant: 'icon',
+            command: 'pdx:set-input',
+            payload: {
+                input: 'viewMode',
+                value: 'chart',
+            },
+        },
+        {
+            id: 'show-table',
+            icon: 'table_view',
+            tooltip: 'Ver tabela',
+            variant: 'icon',
+            command: 'pdx:set-input',
+            payload: {
+                input: 'viewMode',
+                value: 'table',
+            },
+        },
+    ];
+}
+
+class PraxisChartCompositionShowcaseComponent {
+    layoutMode = signal('widget', ...(ngDevMode ? [{ debugName: "layoutMode" }] : []));
+    payloadMode = signal('group-by', ...(ngDevMode ? [{ debugName: "payloadMode" }] : []));
+    scenarioMode = signal('baseline', ...(ngDevMode ? [{ debugName: "scenarioMode" }] : []));
+    runtimeContext = {
+        tenantId: 'demo-enterprise',
+        locale: 'pt-BR',
+        environment: 'published-api',
+    };
+    backendPayloadAdapter = inject(PraxisChartBackendPayloadAdapterService);
+    widgetPage = computed(() => {
+        switch (this.scenarioMode()) {
+            case 'interactive':
+                return buildPraxisChartInteractiveWidgetPage(this.backendPayloadAdapter);
+            case 'empty':
+                return {
+                    ...buildPraxisChartMockWidgetPage(this.backendPayloadAdapter),
+                    widgets: [
+                        this.backendPayloadAdapter.toWidgetInstance({
+                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                            data: [],
+                        }),
+                    ],
+                };
+            case 'loading':
+                return {
+                    ...buildPraxisChartMockWidgetPage(this.backendPayloadAdapter),
+                    widgets: [
+                        this.backendPayloadAdapter.toWidgetInstance({
+                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                            data: [],
+                            widget: {
+                                ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
+                                runtime: {
+                                    preferredLoadState: 'loading',
+                                },
+                            },
+                        }),
+                    ],
+                };
+            case 'error':
+                return {
+                    ...buildPraxisChartMockWidgetPage(this.backendPayloadAdapter),
+                    widgets: [
+                        this.backendPayloadAdapter.toWidgetInstance({
+                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                            data: [],
+                            widget: {
+                                ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
+                                runtime: {
+                                    preferredLoadState: 'error',
+                                },
+                            },
+                        }),
+                    ],
+                };
+            case 'baseline':
+            default:
+                return buildPraxisChartMockWidgetPage(this.backendPayloadAdapter);
+        }
+    }, ...(ngDevMode ? [{ debugName: "widgetPage" }] : []));
+    gridPage = computed(() => {
+        switch (this.scenarioMode()) {
+            case 'interactive':
+                return buildPraxisChartInteractiveGridPage(this.backendPayloadAdapter);
+            case 'empty':
+                return {
+                    ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
+                    widgets: [
+                        this.backendPayloadAdapter.toGridWidgetInstance({
+                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                            data: [],
+                        }),
+                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
+                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
+                    ],
+                };
+            case 'loading':
+                return {
+                    ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
+                    widgets: [
+                        this.backendPayloadAdapter.toGridWidgetInstance({
+                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                            data: [],
+                            widget: {
+                                ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
+                                runtime: {
+                                    preferredLoadState: 'loading',
+                                },
+                            },
+                        }),
+                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
+                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
+                    ],
+                };
+            case 'error':
+                return {
+                    ...buildPraxisChartMockGridPage(this.backendPayloadAdapter),
+                    widgets: [
+                        this.backendPayloadAdapter.toGridWidgetInstance({
+                            ...PRAXIS_CHART_BACKEND_MOCK_BAR,
+                            data: [],
+                            widget: {
+                                ...PRAXIS_CHART_BACKEND_MOCK_BAR.widget,
+                                runtime: {
+                                    preferredLoadState: 'error',
+                                },
+                            },
+                        }),
+                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_TIMESERIES),
+                        this.backendPayloadAdapter.toGridWidgetInstance(PRAXIS_CHART_BACKEND_MOCK_DONUT),
+                    ],
+                };
+            case 'baseline':
+            default:
+                return buildPraxisChartMockGridPage(this.backendPayloadAdapter);
+        }
+    }, ...(ngDevMode ? [{ debugName: "gridPage" }] : []));
+    payloadTitle = computed(() => {
+        switch (this.payloadMode()) {
+            case 'timeseries':
+                return 'Envelope timeseries';
+            case 'distribution':
+                return 'Envelope distribution';
+            case 'group-by':
+            default:
+                return 'Envelope group-by';
+        }
+    }, ...(ngDevMode ? [{ debugName: "payloadTitle" }] : []));
+    selectedPayloadJson = computed(() => JSON.stringify(this.selectedPayload(), null, 2), ...(ngDevMode ? [{ debugName: "selectedPayloadJson" }] : []));
+    selectedPayload = computed(() => {
+        switch (this.payloadMode()) {
+            case 'timeseries':
+                return PRAXIS_CHART_BACKEND_MOCK_TIMESERIES;
+            case 'distribution':
+                return PRAXIS_CHART_BACKEND_MOCK_DONUT;
+            case 'group-by':
+            default:
+                return PRAXIS_CHART_BACKEND_MOCK_BAR;
+        }
+    }, ...(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: `
+    <section class="showcase-shell">
+      <header class="showcase-hero">
+        <div class="showcase-copy">
+          <p class="showcase-eyebrow">Praxis Charts</p>
+          <h2>Composicao local com contrato canonico e API publicada</h2>
+          <p>
+            O showcase valida o fluxo <code>widget.chart</code>,
+            <code>praxis.stats</code>, renderizacao dinamica, probe de eventos
+            e o toggle de chart/tabela sobre o mesmo dataset.
+          </p>
+        </div>
+
+        <div class="showcase-controls">
+          <div class="control-group">
+            <span>Layout</span>
+            <div class="control-buttons">
+              <button type="button" [class.active]="layoutMode() === 'widget'" (click)="layoutMode.set('widget')">
+                Widget Page
+              </button>
+              <button type="button" [class.active]="layoutMode() === 'grid'" (click)="layoutMode.set('grid')">
+                Grid Page
+              </button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <span>Envelope inspecionado</span>
+            <div class="control-buttons">
+              <button type="button" [class.active]="payloadMode() === 'group-by'" (click)="payloadMode.set('group-by')">
+                Group-by
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'timeseries'" (click)="payloadMode.set('timeseries')">
+                Time series
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'distribution'" (click)="payloadMode.set('distribution')">
+                Distribution
+              </button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <span>Cenario</span>
+            <div class="control-buttons">
+              <button type="button" [class.active]="scenarioMode() === 'baseline'" (click)="scenarioMode.set('baseline')">
+                Baseline
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'interactive'" (click)="scenarioMode.set('interactive')">
+                Interativo
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'empty'" (click)="scenarioMode.set('empty')">
+                Empty
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'loading'" (click)="scenarioMode.set('loading')">
+                Loading
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'error'" (click)="scenarioMode.set('error')">
+                Error
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div class="showcase-grid">
+        <article class="runtime-panel">
+          <div class="panel-header">
+            <div>
+              <p class="panel-kicker">Runtime</p>
+              <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
+            </div>
+            <span class="panel-chip">{{ layoutMode() }} · {{ scenarioMode() }}</span>
+          </div>
+
+          @if (layoutMode() === 'widget') {
+            <praxis-dynamic-page
+              [page]="widgetPage()"
+              [context]="runtimeContext"
+              [autoPersist]="false"
+            ></praxis-dynamic-page>
+          } @else {
+            <praxis-dynamic-grid-page [page]="gridPage()" [context]="runtimeContext"></praxis-dynamic-grid-page>
+          }
+        </article>
+
+        <article class="payload-panel">
+          <div class="panel-header">
+            <div>
+              <p class="panel-kicker">Payload</p>
+              <h3>{{ payloadTitle() }}</h3>
+            </div>
+            <span class="panel-chip">widget.chart</span>
+          </div>
+
+          <pre>{{ selectedPayloadJson() }}</pre>
+        </article>
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block}.showcase-shell{display:grid;gap:24px}.showcase-hero{display:grid;gap:20px;padding:28px;border-radius:28px;background:radial-gradient(circle at top right,rgba(18,99,180,.18),transparent 30%),linear-gradient(135deg,#071836f2,#1263b4c7);color:#f7fbff}.showcase-copy h2{margin:0 0 10px;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.05}.showcase-copy p{margin:0;max-width:52rem;color:#f7fbffe0}.showcase-eyebrow,.panel-kicker{margin:0 0 8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#f7fbffb8}.showcase-controls{display:flex;flex-wrap:wrap;gap:16px}.control-group{display:grid;gap:8px}.control-group span{font-size:.84rem;color:#f7fbffc2}.control-buttons{display:flex;flex-wrap:wrap;gap:8px}.control-buttons button{border:1px solid rgba(247,251,255,.22);background:#f7fbff14;color:#f7fbff;border-radius:999px;padding:10px 14px;cursor:pointer;transition:background .16s ease,transform .16s ease}.control-buttons button.active{background:#f7fbff;color:#0d2d5f}.showcase-grid{display:grid;gap:20px;grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr)}.runtime-panel,.payload-panel{display:grid;gap:16px;padding:20px;border-radius:24px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 76%,transparent);background:linear-gradient(180deg,#fffffff0,#f4f7fbf5)}.panel-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.panel-header h3{margin:0;color:#142033}.panel-chip{border-radius:999px;padding:6px 10px;font-size:.76rem;background:#1263b41f;color:#1263b4}.payload-panel pre{margin:0;padding:16px;border-radius:18px;background:#09111f;color:#d7e6ff;overflow:auto;font-size:.84rem;line-height:1.5}@media(max-width:1080px){.showcase-grid{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicWidgetPageComponent, selector: "praxis-dynamic-page", inputs: ["page", "context", "strictValidation", "enableCustomization", "showPageSettingsButton", "shellEditorComponent", "pageEditorComponent", "autoPersist", "pageIdentity", "componentInstanceId"], outputs: ["pageChange"] }, { kind: "component", type: DynamicGridPageComponent, selector: "praxis-dynamic-grid-page", inputs: ["page", "context", "strictValidation", "gridOptions", "enableCustomization"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisChartCompositionShowcaseComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'praxis-chart-composition-showcase', standalone: true, imports: [CommonModule, DynamicWidgetPageComponent, DynamicGridPageComponent], providers: [providePraxisCharts()], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <section class="showcase-shell">
+      <header class="showcase-hero">
+        <div class="showcase-copy">
+          <p class="showcase-eyebrow">Praxis Charts</p>
+          <h2>Composicao local com contrato canonico e API publicada</h2>
+          <p>
+            O showcase valida o fluxo <code>widget.chart</code>,
+            <code>praxis.stats</code>, renderizacao dinamica, probe de eventos
+            e o toggle de chart/tabela sobre o mesmo dataset.
+          </p>
+        </div>
+
+        <div class="showcase-controls">
+          <div class="control-group">
+            <span>Layout</span>
+            <div class="control-buttons">
+              <button type="button" [class.active]="layoutMode() === 'widget'" (click)="layoutMode.set('widget')">
+                Widget Page
+              </button>
+              <button type="button" [class.active]="layoutMode() === 'grid'" (click)="layoutMode.set('grid')">
+                Grid Page
+              </button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <span>Envelope inspecionado</span>
+            <div class="control-buttons">
+              <button type="button" [class.active]="payloadMode() === 'group-by'" (click)="payloadMode.set('group-by')">
+                Group-by
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'timeseries'" (click)="payloadMode.set('timeseries')">
+                Time series
+              </button>
+              <button type="button" [class.active]="payloadMode() === 'distribution'" (click)="payloadMode.set('distribution')">
+                Distribution
+              </button>
+            </div>
+          </div>
+
+          <div class="control-group">
+            <span>Cenario</span>
+            <div class="control-buttons">
+              <button type="button" [class.active]="scenarioMode() === 'baseline'" (click)="scenarioMode.set('baseline')">
+                Baseline
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'interactive'" (click)="scenarioMode.set('interactive')">
+                Interativo
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'empty'" (click)="scenarioMode.set('empty')">
+                Empty
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'loading'" (click)="scenarioMode.set('loading')">
+                Loading
+              </button>
+              <button type="button" [class.active]="scenarioMode() === 'error'" (click)="scenarioMode.set('error')">
+                Error
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div class="showcase-grid">
+        <article class="runtime-panel">
+          <div class="panel-header">
+            <div>
+              <p class="panel-kicker">Runtime</p>
+              <h3>{{ layoutMode() === 'widget' ? 'DynamicWidgetPage' : 'DynamicGridPage' }}</h3>
+            </div>
+            <span class="panel-chip">{{ layoutMode() }} · {{ scenarioMode() }}</span>
+          </div>
+
+          @if (layoutMode() === 'widget') {
+            <praxis-dynamic-page
+              [page]="widgetPage()"
+              [context]="runtimeContext"
+              [autoPersist]="false"
+            ></praxis-dynamic-page>
+          } @else {
+            <praxis-dynamic-grid-page [page]="gridPage()" [context]="runtimeContext"></praxis-dynamic-grid-page>
+          }
+        </article>
+
+        <article class="payload-panel">
+          <div class="panel-header">
+            <div>
+              <p class="panel-kicker">Payload</p>
+              <h3>{{ payloadTitle() }}</h3>
+            </div>
+            <span class="panel-chip">widget.chart</span>
+          </div>
+
+          <pre>{{ selectedPayloadJson() }}</pre>
+        </article>
+      </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"] }]
+        }] });
+
+/*
+ * Public API Surface of praxis-charts
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PRAXIS_CHART_BACKEND_MOCK_BAR, PRAXIS_CHART_BACKEND_MOCK_DONUT, 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 };
+//# sourceMappingURL=praxisui-charts.mjs.map