@praxisui/charts 10.0.0-rc.20 → 10.0.0-rc.21

package/README.md

@@ -311,15 +311,17 @@ The Dynamic Page Lab's preset studio includes “Testar com componentes reais”
 
 `PraxisChartConfigEditor` is the initial editor shell for canonical `x-ui.chart` documents. It consumes governed resources, fields and targets and emits structured apply/save/reset events. The authoring manifest is exported as `PRAXIS_CHARTS_AUTHORING_MANIFEST` for backend/tooling workflows that need executable chart-edit operations.
 
-For the direct runtime editor, Apply updates the chart and emits `chartDocumentApplied`; Save emits `chartDocumentSaved`. Both also emit `chartDocumentPatchChange` with an independent `inputPatch.chartDocument` snapshot for dynamic widget hosts. Dynamic Page/Page Builder updates its authored page, so Apply followed by Save Page preserves the canonical document. Apply alone does not persist the page remotely. Unrelated widget inputs and transient catalogs remain owned by their existing host/context boundaries.
+The direct runtime host opens `PraxisChartWidgetConfigEditor` with the existing `{ inputs }` envelope so the canonical document, derived `data` and separate `queryContext` share the Apply/Save boundary. Apply updates the runtime and emits `chartDocumentApplied`; Save emits `chartDocumentSaved`. Both document outputs retain their `PraxisXUiChartContract` shape. `chartDocumentPatchChange` carries independent snapshots in `inputPatch.chartDocument`, `data` and `queryContext` when applicable, plus mapped `config` for a config-driven host. Switching to `praxis.stats` clears local data precedence with `inputPatch.data: null`; clearing query context uses `queryContext: null`.
+
+The accepted editor state belongs to the opening owner inputs. An owner may echo the latest accepted value of each input one at a time, including fields omitted from a later patch; equivalent clones do not imply a new owner. Hosts must apply patches in order: an older value of the same input delivered after a newer accepted value is indistinguishable from an external override and is treated as one. A distinct external input change replaces the local document/data/context state, and old editor events are rejected even before the next render. Closing or destroying the owner releases the editor subscriptions. Cancel discards unapplied editor work; it does not undo a previous Apply. Dynamic Page/Page Builder can materialize the patch in its authored page, but external persistence remains the host's responsibility. Apply or Save alone is not proof of remote persistence; the standalone showcase keeps runtime state only. Transient catalogs remain outside the persisted input envelope.
 
 `ChartResourceCapabilityCatalogAdapter` derives resource operations and eligible dimension, time and metric options directly from `ResourceCapabilitySnapshot`, including fail-closed comparison eligibility.
 
-Applications should install `providePraxisCharts()` once. The registered `ComponentDocMeta.configEditor.contextResolver` materializes the editor context without making Page Builder own Chart semantics. Initial resolution groups `/schemas/catalog` endpoints by the stable `resourceKey`, exposes that value as `availableResources[].id`, and keeps the catalog's governed root-relative resource path as `availableResources[].path`. Coexisting `/stats/capabilities` endpoints do not conflict with the canonical collection `/capabilities` endpoint; `chart-resource-capabilities-ambiguous` is emitted only when multiple distinct collection capability paths compete for the same resource. A selected `praxis.stats` source is normalized to that operational path before save; the discovery id is never persisted as an executable URL.
+Applications should install `providePraxisCharts()` once. The registered `ComponentDocMeta.configEditor.contextResolver` materializes the editor context without making Page Builder own Chart semantics. Initial resolution groups `/schemas/catalog` endpoints by the stable `resourceKey`, exposes that value as `availableResources[].id`, and keeps the catalog's governed root-relative resource path as `availableResources[].path`. Coexisting `/stats/capabilities` endpoints do not conflict with the canonical collection `/capabilities` endpoint; `chart-resource-capabilities-endpoint-ambiguous` is emitted only when multiple distinct collection capability paths compete for the same resource. A selected `praxis.stats` source is normalized to that operational path before save; the discovery id is never persisted as an executable URL.
 
-Capabilities are loaded lazily from the exact catalog-published endpoint only after resource selection. Concurrent catalog and per-resource capability reads are deduplicated in flight and bounded by a 10-second timeout, but successful permission-sensitive projections are not cached across requests until the host publishes a canonical authentication/context epoch. Denied, unavailable, ambiguous, stale and empty evidence fails closed, and later requests remain retryable. In `PraxisChartWidgetConfigEditor`, authoring context diagnostics are grouped by diagnostic code with occurrence counts, scope impact, and expandable details (affected resource paths, next steps, and technical code) without dirtying the editor draft. `canonicalOperations` gates group-by, timeseries and distribution, while `stats.fields[]` gates dimensions, metrics, aggregations and exact `distributionModes` eligibility for terms versus histogram. `/schemas/filtered` enrichment of field titles, types and `x-ui` remains a later schema-flow gate; capabilities remain the authority for eligibility.
+Capabilities are loaded lazily from the exact catalog-published endpoint only after resource selection. Concurrent reads are deduplicated in flight, with a 30-second catalog timeout and a 10-second per-resource capability timeout, but successful permission-sensitive projections are not cached across requests until the host publishes a canonical authentication/context epoch. Denied, unavailable, ambiguous, stale and empty evidence fails closed, and later requests remain retryable. In `PraxisChartWidgetConfigEditor`, authoring context diagnostics are grouped by diagnostic code with occurrence counts, scope impact, and expandable details (affected resource paths, next steps, and technical code) without dirtying the editor draft. `canonicalOperations` gates group-by, timeseries and distribution, while `stats.fields[]` gates dimensions, metrics, aggregations and exact `distributionModes` eligibility for terms versus histogram. `/schemas/filtered` enrichment of field titles, types and `x-ui` remains a later schema-flow gate; capabilities remain the authority for eligibility.
 
-When `source.kind === 'derived'`, `PraxisChartConfigEditor` and `PraxisChartWidgetConfigEditor` expose local dataset authoring (`inputs.data` / `localData`) in the Data tab, align the live preview with the widget's local records (falling back to an explicitly labeled synthetic sample only when local records are empty), and validate predictable runtime constraints before save—including single-bucket consolidation and scale range checks for `gauge`. For `pie` and `donut` charts, omitting `labels` preserves the engine's default callout visibility (`labels.enabled: undefined`), while explicit `labels: false` or `labels: { enabled: false }` hides both slice labels and leader lines (`labelLine: { show: false }`).
+When `source.kind === 'derived'`, `PraxisChartConfigEditor` and `PraxisChartWidgetConfigEditor` expose local dataset authoring (`inputs.data` / `localData`) in the Data tab, align the live preview with the widget's local records (falling back to an explicitly labeled synthetic sample only when local records are empty), and validate predictable runtime constraints before save—including single-bucket consolidation and scale range checks for `gauge`. Consolidation preserves the authored aggregation: SUM40+80 remains120, and a gauge scale0..100 reports `gauge-value-out-of-range` until the author changes the scale, data or aggregation explicitly. The editor never substitutes an average or clamps the value to make it fit. For `pie` and `donut` charts, omitting `labels` preserves the engine's default callout visibility (`labels.enabled: undefined`), while explicit `labels: false` or `labels: { enabled: false }` hides both slice labels and leader lines (`labelLine: { show: false }`).
 
 Target choices come only from existing top-level composition links whose source is the current Chart and whose exact structured source event port is public and non-deprecated. Raw `pointClick` evidence never authorizes a configured action; `events.pointClick` uses `pointAction`. Directly compatible widget ports are admitted; an explicit `transform.output.semanticKind` is inspected only as provisional local evidence. That local check does not replace a transform-output projection materialized and validated by Core, which remains a P2 gate. Destinations are limited to compatible public, non-deprecated widget inputs or explicitly writable declared page state. Each target carries `events[]`, so a link from `crossFilter` cannot authorize the same target for `pointClick`, `selectionChange` or `drillDown`; routes, nested ports, global actions, undeclared state and unconnected widgets are not synthesized.
 

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-15T03:52:00.118Z",
+  "generatedAt": "2026-10-15T04:35:19.773Z",
   "packageName": "@praxisui/charts",
-  "packageVersion": "10.0.0-rc.20",
+  "packageVersion": "10.0.0-rc.21",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 4,

package/fesm2022/praxisui-charts.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, Injector, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { Injectable, Optional, Inject, InjectionToken, input, booleanAttribute, output, viewChild, inject, ElementRef, NgZone, DestroyRef, signal, linkedSignal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component, ViewChild, Input, Injector, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import * as i1 from '@praxisui/core';
 import { buildApiUrl, API_URL, PraxisI18nService, ComponentMetadataRegistry, SETTINGS_PANEL_BRIDGE, normalizePraxisDataQueryContext, resolvePraxisFilterCriteria, BUILTIN_PAGE_THEME_PRESETS, PraxisIconButtonComponent, normalizePraxisPresentationVisualization, resolvePraxisMicroVisualizationTone, AnalyticsStatsRequestBuilderService, AnalyticsPresentationResolver, providePraxisI18n, ResourceDiscoveryService, SETTINGS_PANEL_DATA, createDefaultTableConfig, PRAXIS_TABLE_DETAIL_INLINE_RENDERERS, DynamicWidgetPageComponent } from '@praxisui/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -2465,7 +2465,35 @@ class PraxisChartComponent {
     remoteResolvedData = signal(null, ...(ngDevMode ? [{ debugName: "remoteResolvedData" }] : /* istanbul ignore next */ []));
     remoteRuntimeState = signal('idle', ...(ngDevMode ? [{ debugName: "remoteRuntimeState" }] : /* istanbul ignore next */ []));
     remoteTechnicalError = signal(null, ...(ngDevMode ? [{ debugName: "remoteTechnicalError" }] : /* istanbul ignore next */ []));
-    runtimeChartDocument = signal(null, ...(ngDevMode ? [{ debugName: "runtimeChartDocument" }] : /* istanbul ignore next */ []));
+    runtimeOwner = linkedSignal({ ...(ngDevMode ? { debugName: "runtimeOwner" } : /* istanbul ignore next */ {}), source: () => ({
+            chartDocument: this.chartDocument(), config: this.config(),
+            data: this.data(), queryContext: this.queryContext(),
+        }),
+        computation: (owner, previous) => {
+            const patch = previous?.value.editorPatch;
+            // An owner can acknowledge the accepted patch one input at a time. A distinct
+            // external change reclaims the complete scope, including local data/context.
+            if (previous && patch && Object.keys(owner).every((key) => this.editorInputSignature(owner[key]) === this.editorInputSignature(previous.source[key])
+                || (Object.prototype.hasOwnProperty.call(patch, key)
+                    && this.editorInputSignature(owner[key]) === this.editorInputSignature(patch[key]))))
+                return previous.value;
+            let document = owner.chartDocument;
+            if (!document && owner.config?.type && Array.isArray(owner.config.series)) {
+                try {
+                    document = this.canonicalMapper.toPraxisXUiChartContract(owner.config);
+                }
+                catch {
+                    document = null;
+                }
+            }
+            return {
+                owner: structuredClone(owner),
+                document: document ? structuredClone(document) : null,
+                data: structuredClone(owner.data),
+                queryContext: structuredClone(owner.queryContext),
+            };
+        } });
+    runtimeChartDocument = computed(() => this.runtimeOwner().document, ...(ngDevMode ? [{ debugName: "runtimeChartDocument" }] : /* istanbul ignore next */ []));
     mappedRuntimeConfig = signal(null, ...(ngDevMode ? [{ debugName: "mappedRuntimeConfig" }] : /* istanbul ignore next */ []));
     chartDocumentMappingError = signal(null, ...(ngDevMode ? [{ debugName: "chartDocumentMappingError" }] : /* istanbul ignore next */ []));
     activeSelectionSignature = signal(null, ...(ngDevMode ? [{ debugName: "activeSelectionSignature" }] : /* istanbul ignore next */ []));
@@ -2483,13 +2511,14 @@ class PraxisChartComponent {
     deferredRenderAttempts = 0;
     previousRemoteSignature = null;
     previousRemoteDataResolver = undefined;
-    previousDocumentSignature = null;
     inheritedThemeSignature = null;
     editorSessionSubscriptions = [];
     remoteRequestSubscription = null;
     remoteRequestSequence = 0;
     previousSelectionScopeSignature = null;
-    userEditedDocument = signal(false, ...(ngDevMode ? [{ debugName: "userEditedDocument" }] : /* istanbul ignore next */ []));
+    userEditedDocument = computed(() => !!this.runtimeOwner().editorPatch, ...(ngDevMode ? [{ debugName: "userEditedDocument" }] : /* istanbul ignore next */ []));
+    runtimeData = computed(() => this.runtimeOwner().data, ...(ngDevMode ? [{ debugName: "runtimeData" }] : /* istanbul ignore next */ []));
+    runtimeQueryContext = computed(() => this.runtimeOwner().queryContext, ...(ngDevMode ? [{ debugName: "runtimeQueryContext" }] : /* istanbul ignore next */ []));
     effectiveConfig = computed(() => {
         const directDocument = this.chartDocument();
         const config = this.config();
@@ -2526,7 +2555,7 @@ class PraxisChartComponent {
             }
         }
         const base = this.applyInheritedTheme(activeConfig, this.inheritedTheme(), this.inheritedHostTextColor());
-        const runtimeQueryContext = normalizePraxisDataQueryContext(this.queryContext());
+        const runtimeQueryContext = normalizePraxisDataQueryContext(this.runtimeQueryContext());
         const runtimeFilters = resolvePraxisFilterCriteria(this.filterCriteria(), runtimeQueryContext);
         if (!runtimeQueryContext
             && !Object.keys(runtimeFilters).length) {
@@ -2538,7 +2567,7 @@ class PraxisChartComponent {
         return mergeRemoteQueryContext(base, runtimeQueryContext, runtimeFilters);
     }, ...(ngDevMode ? [{ debugName: "effectiveConfig" }] : /* istanbul ignore next */ []));
     resolvedData = computed(() => {
-        const inputData = this.data();
+        const inputData = this.runtimeData();
         if (inputData !== null && inputData !== undefined) {
             return inputData;
         }
@@ -2616,7 +2645,7 @@ class PraxisChartComponent {
         : 'var(--md-sys-color-on-surface, #1a1b20)', ...(ngDevMode ? [{ debugName: "accessibleDataSurfaceTextColor" }] : /* istanbul ignore next */ []));
     renderConfig = computed(() => {
         const config = this.effectiveConfig();
-        const explicitData = this.data();
+        const explicitData = this.runtimeData();
         const remoteState = this.remoteRuntimeState();
         const remoteData = this.remoteResolvedData();
         if (explicitData !== null && explicitData !== undefined) {
@@ -2689,7 +2718,7 @@ class PraxisChartComponent {
     }, ...(ngDevMode ? [{ debugName: "sortedAccessiblePoints" }] : /* istanbul ignore next */ []));
     dataDiagnostic = computed(() => {
         const config = this.renderConfig();
-        const explicitData = this.data();
+        const explicitData = this.runtimeData();
         if (config.dataSource?.kind === 'remote'
             && (explicitData === null || explicitData === undefined)
             && this.remoteRuntimeState() !== 'ready') {
@@ -2754,7 +2783,7 @@ class PraxisChartComponent {
         if (config.preferredLoadState === 'error')
             return 'error';
         const dataSource = config.dataSource;
-        const explicitData = this.data();
+        const explicitData = this.runtimeData();
         if (dataSource?.kind === 'remote' && (explicitData === null || explicitData === undefined)) {
             const remoteState = this.remoteRuntimeState();
             if (remoteState === 'error') {
@@ -2775,27 +2804,6 @@ class PraxisChartComponent {
             this.observeShellSizingContext();
             this.observeThemeContext();
         });
-        effect(() => {
-            const explicitDocument = this.chartDocument();
-            let document = explicitDocument;
-            if (!document && !this.userEditedDocument()) {
-                const config = this.config();
-                if (config && config.type && Array.isArray(config.series)) {
-                    try {
-                        document = this.canonicalMapper.toPraxisXUiChartContract(config);
-                    }
-                    catch {
-                        document = null;
-                    }
-                }
-            }
-            const signature = document ? JSON.stringify(document) : null;
-            if (signature === this.previousDocumentSignature) {
-                return;
-            }
-            this.previousDocumentSignature = signature;
-            this.runtimeChartDocument.set(document ? structuredClone(document) : null);
-        });
         effect(() => {
             const runtimeDocument = this.runtimeChartDocument();
             if (!runtimeDocument) {
@@ -2816,9 +2824,9 @@ class PraxisChartComponent {
         });
         effect(() => {
             const config = this.effectiveConfig();
-            const explicitData = this.data();
+            const explicitData = this.runtimeData();
             const remoteDataResolver = this.remoteDataResolver();
-            const queryContext = normalizePraxisDataQueryContext(this.queryContext());
+            const queryContext = normalizePraxisDataQueryContext(this.runtimeQueryContext());
             const nextSignature = explicitData === null || explicitData === undefined
                 ? this.buildRemoteSignature(config, queryContext)
                 : null;
@@ -2853,14 +2861,14 @@ class PraxisChartComponent {
         });
         effect(() => {
             const effectiveConfig = this.effectiveConfig();
-            const explicitData = this.data();
+            const explicitData = this.runtimeData();
             if (effectiveConfig.dataSource?.kind !== 'remote' || (explicitData !== null && explicitData !== undefined)) {
                 return;
             }
             if (this.remoteRuntimeState() === 'loading' || this.remoteResolvedData() !== null) {
                 return;
             }
-            const queryContext = normalizePraxisDataQueryContext(this.queryContext());
+            const queryContext = normalizePraxisDataQueryContext(this.runtimeQueryContext());
             const event = {
                 chartId: effectiveConfig.id,
                 dataSource: effectiveConfig.dataSource,
@@ -2996,12 +3004,13 @@ class PraxisChartComponent {
             return;
         }
         const focusReturnTarget = this.captureFocusReturnTarget();
+        let sessionSignature = this.configEditorSessionSignature();
         this.configEditorContextPending.set(true);
         try {
             const resolvedContext = await this.resolveConfigEditorContext(document);
-            const { PraxisChartConfigEditor } = await Promise.resolve().then(function () { return praxisChartConfigEditor; });
+            const { PraxisChartWidgetConfigEditor } = await Promise.resolve().then(function () { return praxisChartWidgetConfigEditor; });
             // Context resolution can outlive the host's customization session.
-            if (!this.canOpenConfigEditor())
+            if (!this.canOpenConfigEditor() || this.configEditorSessionSignature() !== sessionSignature)
                 return;
             this.clearEditorSessionSubscriptions();
             const ref = this.settingsPanel.open({
@@ -3009,27 +3018,29 @@ class PraxisChartComponent {
                 id: `chart.${document.chartId || this.effectiveConfig().id || 'praxis-chart'}`,
                 title: this.editChartLabel(),
                 content: {
-                    component: PraxisChartConfigEditor,
+                    component: PraxisChartWidgetConfigEditor,
                     inputs: {
-                        chartDocument: document,
-                        document,
-                        mode: 'edit',
-                        readonly: false,
-                        availableResources: this.resolveEditorOptions(this.availableResources(), resolvedContext['availableResources']),
-                        availableFields: this.resolveEditorOptions(this.availableFields(), resolvedContext['availableFields']),
-                        availableTargets: this.resolveEditorOptions(this.availableTargets(), resolvedContext['availableTargets']),
+                        inputs: this.configEditorInputs(document),
+                        context: {
+                            availableResources: this.resolveEditorOptions(this.availableResources(), resolvedContext['availableResources']),
+                            availableFields: this.resolveEditorOptions(this.availableFields(), resolvedContext['availableFields']),
+                            availableTargets: this.resolveEditorOptions(this.availableTargets(), resolvedContext['availableTargets']),
+                        },
                     },
                 },
             });
-            const appliedSubscription = ref.applied$
-                .subscribe((nextDocument) => {
-                if (!nextDocument) {
+            const consumeEditorValue = (value, phase) => {
+                if (!value?.inputs?.chartDocument || !this.canOpenConfigEditor()
+                    || this.configEditorSessionSignature() !== sessionSignature)
                     return;
-                }
-                const clone = structuredClone(nextDocument);
-                this.userEditedDocument.set(true);
-                this.runtimeChartDocument.set(clone);
-                this.chartDocumentApplied.emit(clone);
+                const nextInputs = value.inputs;
+                const clone = structuredClone(nextInputs.chartDocument);
+                const previousData = this.runtimeData();
+                const previousQueryContext = this.runtimeQueryContext();
+                const nextData = clone.source.kind !== 'praxis.stats' && Array.isArray(nextInputs.data)
+                    ? structuredClone(nextInputs.data)
+                    : null;
+                const nextQueryContext = structuredClone(nextInputs.queryContext ?? null);
                 const wasConfigDriven = !this.chartDocument();
                 let mappedConfig;
                 if (wasConfigDriven) {
@@ -3040,40 +3051,33 @@ class PraxisChartComponent {
                         mappedConfig = undefined;
                     }
                 }
-                this.chartDocumentPatchChange.emit({
-                    inputPatch: {
-                        chartDocument: structuredClone(clone),
-                        ...(wasConfigDriven && mappedConfig ? { config: mappedConfig } : {}),
-                    },
+                const inputPatch = {
+                    chartDocument: structuredClone(clone),
+                    ...(wasConfigDriven && mappedConfig ? { config: mappedConfig } : {}),
+                    ...(nextData !== null || previousData != null ? { data: structuredClone(nextData) } : {}),
+                    ...(nextQueryContext !== null || previousQueryContext != null
+                        ? { queryContext: structuredClone(nextQueryContext) } : {}),
+                };
+                this.runtimeOwner.set({
+                    owner: this.runtimeOwner().owner,
+                    document: clone, data: nextData, queryContext: nextQueryContext,
+                    // A later patch may omit config or already-cleared data/context while
+                    // the owner is still acknowledging those fields from the prior Apply.
+                    editorPatch: { ...this.runtimeOwner().editorPatch, ...structuredClone(inputPatch) },
                 });
-            });
+                sessionSignature = this.configEditorSessionSignature();
+                if (phase === 'apply')
+                    this.chartDocumentApplied.emit(structuredClone(clone));
+                else
+                    this.chartDocumentSaved.emit(structuredClone(clone));
+                this.chartDocumentPatchChange.emit({ inputPatch });
+            };
+            const appliedSubscription = ref.applied$
+                .subscribe((value) => consumeEditorValue(value, 'apply'));
             const savedSubscription = ref.saved$
-                .subscribe((nextDocument) => {
-                if (!nextDocument) {
-                    return;
-                }
-                const clone = structuredClone(nextDocument);
-                this.userEditedDocument.set(true);
-                this.runtimeChartDocument.set(clone);
-                this.chartDocumentSaved.emit(clone);
-                const wasConfigDriven = !this.chartDocument();
-                let mappedConfig;
-                if (wasConfigDriven) {
-                    try {
-                        mappedConfig = this.canonicalMapper.toPraxisChartConfig(clone);
-                    }
-                    catch {
-                        mappedConfig = undefined;
-                    }
-                }
-                this.chartDocumentPatchChange.emit({
-                    inputPatch: {
-                        chartDocument: structuredClone(clone),
-                        ...(wasConfigDriven && mappedConfig ? { config: mappedConfig } : {}),
-                    },
-                });
-            });
+                .subscribe((value) => consumeEditorValue(value, 'save'));
             const closedSubscription = ref.closed$?.subscribe(() => {
+                this.clearEditorSessionSubscriptions();
                 this.restoreFocus(focusReturnTarget);
             });
             this.editorSessionSubscriptions = [
@@ -3086,6 +3090,26 @@ class PraxisChartComponent {
             this.configEditorContextPending.set(false);
         }
     }
+    configEditorSessionSignature() {
+        return this.editorInputSignature(this.runtimeOwner());
+    }
+    editorInputSignature(value) {
+        return JSON.stringify(value, (_key, current) => {
+            if (!current || typeof current !== 'object' || Array.isArray(current))
+                return current;
+            return Object.fromEntries(Object.keys(current).sort().map((key) => [key, current[key]]));
+        }) ?? '';
+    }
+    configEditorInputs(document) {
+        const data = this.runtimeData();
+        const queryContext = this.runtimeQueryContext();
+        return {
+            chartDocument: structuredClone(document),
+            ...(!this.chartDocument() ? { config: structuredClone(this.config()) } : {}),
+            ...(data != null ? { data: structuredClone(data) } : {}),
+            ...(queryContext != null ? { queryContext: structuredClone(queryContext) } : {}),
+        };
+    }
     async resolveConfigEditorContext(document) {
         const metadata = this.componentMetadataRegistry.get('praxis-chart');
         const resolver = metadata?.configEditor?.contextResolver;
@@ -3097,9 +3121,7 @@ class PraxisChartComponent {
                 componentId: metadata.id,
                 widgetKey: document.chartId || this.effectiveConfig().id || 'praxis-chart',
                 widgetType: metadata.id,
-                persistedInputs: {
-                    chartDocument: structuredClone(document),
-                },
+                persistedInputs: this.configEditorInputs(document),
                 metadata,
             });
             const candidate = this.isConfigEditorContextResult(resolved)
@@ -3341,7 +3363,7 @@ class PraxisChartComponent {
             dataSource: config.dataSource,
             interactions: config.interactions,
             filterCriteria: this.filterCriteria(),
-            queryContext: normalizePraxisDataQueryContext(this.queryContext()),
+            queryContext: normalizePraxisDataQueryContext(this.runtimeQueryContext()),
             data: this.resolvedData(),
         });
     }
@@ -3867,7 +3889,7 @@ class PraxisChartComponent {
         ></div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{box-sizing:border-box;position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{box-sizing:border-box;position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger,.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisChartComponent, decorators: [{
             type: Component,
@@ -4072,7 +4094,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         ></div>
       }
     </section>
-  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{box-sizing:border-box;position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger{position:absolute;top:10px;right:10px;z-index:3;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
+  `, styles: [":host{display:block;min-height:var(--praxis-chart-runtime-height, 320px);min-width:0;color:var(--md-sys-color-on-surface, #1a1b20)}:host(.praxis-chart-host-fill-container){height:100%;min-height:0}:host-context(.pdx-shell){color:inherit}:host-context(.pdx-shell.no-shell) .praxis-chart-shell,:host-context(.pdx-shell.body-fill) .praxis-chart-shell,:host-context(.pdx-shell.expanded) .praxis-chart-shell,:host-context(.pdx-shell.fullscreen) .praxis-chart-shell{height:100%!important}.praxis-chart-shell{box-sizing:border-box;position:relative;width:100%;height:100%;min-height:240px;border-radius:var(--praxis-chart-config-surface-radius, var(--praxis-chart-surface-radius, 8px));overflow:hidden;background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-surface-bg, var(--md-sys-color-surface-container-lowest, #fff)) );border-color:var( --praxis-chart-config-surface-border, var( --praxis-chart-surface-border, color-mix(in srgb, var(--md-sys-color-outline, #c5c7ce) 44%, transparent) ) );border-style:solid;border-width:var(--praxis-chart-config-surface-border-width, 1px)}.praxis-chart-shell-fill-container{min-height:0}:host-context(.pdx-shell) .praxis-chart-shell:not(.praxis-chart-shell-contained),.praxis-chart-shell-embedded{border-width:var( --praxis-chart-config-surface-border-width, var(--praxis-chart-embedded-surface-border-width, 0) );border-radius:var( --praxis-chart-config-surface-radius, var(--praxis-chart-embedded-surface-radius, 0) );background:var( --praxis-chart-config-surface-bg, var(--praxis-chart-embedded-surface-bg, transparent) )}.praxis-chart-settings-trigger,.praxis-chart-data-trigger{position:absolute;top:10px;right:10px;z-index:5;--praxis-icon-button-filled-background: color-mix(in srgb, var(--md-sys-color-surface, #fff) 88%, rgba(18, 99, 180, .12));--praxis-icon-button-filled-foreground: var(--md-sys-color-on-surface-variant, #44474f);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.praxis-chart-data-trigger-with-settings{right:50px}.praxis-chart-accessible-data{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;overflow:hidden;padding:52px 16px 14px;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20));background:var(--md-sys-color-surface-container-lowest, #fff)}.praxis-chart-accessible-data--shell-controlled{padding-top:16px}.praxis-chart-accessible-header{flex-shrink:0;margin-bottom:8px}.praxis-chart-accessible-header h3{margin:0;font-size:.95rem;font-weight:600;line-height:1.4}.praxis-chart-table-container{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;overscroll-behavior:contain}.praxis-chart-accessible-data table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem}.praxis-chart-accessible-data caption{padding:0 0 8px;text-align:left;color:inherit;opacity:.85;font-size:.8125rem}.praxis-chart-accessible-data thead{position:sticky;top:0;z-index:2}.praxis-chart-accessible-data thead th{font-weight:600;background:var(--praxis-chart-accessible-thead-bg, inherit);box-shadow:0 1px color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent)}.praxis-chart-accessible-data th,.praxis-chart-accessible-data td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 44%,transparent);text-align:left}.praxis-chart-col-value{text-align:right!important;font-variant-numeric:tabular-nums}.praxis-chart-sort-header{appearance:none;display:inline-flex;align-items:center;gap:4px;padding:2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer;transition:background-color .15s ease}.praxis-chart-sort-header:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-sort-header:focus-visible{outline:2px solid currentColor;outline-offset:1px}.praxis-chart-sort-header--numeric{margin-left:auto}.praxis-chart-sort-indicator{font-size:.75rem;line-height:1;opacity:.85}.praxis-chart-point-action{appearance:none;padding:4px 6px;border:0;border-radius:4px;color:inherit;background:transparent;font:inherit;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:background-color .15s ease}.praxis-chart-point-action:hover{background:color-mix(in srgb,currentColor 8%,transparent)}.praxis-chart-point-action:focus-visible{outline:3px solid currentColor;outline-offset:2px}.praxis-chart-point-action[aria-pressed=true]{color:var(--md-sys-color-on-primary-container, #001b3f);background:var(--md-sys-color-primary-container, #d7e3ff)}.praxis-chart-host{width:100%;height:100%;min-height:inherit}.praxis-chart-host--data-hidden{visibility:hidden;pointer-events:none}.praxis-chart-state{height:100%;min-height:min(240px,100%);display:grid;align-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}.praxis-chart-state-copy{display:grid;gap:6px;justify-items:center}.praxis-chart-state-title{font-size:1rem;font-weight:600;color:var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface, #1a1b20))}.praxis-chart-state-description{font-size:.925rem;color:color-mix(in srgb,var(--praxis-chart-config-text-color, var(--md-sys-color-on-surface-variant, #5a5d67)) 72%,transparent);max-width:36rem}.praxis-chart-loading-hero{width:min(100%,320px);display:grid;gap:14px}.praxis-chart-loading-summary{display:flex;gap:8px;justify-content:center}.praxis-chart-loading-chip,.praxis-chart-loading-bar{border-radius:999px;background:linear-gradient(90deg,#1263b414,#1263b438,#1263b414);background-size:200% 100%;animation:praxis-chart-loading-wave 1.2s ease-in-out infinite}.praxis-chart-loading-chip{display:block;width:104px;height:12px}.praxis-chart-loading-chip--short{width:64px}.praxis-chart-loading-plot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:10px;height:108px;padding:12px 8px 4px;border-radius:8px;background:color-mix(in srgb,var(--md-sys-color-surface-container, #eef3f8) 72%,transparent);border:1px solid rgba(18,99,180,.08)}.praxis-chart-loading-bar{display:block;width:100%}.praxis-chart-loading-bar--1{height:32%}.praxis-chart-loading-bar--2{height:68%}.praxis-chart-loading-bar--3{height:48%}.praxis-chart-loading-bar--4{height:78%}.praxis-chart-loading-bar--5{height:56%}@keyframes praxis-chart-loading-wave{0%{background-position:100% 0}to{background-position:-100% 0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], resourceKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceKey", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], chartDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartDocument", required: false }] }], filterCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterCriteria", required: false }] }], queryContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "queryContext", required: false }] }], remoteDataResolver: [{ type: i0.Input, args: [{ isSignal: true, alias: "remoteDataResolver", required: false }] }], enableCustomization: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCustomization", required: false }] }], availableResources: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargets: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], pointClick: [{ type: i0.Output, args: ["pointClick"] }], pointAction: [{ type: i0.Output, args: ["pointAction"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], drillDown: [{ type: i0.Output, args: ["drillDown"] }], crossFilter: [{ type: i0.Output, args: ["crossFilter"] }], queryRequest: [{ type: i0.Output, args: ["queryRequest"] }], loadStateChange: [{ type: i0.Output, args: ["loadStateChange"] }], chartDocumentApplied: [{ type: i0.Output, args: ["chartDocumentApplied"] }], chartDocumentSaved: [{ type: i0.Output, args: ["chartDocumentSaved"] }], chartDocumentPatchChange: [{ type: i0.Output, args: ["chartDocumentPatchChange"] }], chartHost: [{ type: i0.ViewChild, args: ['chartHost', { isSignal: true }] }] } });
 function mergeRemoteQueryContext(config, queryContext, runtimeFilters) {
     const dataSource = config.dataSource;
@@ -9932,14 +9954,6 @@ class PraxisChartConfigEditor {
                 consolidatedValue = avgValue;
                 break;
         }
-        const scale = this.normalizedDocument().gauge?.scale;
-        if (scale && Number.isFinite(scale.min) && Number.isFinite(scale.max) && scale.max > scale.min) {
-            if (consolidatedValue < scale.min || consolidatedValue > scale.max) {
-                consolidatedValue = avgValue >= scale.min && avgValue <= scale.max
-                    ? avgValue
-                    : Math.min(scale.max, Math.max(scale.min, consolidatedValue));
-            }
-        }
         const consolidatedRow = {
             ...(rows[0] ? structuredClone(rows[0]) : {}),
             [dimField]: String(rows[0]?.[dimField] ?? 'Total'),
@@ -10444,11 +10458,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                     ], providers: [providePraxisChartsI18n()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"editor-shell\">\n  <div class=\"editor-nav\">\n    @for (section of sections; track section.id) {\n      <button\n        mat-stroked-button\n        type=\"button\"\n        [attr.data-testid]=\"'chart-editor-section-' + section.id\"\n        [class.active]=\"activeSection() === section.id\"\n        (click)=\"setSection(section.id)\"\n      >\n        {{ t(section.labelKey, section.fallback) }}\n      </button>\n    }\n  </div>\n\n  <div class=\"editor-layout\">\n    <div class=\"editor-form\">\n      <mat-card class=\"editor-card\">\n        <mat-card-content>\n          @switch (activeSection()) {\n            @case ('general') {\n              <div class=\"editor-grid\">\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.chartId', 'Chart ID') }}</mat-label>\n                  <input matInput [ngModel]=\"doc().chartId || ''\" (ngModelChange)=\"setChartId($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.kind', 'Kind') }}</mat-label>\n                  <mat-select [ngModel]=\"doc().kind\" (ngModelChange)=\"setKind($event)\" [disabled]=\"isReadonly()\">\n                    @for (kind of chartKinds; track kind) {\n                      <mat-option [value]=\"kind\">\n                        {{ t('praxis.charts.editor.kind.' + kind, kind) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.title', 'Title') }}</mat-label>\n                  <input matInput data-testid=\"chart-editor-title-input\" [ngModel]=\"titleValue()\" (ngModelChange)=\"setTitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.subtitle', 'Subtitle') }}</mat-label>\n                  <input matInput [ngModel]=\"subtitleValue()\" (ngModelChange)=\"setSubtitle($event)\" [disabled]=\"isReadonly()\" />\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.sizingMode', 'Sizing') }}</mat-label>\n                  <mat-select [ngModel]=\"sizingModeValue()\" (ngModelChange)=\"setSizingMode($event)\" [disabled]=\"isReadonly()\">\n                    @for (mode of sizingModes; track mode) {\n                      <mat-option [value]=\"mode\">\n                        {{ t('praxis.charts.editor.sizing.' + mode, mode) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                  <mat-hint>{{ t('praxis.charts.editor.hint.sizingMode', 'Use fill-container only when the host widget provides a defined body height.') }}</mat-hint>\n                </mat-form-field>\n\n                @if (sizingModeValue() === 'fixed') {\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.height', 'Height') }}</mat-label>\n                    <input matInput [ngModel]=\"heightValue()\" (ngModelChange)=\"setSizingHeight($event)\" [disabled]=\"isReadonly()\" />\n                    <mat-hint>{{ t('praxis.charts.editor.hint.height', 'Numbers are saved as pixels; CSS lengths such as 20rem are also accepted.') }}</mat-hint>\n                  </mat-form-field>\n                }\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.minHeight', 'Minimum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMinHeightValue()\" (ngModelChange)=\"setSizingMinHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.minHeight', 'Set a readable minimum for compact dashboard widgets.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.maxHeight', 'Maximum height') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingMaxHeightValue()\" (ngModelChange)=\"setSizingMaxHeight($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.maxHeight', 'Leave empty unless the chart must stop growing inside a flexible layout.') }}</mat-hint>\n                </mat-form-field>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.aspectRatio', 'Aspect ratio') }}</mat-label>\n                  <input matInput [ngModel]=\"sizingAspectRatioValue()\" (ngModelChange)=\"setSizingAspectRatio($event)\" [disabled]=\"isReadonly()\" />\n                  <mat-hint>{{ t('praxis.charts.editor.hint.aspectRatio', 'Optional. Use values such as 1.777 or 16 / 9.') }}</mat-hint>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('data') {\n              <div class=\"editor-stack\">\n                <div class=\"editor-grid\">\n                  <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                    <mat-label>{{ t('praxis.charts.editor.field.sourceKind', 'Source') }}</mat-label>\n                    <mat-select data-testid=\"chart-editor-source-kind\" [ngModel]=\"doc().source.kind\" (ngModelChange)=\"setSourceKind($event)\" [disabled]=\"isReadonly()\">\n                      @for (sourceKind of sourceKinds; track sourceKind) {\n                        <mat-option [value]=\"sourceKind\">\n                          {{ t('praxis.charts.editor.sourceKind.' + (sourceKind === 'praxis.stats' ? 'praxisStats' : 'derived'), sourceKind) }}\n                        </mat-option>\n                      }\n                    </mat-select>\n                  </mat-form-field>\n\n                  @if (doc().source.kind === 'praxis.stats') {\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.resource', 'Resource') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-resource\" [ngModel]=\"resourceValue()\" (ngModelChange)=\"setResource($event)\" [disabled]=\"isReadonly() || resourceCatalogUnavailable()\">\n                        @for (resource of resourceOptions(); track resource.id) {\n                          <mat-option [value]=\"resource.path\">{{ resource.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (resourceCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.resourceMissing', 'Resource catalog is required for governed praxis.stats authoring.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.operation', 'Operation') }}</mat-label>\n                      <mat-select\n                        data-testid=\"chart-editor-operation\"\n                        [ngModel]=\"doc().source.operation || 'group-by'\"\n                        (ngModelChange)=\"setOperation($event)\"\n                        [disabled]=\"isReadonly() || operationCatalogUnavailable()\"\n                      >\n                        @for (operation of operationOptions(); track operation) {\n                          <mat-option [value]=\"operation\">\n                            {{ t('praxis.charts.editor.operation.' + (operation === 'group-by' ? 'groupBy' : operation), operation) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                      @if (operationCatalogUnavailable()) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.operationMissing', 'Selected resource does not publish authorable stats operations.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n                  }\n                </div>\n\n                @if (showTimeseriesControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.timeseriesTitle', 'Timeseries options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.granularity', 'Granularity') }}</mat-label>\n                        <mat-select [ngModel]=\"granularityValue()\" (ngModelChange)=\"setGranularity($event)\" [disabled]=\"isReadonly()\">\n                          @for (granularity of timeGranularities; track granularity) {\n                            <mat-option [value]=\"granularity\">\n                              {{ t('praxis.charts.editor.granularity.' + granularity, granularity) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-slide-toggle\n                        [ngModel]=\"fillGapsValue()\"\n                        (ngModelChange)=\"setFillGaps($event)\"\n                        [disabled]=\"isReadonly()\"\n                      >\n                        {{ t('praxis.charts.editor.field.fillGaps', 'Fill missing intervals') }}\n                      </mat-slide-toggle>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showDistributionControls()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.distributionTitle', 'Distribution options') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.distributionMode', 'Distribution mode') }}</mat-label>\n                        <mat-select data-testid=\"chart-editor-distribution-mode\" [ngModel]=\"distributionModeValue()\" (ngModelChange)=\"setDistributionMode($event)\" [disabled]=\"isReadonly()\">\n                          @for (mode of distributionModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.distributionMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      @if (distributionModeValue() === 'histogram') {\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketSize', 'Bucket size') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-size\" [ngModel]=\"bucketSizeValue()\" (ngModelChange)=\"setBucketSize($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.bucketCount', 'Bucket count') }}</mat-label>\n                          <input matInput data-testid=\"chart-editor-bucket-count\" [ngModel]=\"bucketCountValue()\" (ngModelChange)=\"setBucketCount($event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n                      }\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComparisonControls()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-comparison-options\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comparisonTitle', 'Comparison period') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-grid\">\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPeriodField', 'Period field') }}</mat-label>\n                        @if (fieldOptions('time').length) {\n                          <mat-select\n                            [ngModel]=\"comparisonPeriodFieldValue()\"\n                            (ngModelChange)=\"setComparisonPeriodField($event)\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            @for (field of fieldOptions('time'); track field.field) {\n                              <mat-option [value]=\"field.field\">{{ field.label || field.field }}</mat-option>\n                            }\n                          </mat-select>\n                        } @else {\n                          <mat-select [ngModel]=\"comparisonPeriodFieldValue()\" [disabled]=\"true\"></mat-select>\n                          <mat-hint>{{ t('praxis.charts.editor.catalog.comparisonPeriodFieldsMissing', 'No governed time-series field is available for comparison periods.') }}</mat-hint>\n                        }\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonTimezone', 'Timezone') }}</mat-label>\n                        <input\n                          matInput\n                          [ngModel]=\"comparisonPeriodTimezoneValue()\"\n                          (ngModelChange)=\"setComparisonPeriodTimezone($event)\"\n                          [disabled]=\"isReadonly()\"\n                        />\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonPreset', 'Period preset') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodPresetValue()\"\n                          (ngModelChange)=\"setComparisonPeriodPreset($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (preset of comparisonPeriodPresets; track preset) {\n                            <mat-option [value]=\"preset\">\n                              {{ t('praxis.charts.editor.comparisonPreset.' + preset, preset) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.comparisonMode', 'Comparison mode') }}</mat-label>\n                        <mat-select\n                          [ngModel]=\"comparisonPeriodModeValue()\"\n                          (ngModelChange)=\"setComparisonPeriodMode($event)\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          @for (mode of comparisonPeriodModes; track mode) {\n                            <mat-option [value]=\"mode\">\n                              {{ t('praxis.charts.editor.comparisonMode.' + mode, mode) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (doc().source.kind === 'derived') {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-local-data\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.localData.title', 'Local dataset (inputs.data)') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.localData.caption', 'Edit the local records rendered when the data source is derived.') }}\n                      </p>\n\n                      @if (canConsolidateGaugeLocalData()) {\n                        <div class=\"editor-row-actions\">\n                          <button\n                            mat-stroked-button\n                            type=\"button\"\n                            data-testid=\"chart-local-data-consolidate-gauge\"\n                            (click)=\"consolidateGaugeLocalData()\"\n                            [disabled]=\"isReadonly()\"\n                          >\n                            {{ t('praxis.charts.editor.localData.consolidateGauge', 'Consolidate to 1 bucket for gauge') }}\n                          </button>\n                        </div>\n                      }\n\n                      @if (localDataRows().length) {\n                        @for (row of localDataRows(); track $index; let rowIndex = $index) {\n                          <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-local-data-row-' + rowIndex\">\n                            <div class=\"editor-grid\">\n                              @for (dimField of localDataDimensionFields(); track dimField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ dimField }}</mat-label>\n                                  <input\n                                    matInput\n                                    [attr.data-testid]=\"'chart-local-data-dim-' + rowIndex + '-' + dimField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, dimField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, dimField, $event, 'dimension')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                              @for (metricField of localDataMetricFields(); track metricField) {\n                                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                                  <mat-label>{{ metricField }}</mat-label>\n                                  <input\n                                    matInput\n                                    type=\"number\"\n                                    [attr.data-testid]=\"'chart-local-data-metric-' + rowIndex + '-' + metricField\"\n                                    [ngModel]=\"localDataCellStringValue(rowIndex, metricField)\"\n                                    (ngModelChange)=\"setLocalDataCellValue(rowIndex, metricField, $event, 'metric')\"\n                                    [disabled]=\"isReadonly()\"\n                                  />\n                                </mat-form-field>\n                              }\n                            </div>\n                            <div class=\"editor-row-actions\">\n                              <button\n                                mat-button\n                                type=\"button\"\n                                [attr.data-testid]=\"'chart-local-data-remove-row-' + rowIndex\"\n                                (click)=\"removeLocalDataRow(rowIndex)\"\n                                [disabled]=\"isReadonly()\"\n                              >\n                                {{ t('praxis.charts.editor.localData.removeRow', 'Remove record') }}\n                              </button>\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <div class=\"editor-empty\" data-testid=\"chart-local-data-empty\">\n                          {{ t('praxis.charts.editor.localData.empty', 'No local records configured yet. Add a record to replace the synthetic preview sample.') }}\n                        </div>\n                      }\n\n                      <div>\n                        <button\n                          mat-stroked-button\n                          type=\"button\"\n                          data-testid=\"chart-local-data-add-row\"\n                          (click)=\"addLocalDataRow()\"\n                          [disabled]=\"isReadonly()\"\n                        >\n                          {{ t('praxis.charts.editor.localData.addRow', 'Add record') }}\n                        </button>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n              </div>\n            }\n\n            @case ('motion') {\n              <div class=\"editor-grid\">\n                <mat-slide-toggle\n                  [ngModel]=\"normalizedDocument().motion?.enabled !== false\"\n                  (ngModelChange)=\"setMotionEnabled($event)\"\n                  [disabled]=\"isReadonly()\"\n                >\n                  {{ t('praxis.charts.editor.field.motionEnabled', 'Enable animations') }}\n                </mat-slide-toggle>\n\n                <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                  <mat-label>{{ t('praxis.charts.editor.field.motionPreset', 'Motion preset') }}</mat-label>\n                  <mat-select\n                    [ngModel]=\"normalizedDocument().motion?.preset || 'standard'\"\n                    (ngModelChange)=\"setMotionPreset($event)\"\n                    [disabled]=\"isReadonly() || normalizedDocument().motion?.enabled === false\"\n                  >\n                    @for (preset of motionPresets; track preset) {\n                      <mat-option [value]=\"preset\">\n                        {{ t('praxis.charts.editor.motionPreset.' + preset, preset) }}\n                      </mat-option>\n                    }\n                  </mat-select>\n                </mat-form-field>\n              </div>\n            }\n\n            @case ('appearance') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.featuresTitle', 'Display features') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('legend')\"\n                      (ngModelChange)=\"setFeatureEnabled('legend', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.legendEnabled', 'Show legend') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('labels')\"\n                      (ngModelChange)=\"setFeatureEnabled('labels', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.labelsEnabled', 'Show labels') }}\n                    </mat-slide-toggle>\n\n                    <mat-slide-toggle\n                      [ngModel]=\"featureEnabled('tooltip')\"\n                      (ngModelChange)=\"setFeatureEnabled('tooltip', $event)\"\n                      [disabled]=\"isReadonly()\"\n                    >\n                      {{ t('praxis.charts.editor.field.tooltipEnabled', 'Show tooltip') }}\n                    </mat-slide-toggle>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.paletteTitle', 'Palette') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.themeVariant', 'Theme variant') }}</mat-label>\n                      <mat-select [ngModel]=\"themeVariantValue()\" (ngModelChange)=\"setThemeVariant($event)\" [disabled]=\"isReadonly()\">\n                        <mat-option [value]=\"''\">\n                          {{ t('praxis.charts.editor.themeVariant.none', 'No variant') }}\n                        </mat-option>\n                        @for (variant of themeVariants; track variant) {\n                          <mat-option [value]=\"variant\">\n                            {{ t('praxis.charts.editor.themeVariant.' + variant, variant) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.paletteMode', 'Palette mode') }}</mat-label>\n                      <mat-select [ngModel]=\"paletteModeValue()\" (ngModelChange)=\"setPaletteMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of paletteModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.paletteMode.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    @if (paletteModeValue() === 'token') {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.paletteToken', 'Palette token') }}</mat-label>\n                        <mat-select [ngModel]=\"paletteTokenValue()\" (ngModelChange)=\"setPaletteToken($event)\" [disabled]=\"isReadonly()\">\n                          @for (token of paletteTokens; track token) {\n                            <mat-option [value]=\"token\">\n                              {{ t('praxis.charts.editor.paletteToken.' + token, token) }}\n                            </mat-option>\n                          }\n                        </mat-select>\n                      </mat-form-field>\n                    } @else {\n                      <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                        <mat-label>{{ t('praxis.charts.editor.field.palette', 'Palette colors') }}</mat-label>\n                        <textarea\n                          matInput\n                          rows=\"3\"\n                          [ngModel]=\"paletteValue()\"\n                          (ngModelChange)=\"setPalette($event)\"\n                          [disabled]=\"isReadonly()\"\n                        ></textarea>\n                      </mat-form-field>\n                    }\n\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.paletteHint', 'Use a registered token or comma-separated colors to persist theme.palette in the canonical contract.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.surfaceTitle', 'Surface') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content>\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.surfaceMode', 'Surface mode') }}</mat-label>\n                      <mat-select [ngModel]=\"surfaceModeValue()\" (ngModelChange)=\"setSurfaceMode($event)\" [disabled]=\"isReadonly()\">\n                        @for (mode of surfaceModes; track mode) {\n                          <mat-option [value]=\"mode\">\n                            {{ t('praxis.charts.editor.surface.' + mode, mode) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n                    <p class=\"editor-caption\">\n                      {{ t('praxis.charts.editor.appearance.surfaceHint', 'Use embedded for dashboard widgets and contained only when the chart must own its visual surface.') }}\n                    </p>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.appearance.statesTitle', 'State messages') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyTitle', 'Empty title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('empty')\" (ngModelChange)=\"setStateTitle('empty', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.emptyDescription', 'Empty description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('empty')\" (ngModelChange)=\"setStateDescription('empty', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingTitle', 'Loading title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('loading')\" (ngModelChange)=\"setStateTitle('loading', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.loadingDescription', 'Loading description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('loading')\" (ngModelChange)=\"setStateDescription('loading', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n\n                    <div class=\"editor-row-card\">\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorTitle', 'Error title') }}</mat-label>\n                          <input matInput [ngModel]=\"stateTitle('error')\" (ngModelChange)=\"setStateTitle('error', $event)\" [disabled]=\"isReadonly()\" />\n                        </mat-form-field>\n\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.errorDescription', 'Error description') }}</mat-label>\n                          <textarea matInput rows=\"2\" [ngModel]=\"stateDescription('error')\" (ngModelChange)=\"setStateDescription('error', $event)\" [disabled]=\"isReadonly()\"></textarea>\n                        </mat-form-field>\n                      </div>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('analytics') {\n              <div class=\"editor-stack\">\n                @if (showGaugePanel()) {\n                  <mat-card class=\"editor-card\" data-testid=\"chart-editor-gauge-scale\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.gaugeTitle', 'Gauge scale') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content class=\"editor-stack\">\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.gaugeHint', 'Gauge charts render exactly one bucket and one metric. Remote stats use group-by with limit 1; values outside the scale fail instead of being clamped.') }}\n                      </p>\n                      <div class=\"editor-grid\">\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMin', 'Scale minimum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-min\"\n                            [ngModel]=\"gaugeMinValue()\"\n                            (ngModelChange)=\"setGaugeMin($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                        <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                          <mat-label>{{ t('praxis.charts.editor.field.gaugeMax', 'Scale maximum') }}</mat-label>\n                          <input\n                            matInput\n                            type=\"number\"\n                            data-testid=\"chart-editor-gauge-max\"\n                            [ngModel]=\"gaugeMaxValue()\"\n                            (ngModelChange)=\"setGaugeMax($event)\"\n                            [disabled]=\"isReadonly()\"\n                          />\n                        </mat-form-field>\n                      </div>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showComboPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.comboTitle', 'Combo guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.comboHint', 'Combo charts require at least two metrics and allow per-metric axis and series kind mapping.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showPieDonutPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.pieDonutTitle', 'Composition guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.pieDonutHint', 'Pie, donut, funnel, pyramid and treemap charts keep one metric and use the first dimension as the category segment.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                @if (showScatterPanel()) {\n                  <mat-card class=\"editor-card\">\n                    <mat-card-header>\n                      <mat-card-title>{{ t('praxis.charts.editor.specialization.scatterTitle', 'Scatter guidance') }}</mat-card-title>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <p class=\"editor-caption\">\n                        {{ t('praxis.charts.editor.specialization.scatterHint', 'With one metric, scatter uses the first dimension as X and the metric as Y. With two metrics, the dimension identifies the grouped bucket and the metrics map to X and Y.') }}\n                      </p>\n                    </mat-card-content>\n                  </mat-card>\n                }\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.dimensionsTitle', 'Dimensions') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (dimension of dimensions(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-dimension-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimension', 'Dimension') }}</mat-label>\n                            @if (fieldOptions('dimension').length) {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('dimension'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"dimension.field || ''\" (ngModelChange)=\"setDimensionField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.dimensionFieldsMissing', 'No governed dimensions are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-dimension-role-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.dimensionRole', 'Dimension role') }}</mat-label>\n                            <mat-select [ngModel]=\"dimension.role || 'category'\" (ngModelChange)=\"setDimensionRole($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (role of dimensionRoles; track role) {\n                                <mat-option [value]=\"role\">\n                                  {{ t('praxis.charts.editor.dimensionRole.' + role, role) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" (click)=\"removeDimension($index)\" [disabled]=\"isReadonly() || dimensions().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeDimension', 'Remove dimension') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-dimension\" (click)=\"addDimension()\" [disabled]=\"isReadonly()\">\n                        {{ t('praxis.charts.editor.analytics.addDimension', 'Add dimension') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.analytics.metricsTitle', 'Metrics') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-stack\">\n                    @for (metric of metrics(); track $index) {\n                      <div class=\"editor-row-card\" [attr.data-testid]=\"'chart-editor-metric-row-' + $index\">\n                        <div class=\"editor-grid\">\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-field-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metric', 'Metric') }}</mat-label>\n                            @if (fieldOptions('metric').length) {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (field of fieldOptions('metric'); track field.field) {\n                                  <mat-option [value]=\"field.field\">{{ fieldOptionLabel(field) }}</mat-option>\n                                }\n                              </mat-select>\n                            } @else {\n                              <mat-select [ngModel]=\"metric.field || ''\" (ngModelChange)=\"setMetricField($index, $event)\" [disabled]=\"true\"></mat-select>\n                              <mat-hint>{{ t('praxis.charts.editor.catalog.metricFieldsMissing', 'No governed metrics are available for the current resource and operation.') }}</mat-hint>\n                            }\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-label-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricLabel', 'Metric label') }}</mat-label>\n                            <input matInput [ngModel]=\"metric.label || ''\" (ngModelChange)=\"setMetricLabel($index, $event)\" [disabled]=\"isReadonly()\" />\n                          </mat-form-field>\n\n                          <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-aggregation-' + $index\">\n                            <mat-label>{{ t('praxis.charts.editor.field.metricAggregation', 'Aggregation') }}</mat-label>\n                            <mat-select [ngModel]=\"metric.aggregation || 'sum'\" (ngModelChange)=\"setMetricAggregation($index, $event)\" [disabled]=\"isReadonly()\">\n                              @for (aggregation of metricAggregationOptions(metric.field); track aggregation) {\n                                <mat-option [value]=\"aggregation\">\n                                  {{ t('praxis.charts.editor.metricAggregation.' + aggregation, aggregation) }}\n                                </mat-option>\n                              }\n                            </mat-select>\n                          </mat-form-field>\n\n                          @if (showMetricAxisControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-axis-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricAxis', 'Axis') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.axis || 'primary'\" (ngModelChange)=\"setMetricAxis($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (axis of metricAxes; track axis) {\n                                  <mat-option [value]=\"axis\">\n                                    {{ t('praxis.charts.editor.metricAxis.' + axis, axis) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n\n                          @if (showMetricSeriesKindControls()) {\n                            <mat-form-field class=\"editor-field\" appearance=\"outline\" [attr.data-testid]=\"'chart-editor-metric-series-kind-' + $index\">\n                              <mat-label>{{ t('praxis.charts.editor.field.metricSeriesKind', 'Series kind') }}</mat-label>\n                              <mat-select [ngModel]=\"metric.seriesKind || 'bar'\" (ngModelChange)=\"setMetricSeriesKind($index, $event)\" [disabled]=\"isReadonly()\">\n                                @for (seriesKind of metricSeriesKinds; track seriesKind) {\n                                  <mat-option [value]=\"seriesKind\">\n                                    {{ t('praxis.charts.editor.metricSeriesKind.' + seriesKind, seriesKind) }}\n                                  </mat-option>\n                                }\n                              </mat-select>\n                            </mat-form-field>\n                          }\n                        </div>\n\n                        <div class=\"editor-row-actions\">\n                          <button mat-button type=\"button\" [attr.data-testid]=\"'chart-editor-remove-metric-' + $index\" (click)=\"removeMetric($index)\" [disabled]=\"isReadonly() || metrics().length <= 1\">\n                            {{ t('praxis.charts.editor.analytics.removeMetric', 'Remove metric') }}\n                          </button>\n                        </div>\n                      </div>\n                    }\n\n                    <div>\n                      <button mat-stroked-button type=\"button\" data-testid=\"chart-editor-add-metric\" (click)=\"addMetric()\" [disabled]=\"isReadonly() || !canAddMetric()\">\n                        {{ t('praxis.charts.editor.analytics.addMetric', 'Add metric') }}\n                      </button>\n                    </div>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('events') {\n              <div class=\"editor-stack\">\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-pointClick\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.pointClickTitle', 'Point click') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-action\" [ngModel]=\"eventAction('pointClick')\" (ngModelChange)=\"setEventAction('pointClick', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-pointClick-target\" [ngModel]=\"eventTarget('pointClick')\" (ngModelChange)=\"setEventTarget('pointClick', $event)\" [disabled]=\"isReadonly() || !eventAction('pointClick') || targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')\">\n                        @for (target of targetOptions(eventAction('pointClick'), 'pointClick'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('pointClick'), 'pointClick')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-pointClick-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('pointClick')\"\n                        (ngModelChange)=\"setEventMapping('pointClick', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('pointClick')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-selectionChange\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.selectionChangeTitle', 'Selection change') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-action\" [ngModel]=\"eventAction('selectionChange')\" (ngModelChange)=\"setEventAction('selectionChange', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-selectionChange-target\" [ngModel]=\"eventTarget('selectionChange')\" (ngModelChange)=\"setEventTarget('selectionChange', $event)\" [disabled]=\"isReadonly() || !eventAction('selectionChange') || targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')\">\n                        @for (target of targetOptions(eventAction('selectionChange'), 'selectionChange'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('selectionChange'), 'selectionChange')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-selectionChange-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('selectionChange')\"\n                        (ngModelChange)=\"setEventMapping('selectionChange', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('selectionChange')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-drillDown\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.drillDownTitle', 'Drill down') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-action\" [ngModel]=\"eventAction('drillDown')\" (ngModelChange)=\"setEventAction('drillDown', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-drillDown-target\" [ngModel]=\"eventTarget('drillDown')\" (ngModelChange)=\"setEventTarget('drillDown', $event)\" [disabled]=\"isReadonly() || !eventAction('drillDown') || targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')\">\n                        @for (target of targetOptions(eventAction('drillDown'), 'drillDown'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('drillDown'), 'drillDown')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-drillDown-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('drillDown')\"\n                        (ngModelChange)=\"setEventMapping('drillDown', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('drillDown')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n\n                <mat-card class=\"editor-card\" data-testid=\"chart-editor-event-crossFilter\">\n                  <mat-card-header>\n                    <mat-card-title>{{ t('praxis.charts.editor.events.crossFilterTitle', 'Cross filter') }}</mat-card-title>\n                  </mat-card-header>\n                  <mat-card-content class=\"editor-grid\">\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventAction', 'Action') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-action\" [ngModel]=\"eventAction('crossFilter')\" (ngModelChange)=\"setEventAction('crossFilter', $event)\" [disabled]=\"isReadonly()\">\n                        <mat-option value=\"\">{{ t('praxis.charts.editor.events.none', 'None') }}</mat-option>\n                        @for (action of eventActionOptions; track action) {\n                          <mat-option [value]=\"action\">\n                            {{ t('praxis.charts.editor.eventAction.' + action, action) }}\n                          </mat-option>\n                        }\n                      </mat-select>\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventTarget', 'Target') }}</mat-label>\n                      <mat-select data-testid=\"chart-editor-event-crossFilter-target\" [ngModel]=\"eventTarget('crossFilter')\" (ngModelChange)=\"setEventTarget('crossFilter', $event)\" [disabled]=\"isReadonly() || !eventAction('crossFilter') || targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')\">\n                        @for (target of targetOptions(eventAction('crossFilter'), 'crossFilter'); track target.id) {\n                          <mat-option [value]=\"target.id\">{{ target.label }}</mat-option>\n                        }\n                      </mat-select>\n                      @if (targetCatalogUnavailable(eventAction('crossFilter'), 'crossFilter')) {\n                        <mat-hint>{{ t('praxis.charts.editor.catalog.targetMissing', 'Target catalog is required for this governed event action.') }}</mat-hint>\n                      }\n                    </mat-form-field>\n\n                    <mat-form-field class=\"editor-field\" appearance=\"outline\">\n                      <mat-label>{{ t('praxis.charts.editor.field.eventMapping', 'Mapping') }}</mat-label>\n                      <textarea\n                        matInput\n                        data-testid=\"chart-editor-event-crossFilter-mapping\"\n                        rows=\"4\"\n                        [ngModel]=\"eventMappingText('crossFilter')\"\n                        (ngModelChange)=\"setEventMapping('crossFilter', $event)\"\n                        [disabled]=\"isReadonly() || !eventAction('crossFilter')\"\n                      ></textarea>\n                    </mat-form-field>\n                  </mat-card-content>\n                </mat-card>\n              </div>\n            }\n\n            @case ('preview') {\n              <p class=\"editor-caption\">\n                {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n              </p>\n            }\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n\n    <div class=\"editor-side\">\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.issues.title', 'Validation issues') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (issues().length) {\n            <ul class=\"editor-issues\">\n              @for (issue of issues(); track issueTrackBy($index, issue)) {\n                <li class=\"editor-issue\">\n                  <strong>{{ issue.field }}</strong>\n                  <span>{{ issue.message }}</span>\n                </li>\n              }\n            </ul>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.issues.empty', 'No issues were identified.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n\n      <mat-card class=\"editor-card\">\n        <mat-card-header>\n          <mat-card-title>{{ t('praxis.charts.editor.preview.title', 'Chart preview') }}</mat-card-title>\n        </mat-card-header>\n        <mat-card-content>\n          @if (preview(); as chartPreview) {\n            <p class=\"editor-caption\">\n              {{ t('praxis.charts.editor.preview.caption', 'Local preview derived from the canonical contract without remote calls.') }}\n            </p>\n            @if (doc().source.kind === 'derived') {\n              <p class=\"editor-caption\" data-testid=\"chart-editor-preview-origin\">\n                {{\n                  chartPreview.dataOrigin === 'local'\n                    ? t('praxis.charts.editor.preview.originLocal', 'Previewing widget local dataset (inputs.data).')\n                    : t('praxis.charts.editor.preview.originSynthetic', 'Previewing synthetic sample data (no local dataset records).')\n                }}\n              </p>\n            }\n            <praxis-chart [config]=\"chartPreview.config\" [data]=\"chartPreview.data\"></praxis-chart>\n          } @else {\n            <div class=\"editor-empty\">\n              {{ t('praxis.charts.editor.preview.invalid', 'Preview is unavailable while the contract has blocking errors.') }}\n            </div>\n          }\n        </mat-card-content>\n      </mat-card>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;min-width:0;container:praxis-chart-editor / inline-size;color:var(--md-sys-color-on-surface, #1a1b20)}.editor-shell{display:grid;gap:18px;min-width:0}.editor-nav{display:flex;gap:8px;flex-wrap:wrap}.editor-nav button.active{background:color-mix(in srgb,var(--md-sys-color-primary, #1263b4) 18%,transparent);color:var(--md-sys-color-primary, #1263b4)}.editor-layout{display:grid;gap:18px;grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);align-items:start}.editor-form,.editor-side{display:grid;gap:16px;min-width:0}.editor-card{box-sizing:border-box;width:100%;min-width:0;border-radius:20px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 72%,transparent);background:linear-gradient(180deg,#1263b408,#1263b400)}.editor-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.editor-stack{display:grid;gap:14px}.editor-row-card{padding:14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--md-sys-color-outline, #c5c7ce) 54%,transparent);background:color-mix(in srgb,var(--md-sys-color-surface, #fff) 92%,rgba(18,99,180,.04))}.editor-row-actions{display:flex;justify-content:flex-end}.editor-field{width:100%}.editor-issues{display:grid;gap:10px;margin:0;padding:0;list-style:none}.editor-issue{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-error, #b3261e) 8%,transparent);border:1px solid color-mix(in srgb,var(--md-sys-color-error, #b3261e) 18%,transparent)}.editor-issue strong{display:block;margin-bottom:4px}.editor-caption{margin:0 0 12px;color:var(--md-sys-color-on-surface-variant, #5a5d67);font-size:.92rem}.editor-empty{padding:18px;border-radius:14px;background:color-mix(in srgb,var(--md-sys-color-surface-variant, #eceff4) 78%,transparent)}.editor-side praxis-chart{display:block;width:100%;min-width:0;max-width:100%}@container praxis-chart-editor (max-width: 840px){.editor-layout{grid-template-columns:minmax(0,1fr)}}@media(max-width:960px){.editor-layout{grid-template-columns:minmax(0,1fr)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { documentInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }], localDataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "localData", required: false }] }], modeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], availableResourcesInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableResources", required: false }] }], availableFieldsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableFields", required: false }] }], availableTargetsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableTargets", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }], save: [{ type: i0.Output, args: ["save"] }], resetChange: [{ type: i0.Output, args: ["resetChange"] }], documentChange: [{ type: i0.Output, args: ["documentChange"] }], localDataChange: [{ type: i0.Output, args: ["localDataChange"] }] } });
 
-var praxisChartConfigEditor = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    PraxisChartConfigEditor: PraxisChartConfigEditor
-});
-
 class PraxisChartWidgetConfigEditor {
     i18n = inject(PraxisI18nService);
     canonicalMapper = inject(PraxisChartCanonicalContractMapperService);
@@ -11125,6 +11134,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 args: ['chartEditor']
             }] } });
 
+var praxisChartWidgetConfigEditor = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PraxisChartWidgetConfigEditor: PraxisChartWidgetConfigEditor
+});
+
 const PRAXIS_CHART_PALETTE_DEFAULT_CONFIG = {
     id: 'palette-chart',
     type: 'bar',

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@praxisui/charts",
-  "version": "10.0.0-rc.20",
+  "version": "10.0.0-rc.21",
   "description": "Metadata-driven charts library for Praxis UI Angular with engine adapters and Apache ECharts as the initial renderer.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^10.0.0-rc.20",
+    "@praxisui/core": "^10.0.0-rc.21",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/table": "^10.0.0-rc.20",
+    "@praxisui/table": "^10.0.0-rc.21",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-charts.d.ts

@@ -658,6 +658,7 @@ declare class PraxisChartComponent implements WidgetShellActionContributor {
     private readonly remoteResolvedData;
     private readonly remoteRuntimeState;
     private readonly remoteTechnicalError;
+    private readonly runtimeOwner;
     private readonly runtimeChartDocument;
     private readonly mappedRuntimeConfig;
     private readonly chartDocumentMappingError;
@@ -676,13 +677,14 @@ declare class PraxisChartComponent implements WidgetShellActionContributor {
     private deferredRenderAttempts;
     private previousRemoteSignature;
     private previousRemoteDataResolver;
-    private previousDocumentSignature;
     private inheritedThemeSignature;
     private editorSessionSubscriptions;
     private remoteRequestSubscription;
     private remoteRequestSequence;
     private previousSelectionScopeSignature;
     private readonly userEditedDocument;
+    private readonly runtimeData;
+    private readonly runtimeQueryContext;
     readonly effectiveConfig: _angular_core.Signal<PraxisChartConfig>;
     readonly resolvedData: _angular_core.Signal<PraxisChartDataRow[]>;
     readonly resolvedHeight: _angular_core.Signal<string>;
@@ -726,6 +728,9 @@ declare class PraxisChartComponent implements WidgetShellActionContributor {
     private t;
     canOpenConfigEditor(): boolean;
     openConfigEditor(): Promise<void>;
+    private configEditorSessionSignature;
+    private editorInputSignature;
+    private configEditorInputs;
     private resolveConfigEditorContext;
     private resolveEditorOptions;
     private captureFocusReturnTarget;