@meshmakers/octo-meshboard 3.4.210 → 3.4.230

package/fesm2022/meshmakers-octo-meshboard.mjs

@@ -19,13 +19,13 @@ import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonsModule, ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i3 from '@progress/kendo-angular-inputs';
 import { InputsModule, CheckBoxModule, NumericTextBoxModule, TextBoxModule, FormFieldModule } from '@progress/kendo-angular-inputs';
+import * as i4 from '@progress/kendo-angular-dropdowns';
+import { DropDownsModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
 import * as i1$2 from '@progress/kendo-angular-indicators';
 import { LoaderModule } from '@progress/kendo-angular-indicators';
 import * as i1$4 from '@progress/kendo-angular-icons';
 import { SVGIconModule } from '@progress/kendo-angular-icons';
 import { arrowUpIcon, arrowDownIcon, minusIcon, arrowRightIcon, arrowLeftIcon, linkIcon, chevronDownIcon, chevronRightIcon, circleIcon, questionCircleIcon, minusCircleIcon, warningTriangleIcon, exclamationCircleIcon, xCircleIcon, checkCircleIcon, columnsIcon, sortAscIcon, filterIcon, searchIcon, chartPieIcon, infoCircleIcon, plusIcon, trashIcon, pencilIcon, chartLineIcon, gearsIcon, clipboardMarkdownIcon, copyIcon, gridIcon, heartIcon, gridLayoutIcon, chartLineMarkersIcon, chartColumnStackedIcon, chartDoughnutIcon, tableIcon, shareIcon, fileTxtIcon, checkIcon, xIcon, downloadIcon, uploadIcon, gearIcon, saveIcon, arrowRotateCwIcon, undoIcon } from '@progress/kendo-svg-icons';
-import * as i4 from '@progress/kendo-angular-dropdowns';
-import { DropDownsModule, DropDownListModule } from '@progress/kendo-angular-dropdowns';
 import { NotificationService } from '@progress/kendo-angular-notification';
 import * as i1$6 from '@progress/kendo-angular-gauges';
 import { CollectionChangesService, KENDO_GAUGES } from '@progress/kendo-angular-gauges';
@@ -49,6 +49,8 @@ import { BreadCrumbService } from '@meshmakers/shared-services';
  * MeshBoard Widget Models
  * Defines the interfaces for MeshBoard widgets and their data sources
  */
+/** The board-level default timezone mode applied when none is persisted. */
+const DEFAULT_TIME_ZONE_MODE = 'local';
 
 // Re-export from octo-services (moved there for reuse by octo-ui)
 
@@ -1503,7 +1505,7 @@ class MeshBoardPersistenceService {
      */
     async createMeshBoard(config) {
         // Encode variables, timeFilter, and entitySelectors in description field (temporary until backend adds config field)
-        const encodedDescription = this.encodeVariablesInDescription(config.description ?? '', config.variables, config.timeFilter, config.entitySelectors, config.autoRefreshSeconds);
+        const encodedDescription = this.encodeVariablesInDescription(config.description ?? '', config.variables, config.timeFilter, config.entitySelectors, config.autoRefreshSeconds, config.timeZoneMode);
         const dashboardInput = {
             name: config.name,
             description: encodedDescription,
@@ -1535,7 +1537,7 @@ class MeshBoardPersistenceService {
     async updateMeshBoard(rtId, config, existingWidgetRtIds = []) {
         const result = { createdWidgets: [] };
         // Encode variables, timeFilter, and entitySelectors in description field (temporary until backend adds config field)
-        const encodedDescription = this.encodeVariablesInDescription(config.description ?? '', config.variables, config.timeFilter, config.entitySelectors, config.autoRefreshSeconds);
+        const encodedDescription = this.encodeVariablesInDescription(config.description ?? '', config.variables, config.timeFilter, config.entitySelectors, config.autoRefreshSeconds, config.timeZoneMode);
         const dashboardItem = {
             name: config.name,
             description: encodedDescription,
@@ -1599,7 +1601,7 @@ class MeshBoardPersistenceService {
     toMeshBoardConfig(meshBoard, widgets) {
         // Decode variables, timeFilter, entitySelectors, and autoRefresh from description field
         // (temporary until backend adds first-class config field)
-        const { description, variables, timeFilter, entitySelectors, autoRefreshSeconds } = this.decodeVariablesFromDescription(meshBoard.description);
+        const { description, variables, timeFilter, entitySelectors, autoRefreshSeconds, timeZoneMode } = this.decodeVariablesFromDescription(meshBoard.description);
         return {
             id: meshBoard.rtId,
             name: meshBoard.name,
@@ -1610,6 +1612,7 @@ class MeshBoardPersistenceService {
             gap: meshBoard.gap,
             variables,
             timeFilter,
+            timeZoneMode,
             entitySelectors,
             autoRefreshSeconds,
             widgets: widgets.map(w => this.toWidgetConfig(w))
@@ -1733,13 +1736,16 @@ class MeshBoardPersistenceService {
      * Note: Only static variables are persisted. TimeFilter variables are derived
      * from the timeFilter selection when the MeshBoard is loaded.
      */
-    encodeVariablesInDescription(description, variables, timeFilter, entitySelectors, autoRefreshSeconds) {
+    encodeVariablesInDescription(description, variables, timeFilter, entitySelectors, autoRefreshSeconds, timeZoneMode) {
         // Filter out timeFilter and entitySelector variables (they are derived, not persisted directly)
         const staticVariables = variables?.filter(v => v.source !== 'timeFilter' && v.source !== 'entitySelector');
-        // Check if there's anything to encode
+        // Check if there's anything to encode. 'local' is the default, so only the
+        // non-default 'utc' mode needs persisting.
         const hasEntitySelectors = entitySelectors && entitySelectors.length > 0;
         const hasAutoRefresh = !!autoRefreshSeconds && autoRefreshSeconds > 0;
-        if ((!staticVariables || staticVariables.length === 0) && !timeFilter?.enabled && !hasEntitySelectors && !hasAutoRefresh) {
+        const hasTimeZoneMode = timeZoneMode === 'utc';
+        if ((!staticVariables || staticVariables.length === 0) &&
+            !timeFilter?.enabled && !hasEntitySelectors && !hasAutoRefresh && !hasTimeZoneMode) {
             return description;
         }
         try {
@@ -1750,6 +1756,9 @@ class MeshBoardPersistenceService {
             if (timeFilter?.enabled) {
                 data.timeFilter = timeFilter;
             }
+            if (hasTimeZoneMode) {
+                data.timeZoneMode = timeZoneMode;
+            }
             if (hasAutoRefresh) {
                 data.autoRefreshSeconds = autoRefreshSeconds;
             }
@@ -1805,6 +1814,7 @@ class MeshBoardPersistenceService {
                 description,
                 variables: parsed.variables ?? [],
                 timeFilter: parsed.timeFilter,
+                timeZoneMode: parsed.timeZoneMode === 'utc' || parsed.timeZoneMode === 'local' ? parsed.timeZoneMode : undefined,
                 entitySelectors: parsed.entitySelectors,
                 autoRefreshSeconds: typeof parsed.autoRefreshSeconds === 'number' ? parsed.autoRefreshSeconds : undefined
             };
@@ -2030,6 +2040,13 @@ class MeshBoardStateService {
     ...(ngDevMode ? [{ debugName: "isModelAvailable" }] : /* istanbul ignore next */ []));
     variableResolutionErrors = computed(() => this._variableResolutionErrors(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variableResolutionErrors" }] : /* istanbul ignore next */ []));
+    /**
+     * The board's effective timezone mode (defaults to `'local'`). Drives both the
+     * time-filter boundary computation and datetime display across all widgets.
+     * Widgets read this to format timestamps consistently with the active filter.
+     */
+    timeZoneMode = computed(() => this._meshBoardConfig().timeZoneMode ?? DEFAULT_TIME_ZONE_MODE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeZoneMode" }] : /* istanbul ignore next */ []));
     // Deprecated aliases for backward compatibility
     /** @deprecated Use meshBoardConfig instead */
     dashboardConfig = this.meshBoardConfig;
@@ -2269,6 +2286,7 @@ class MeshBoardStateService {
             columns: settings.columns,
             rowHeight: settings.rowHeight,
             gap: settings.gap,
+            timeZoneMode: settings.timeZoneMode ?? config.timeZoneMode,
             variables: settings.variables ?? config.variables,
             timeFilter: settings.timeFilter
                 ? {
@@ -2300,6 +2318,7 @@ class MeshBoardStateService {
             gap: config.gap,
             variables: config.variables ?? [],
             timeFilter: config.timeFilter,
+            timeZoneMode: config.timeZoneMode,
             entitySelectors: config.entitySelectors,
             autoRefreshSeconds: config.autoRefreshSeconds
         };
@@ -2475,8 +2494,9 @@ class MeshBoardStateService {
      * Stream-data persistent queries consume this to bound their result set;
      * runtime queries ignore it.
      *
-     * IANA-timezone-aware bucket boundaries are tracked separately (AB#4190);
-     * this helper currently returns UTC boundaries derived from the picker.
+     * Boundaries are resolved on the board's {@link timeZoneMode} basis (local by
+     * default, or UTC), the same basis widgets format their datetime display on —
+     * so the selected range and the displayed timestamps stay consistent.
      */
     resolveCurrentTimeRange() {
         const config = this._meshBoardConfig().timeFilter;
@@ -2492,7 +2512,7 @@ class MeshBoardStateService {
             customFrom: selection.customFrom ? new Date(selection.customFrom) : undefined,
             customTo: selection.customTo ? new Date(selection.customTo) : undefined
         };
-        return TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+        return TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime, this.timeZoneMode());
     }
     /**
      * Resolves the active time filter into stream-data `{from, to}` arguments for
@@ -4017,6 +4037,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 class EntityCardWidgetComponent {
     dataService = inject(DashboardDataService);
+    stateService = inject(MeshBoardStateService);
+    variableService = inject(MeshBoardVariableService);
     config;
     // Widget state signals
     _isLoading = signal(false, /* @ts-ignore */
@@ -4037,7 +4059,10 @@ class EntityCardWidgetComponent {
         if (!dataSource)
             return true;
         if (dataSource.type === 'runtimeEntity') {
-            return !dataSource.rtId && !dataSource.ckTypeId;
+            // A selector binding or a variable-bearing rtId/ckTypeId counts as
+            // configured even before a board-level selection has resolved a value —
+            // the empty/loading display is handled by loadData(), not here.
+            return !dataSource.entitySelectorId && !dataSource.rtId && !dataSource.ckTypeId;
         }
         if (dataSource.type === 'static') {
             return false; // Static data is always "configured"
@@ -4114,11 +4139,23 @@ class EntityCardWidgetComponent {
             return;
         }
         // Handle runtime entity data source
-        // Note: isNotConfigured() check ensures rtId and ckTypeId are set
         if (dataSource.type === 'runtimeEntity') {
+            // Resolve the effective entity reference: an entity-selector binding or
+            // MeshBoard variables (e.g. $mp_rtId / $mp_rtCkTypeId) may supply the
+            // rtId/ckTypeId from a board-level selection.
+            const { rtId, ckTypeId } = this.resolveEntityRef(dataSource);
+            // No resolvable selection yet (selector unpicked or variable unresolved) —
+            // show nothing rather than fetching with a placeholder string.
+            if (!rtId || !ckTypeId || this.variableService.hasUnresolvedVariables(rtId) ||
+                this.variableService.hasUnresolvedVariables(ckTypeId)) {
+                this._data.set(null);
+                this._error.set(null);
+                this._isLoading.set(false);
+                return;
+            }
             this._isLoading.set(true);
             this._error.set(null);
-            this.dataService.fetchEntityWithAssociations(dataSource.rtId, dataSource.ckTypeId)
+            this.dataService.fetchEntityWithAssociations(rtId, ckTypeId)
                 .pipe(catchError(err => {
                 console.error('Error loading entity card data:', err);
                 this._error.set('Failed to load data');
@@ -4130,6 +4167,51 @@ class EntityCardWidgetComponent {
             });
         }
     }
+    /**
+     * Message for the neutral empty state — shown when the widget IS configured
+     * but no entity is currently resolved (e.g. a bound selector hasn't been
+     * picked yet, or a variable is still unresolved). This is deliberately not the
+     * red "not configured" placeholder, which would wrongly imply the widget needs
+     * setup.
+     */
+    emptyMessage() {
+        const dataSource = this.config?.dataSource;
+        if (dataSource?.type === 'runtimeEntity') {
+            if (dataSource.entitySelectorId) {
+                return 'No entity selected';
+            }
+            if ((dataSource.rtId?.includes('$')) || (dataSource.ckTypeId?.includes('$'))) {
+                return 'Waiting for selection';
+            }
+        }
+        return 'No data';
+    }
+    /**
+     * Resolves the effective `{ rtId, ckTypeId }` to fetch from a runtime-entity
+     * data source.
+     *
+     * - When `entitySelectorId` is set, the bound MeshBoard entity selector's
+     *   current `selectedRtId` and the picked entity's type
+     *   (`$<selectorId>_rtCkTypeId`, falling back to the selector's configured
+     *   `ckTypeId`) win — so the card follows the asset picked at board level.
+     * - Otherwise the configured `rtId`/`ckTypeId` are resolved against the active
+     *   MeshBoard variables, allowing values like `$mp_rtId` / `$mp_rtCkTypeId`.
+     */
+    resolveEntityRef(dataSource) {
+        const variables = this.stateService.getVariables();
+        if (dataSource.entitySelectorId) {
+            const selector = this.stateService.getEntitySelector(dataSource.entitySelectorId);
+            const rtCkTypeIdVar = variables.find(v => v.name === `${dataSource.entitySelectorId}_rtCkTypeId`);
+            return {
+                rtId: selector?.selectedRtId,
+                ckTypeId: rtCkTypeIdVar?.value || selector?.ckTypeId
+            };
+        }
+        return {
+            rtId: dataSource.rtId ? this.variableService.resolveVariables(dataSource.rtId, variables) : undefined,
+            ckTypeId: dataSource.ckTypeId ? this.variableService.resolveVariables(dataSource.ckTypeId, variables) : undefined
+        };
+    }
     inferAttributeType(value) {
         if (value === null || value === undefined)
             return AttributeValueTypeDto.StringDto;
@@ -4163,11 +4245,11 @@ class EntityCardWidgetComponent {
             .trim();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EntityCardWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EntityCardWidgetComponent, isStandalone: true, selector: "mm-entity-card-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"entity-card\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Header (like UML class name) -->\n    @if (config.showHeader !== false) {\n      <div class=\"entity-header\">\n        <span class=\"entity-stereotype\">&laquo;{{ entityTypeName() }}&raquo;</span>\n        <span class=\"entity-name\">{{ displayName() }}</span>\n      </div>\n    }\n\n    <!-- Attributes Section (like UML attributes) -->\n    @if (config.showAttributes !== false && filteredAttributes().length > 0) {\n      <div class=\"entity-attributes\">\n        @for (attr of filteredAttributes(); track attr.attributeName) {\n          <div class=\"attribute-row\">\n            <span class=\"attribute-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n            <span class=\"attribute-value\">\n              <mm-property-value-display\n                [value]=\"attr.value\"\n                [type]=\"inferAttributeType(attr.value)\"\n                [attributeName]=\"attr.attributeName\">\n              </mm-property-value-display>\n            </span>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Metadata Footer -->\n    <div class=\"entity-footer\">\n      <span class=\"entity-id\" title=\"Runtime ID\">{{ data()!.rtId }}</span>\n    </div>\n  } @else {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  }\n</div>\n", styles: [".entity-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden;background:var(--kendo-color-surface, #fff)}.entity-card.no-data,.entity-card.loading,.entity-card.error{justify-content:center;align-items:center}.entity-card.loading{color:var(--kendo-color-primary, #0d6efd)}.entity-card.error{color:var(--kendo-color-error, #dc3545)}.loading-indicator{font-size:.875rem;font-style:italic}.error-message{font-size:.875rem;padding:12px;text-align:center}.entity-header{display:flex;flex-direction:column;align-items:center;padding:12px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);text-align:center}.entity-header .entity-stereotype{font-size:.75rem;font-style:italic;opacity:.9;margin-bottom:2px}.entity-header .entity-name{font-size:1rem;font-weight:600}.entity-attributes{flex:1;padding:8px 0;overflow-y:auto}.entity-attributes .attribute-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--kendo-color-border-alt, #e9ecef);font-size:.8125rem}.entity-attributes .attribute-row:last-child{border-bottom:none}.entity-attributes .attribute-row:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.entity-attributes .attribute-name{color:var(--kendo-color-subtle, #6c757d);flex-shrink:0;margin-right:12px}.entity-attributes .attribute-value{color:var(--kendo-color-on-surface, #212529);font-weight:500;text-align:right;word-break:break-word;min-width:0;flex:1}.entity-footer{padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6)}.entity-footer .entity-id{font-size:.6875rem;font-family:monospace;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }, { kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode", "attributeName"], outputs: ["binaryDownload"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EntityCardWidgetComponent, isStandalone: true, selector: "mm-entity-card-widget", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"entity-card\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Header (like UML class name) -->\n    @if (config.showHeader !== false) {\n      <div class=\"entity-header\">\n        <span class=\"entity-stereotype\">&laquo;{{ entityTypeName() }}&raquo;</span>\n        <span class=\"entity-name\">{{ displayName() }}</span>\n      </div>\n    }\n\n    <!-- Attributes Section (like UML attributes) -->\n    @if (config.showAttributes !== false && filteredAttributes().length > 0) {\n      <div class=\"entity-attributes\">\n        @for (attr of filteredAttributes(); track attr.attributeName) {\n          <div class=\"attribute-row\">\n            <span class=\"attribute-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n            <span class=\"attribute-value\">\n              <mm-property-value-display\n                [value]=\"attr.value\"\n                [type]=\"inferAttributeType(attr.value)\"\n                [attributeName]=\"attr.attributeName\">\n              </mm-property-value-display>\n            </span>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Metadata Footer -->\n    <div class=\"entity-footer\">\n      <span class=\"entity-id\" title=\"Runtime ID\">{{ data()!.rtId }}</span>\n    </div>\n  } @else {\n    <div class=\"entity-empty\">\n      <span class=\"entity-empty-text\">{{ emptyMessage() }}</span>\n    </div>\n  }\n</div>\n", styles: [".entity-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden;background:var(--kendo-color-surface, #fff)}.entity-card.no-data,.entity-card.loading,.entity-card.error{justify-content:center;align-items:center}.entity-card.loading{color:var(--kendo-color-primary, #0d6efd)}.entity-card.error{color:var(--kendo-color-error, #dc3545)}.loading-indicator{font-size:.875rem;font-style:italic}.error-message{font-size:.875rem;padding:12px;text-align:center}.entity-header{display:flex;flex-direction:column;align-items:center;padding:12px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);text-align:center}.entity-header .entity-stereotype{font-size:.75rem;font-style:italic;opacity:.9;margin-bottom:2px}.entity-header .entity-name{font-size:1rem;font-weight:600}.entity-attributes{flex:1;padding:8px 0;overflow-y:auto}.entity-attributes .attribute-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--kendo-color-border-alt, #e9ecef);font-size:.8125rem}.entity-attributes .attribute-row:last-child{border-bottom:none}.entity-attributes .attribute-row:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.entity-attributes .attribute-name{color:var(--kendo-color-subtle, #6c757d);flex-shrink:0;margin-right:12px}.entity-attributes .attribute-value{color:var(--kendo-color-on-surface, #212529);font-weight:500;text-align:right;word-break:break-word;min-width:0;flex:1}.entity-footer{padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6)}.entity-footer .entity-id{font-size:.6875rem;font-family:monospace;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}.entity-empty{display:flex;align-items:center;justify-content:center;height:100%;padding:8px;text-align:center}.entity-empty-text{font-size:.875rem;color:var(--kendo-color-subtle, #6c757d)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }, { kind: "component", type: PropertyValueDisplayComponent, selector: "mm-property-value-display", inputs: ["value", "type", "displayMode", "attributeName"], outputs: ["binaryDownload"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EntityCardWidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-entity-card-widget', standalone: true, imports: [CommonModule, WidgetNotConfiguredComponent, PropertyValueDisplayComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"entity-card\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Header (like UML class name) -->\n    @if (config.showHeader !== false) {\n      <div class=\"entity-header\">\n        <span class=\"entity-stereotype\">&laquo;{{ entityTypeName() }}&raquo;</span>\n        <span class=\"entity-name\">{{ displayName() }}</span>\n      </div>\n    }\n\n    <!-- Attributes Section (like UML attributes) -->\n    @if (config.showAttributes !== false && filteredAttributes().length > 0) {\n      <div class=\"entity-attributes\">\n        @for (attr of filteredAttributes(); track attr.attributeName) {\n          <div class=\"attribute-row\">\n            <span class=\"attribute-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n            <span class=\"attribute-value\">\n              <mm-property-value-display\n                [value]=\"attr.value\"\n                [type]=\"inferAttributeType(attr.value)\"\n                [attributeName]=\"attr.attributeName\">\n              </mm-property-value-display>\n            </span>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Metadata Footer -->\n    <div class=\"entity-footer\">\n      <span class=\"entity-id\" title=\"Runtime ID\">{{ data()!.rtId }}</span>\n    </div>\n  } @else {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  }\n</div>\n", styles: [".entity-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden;background:var(--kendo-color-surface, #fff)}.entity-card.no-data,.entity-card.loading,.entity-card.error{justify-content:center;align-items:center}.entity-card.loading{color:var(--kendo-color-primary, #0d6efd)}.entity-card.error{color:var(--kendo-color-error, #dc3545)}.loading-indicator{font-size:.875rem;font-style:italic}.error-message{font-size:.875rem;padding:12px;text-align:center}.entity-header{display:flex;flex-direction:column;align-items:center;padding:12px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);text-align:center}.entity-header .entity-stereotype{font-size:.75rem;font-style:italic;opacity:.9;margin-bottom:2px}.entity-header .entity-name{font-size:1rem;font-weight:600}.entity-attributes{flex:1;padding:8px 0;overflow-y:auto}.entity-attributes .attribute-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--kendo-color-border-alt, #e9ecef);font-size:.8125rem}.entity-attributes .attribute-row:last-child{border-bottom:none}.entity-attributes .attribute-row:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.entity-attributes .attribute-name{color:var(--kendo-color-subtle, #6c757d);flex-shrink:0;margin-right:12px}.entity-attributes .attribute-value{color:var(--kendo-color-on-surface, #212529);font-weight:500;text-align:right;word-break:break-word;min-width:0;flex:1}.entity-footer{padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6)}.entity-footer .entity-id{font-size:.6875rem;font-family:monospace;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}\n"] }]
+            args: [{ selector: 'mm-entity-card-widget', standalone: true, imports: [CommonModule, WidgetNotConfiguredComponent, PropertyValueDisplayComponent], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"entity-card\" [class.no-data]=\"!data()\" [class.loading]=\"isLoading()\" [class.error]=\"error()\">\n  @if (isNotConfigured()) {\n    <mm-widget-not-configured></mm-widget-not-configured>\n  } @else if (isLoading()) {\n    <div class=\"loading-indicator\">\n      <span>Loading...</span>\n    </div>\n  } @else if (error()) {\n    <div class=\"error-message\">\n      <span>{{ error() }}</span>\n    </div>\n  } @else if (data()) {\n    <!-- Header (like UML class name) -->\n    @if (config.showHeader !== false) {\n      <div class=\"entity-header\">\n        <span class=\"entity-stereotype\">&laquo;{{ entityTypeName() }}&raquo;</span>\n        <span class=\"entity-name\">{{ displayName() }}</span>\n      </div>\n    }\n\n    <!-- Attributes Section (like UML attributes) -->\n    @if (config.showAttributes !== false && filteredAttributes().length > 0) {\n      <div class=\"entity-attributes\">\n        @for (attr of filteredAttributes(); track attr.attributeName) {\n          <div class=\"attribute-row\">\n            <span class=\"attribute-name\">{{ formatAttributeName(attr.attributeName) }}</span>\n            <span class=\"attribute-value\">\n              <mm-property-value-display\n                [value]=\"attr.value\"\n                [type]=\"inferAttributeType(attr.value)\"\n                [attributeName]=\"attr.attributeName\">\n              </mm-property-value-display>\n            </span>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Metadata Footer -->\n    <div class=\"entity-footer\">\n      <span class=\"entity-id\" title=\"Runtime ID\">{{ data()!.rtId }}</span>\n    </div>\n  } @else {\n    <div class=\"entity-empty\">\n      <span class=\"entity-empty-text\">{{ emptyMessage() }}</span>\n    </div>\n  }\n</div>\n", styles: [".entity-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;overflow:hidden;background:var(--kendo-color-surface, #fff)}.entity-card.no-data,.entity-card.loading,.entity-card.error{justify-content:center;align-items:center}.entity-card.loading{color:var(--kendo-color-primary, #0d6efd)}.entity-card.error{color:var(--kendo-color-error, #dc3545)}.loading-indicator{font-size:.875rem;font-style:italic}.error-message{font-size:.875rem;padding:12px;text-align:center}.entity-header{display:flex;flex-direction:column;align-items:center;padding:12px;background:var(--kendo-color-primary, #0d6efd);color:var(--kendo-color-on-primary, #fff);text-align:center}.entity-header .entity-stereotype{font-size:.75rem;font-style:italic;opacity:.9;margin-bottom:2px}.entity-header .entity-name{font-size:1rem;font-weight:600}.entity-attributes{flex:1;padding:8px 0;overflow-y:auto}.entity-attributes .attribute-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid var(--kendo-color-border-alt, #e9ecef);font-size:.8125rem}.entity-attributes .attribute-row:last-child{border-bottom:none}.entity-attributes .attribute-row:hover{background:var(--kendo-color-surface-alt, #f8f9fa)}.entity-attributes .attribute-name{color:var(--kendo-color-subtle, #6c757d);flex-shrink:0;margin-right:12px}.entity-attributes .attribute-value{color:var(--kendo-color-on-surface, #212529);font-weight:500;text-align:right;word-break:break-word;min-width:0;flex:1}.entity-footer{padding:8px 12px;background:var(--kendo-color-surface-alt, #f8f9fa);border-top:1px solid var(--kendo-color-border, #dee2e6)}.entity-footer .entity-id{font-size:.6875rem;font-family:monospace;color:var(--kendo-color-subtle, #6c757d)}.no-data-message{font-size:.875rem}.entity-empty{display:flex;align-items:center;justify-content:center;height:100%;padding:8px;text-align:center}.entity-empty-text{font-size:.875rem;color:var(--kendo-color-subtle, #6c757d)}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -4215,27 +4297,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class EntityCardConfigDialogComponent {
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
     ckTypeSelectorService = inject(CkTypeSelectorService);
+    stateService = inject(MeshBoardStateService);
     windowRef = inject(WindowRef);
     ckTypeSelectorInput;
     entitySelectorInput;
     initialCkTypeId;
     initialRtId;
+    initialEntitySelectorId;
     initialHideEmptyAttributes = false;
+    bindingMode = 'fixed';
     selectedCkType = null;
     selectedEntity = null;
     entityDataSource;
     entityDialogDataSource;
     isLoadingInitial = false;
     hideEmptyAttributes = false;
+    entitySelectorId = '';
+    variableCkTypeId = '';
+    variableRtId = '';
+    get availableSelectors() {
+        return this.stateService.getEntitySelectors();
+    }
     get isValid() {
-        return this.selectedCkType !== null && this.selectedEntity !== null;
+        switch (this.bindingMode) {
+            case 'selector':
+                return !!this.entitySelectorId;
+            case 'variable':
+                return this.variableRtId.trim().length > 0 && this.variableCkTypeId.trim().length > 0;
+            default:
+                return this.selectedCkType !== null && this.selectedEntity !== null;
+        }
     }
     async ngOnInit() {
         this.hideEmptyAttributes = this.initialHideEmptyAttributes;
+        // Restore the binding mode from the persisted config.
+        if (this.initialEntitySelectorId) {
+            this.bindingMode = 'selector';
+            this.entitySelectorId = this.initialEntitySelectorId;
+            return;
+        }
+        if (this.containsVariable(this.initialCkTypeId) || this.containsVariable(this.initialRtId)) {
+            this.bindingMode = 'variable';
+            this.variableCkTypeId = this.initialCkTypeId ?? '';
+            this.variableRtId = this.initialRtId ?? '';
+            return;
+        }
+        this.bindingMode = 'fixed';
         if (this.initialCkTypeId) {
             await this.loadInitialValues();
         }
     }
+    containsVariable(value) {
+        return !!value && value.includes('$');
+    }
     async loadInitialValues() {
         if (!this.initialCkTypeId) {
             return;
@@ -4312,70 +4426,149 @@ class EntityCardConfigDialogComponent {
         this.selectedEntity = null;
     }
     onSave() {
-        if (this.selectedCkType && this.selectedEntity) {
-            this.windowRef.close({
+        if (!this.isValid) {
+            return;
+        }
+        let result;
+        if (this.bindingMode === 'selector') {
+            result = {
+                ckTypeId: '',
+                rtId: '',
+                entitySelectorId: this.entitySelectorId,
+                hideEmptyAttributes: this.hideEmptyAttributes
+            };
+        }
+        else if (this.bindingMode === 'variable') {
+            result = {
+                ckTypeId: this.variableCkTypeId.trim(),
+                rtId: this.variableRtId.trim(),
+                hideEmptyAttributes: this.hideEmptyAttributes
+            };
+        }
+        else {
+            result = {
                 ckTypeId: this.selectedCkType.rtCkTypeId,
                 rtId: this.selectedEntity.rtId,
                 hideEmptyAttributes: this.hideEmptyAttributes
-            });
+            };
         }
+        this.windowRef.close(result);
     }
     onCancel() {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EntityCardConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EntityCardConfigDialogComponent, isStandalone: true, selector: "mm-entity-card-config-dialog", inputs: { initialCkTypeId: "initialCkTypeId", initialRtId: "initialRtId", initialHideEmptyAttributes: "initialHideEmptyAttributes" }, viewQueries: [{ propertyName: "ckTypeSelectorInput", first: true, predicate: ["ckTypeSelector"], descendants: true }, { propertyName: "entitySelectorInput", first: true, predicate: ["entitySelector"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: EntityCardConfigDialogComponent, isStandalone: true, selector: "mm-entity-card-config-dialog", inputs: { initialCkTypeId: "initialCkTypeId", initialRtId: "initialRtId", initialEntitySelectorId: "initialEntitySelectorId", initialHideEmptyAttributes: "initialHideEmptyAttributes" }, viewQueries: [{ propertyName: "ckTypeSelectorInput", first: true, predicate: ["ckTypeSelector"], descendants: true }, { propertyName: "entitySelectorInput", first: true, predicate: ["entitySelector"], descendants: true }], ngImport: i0, template: `
     <div class="config-container">
 
       <div class="config-form" [class.loading]="isLoadingInitial">
         <mm-loading-overlay [loading]="isLoadingInitial" />
+
         <div class="form-field">
-          <label>Runtime Entities</label>
-          <mm-ck-type-selector-input
-            #ckTypeSelector
-            placeholder="Select Runtime Entities..."
-            [minSearchLength]="2"
-            dialogTitle="Select Runtime Entities"
-            [ngModel]="selectedCkType"
-            (ckTypeSelected)="onCkTypeSelected($event)"
-            (ckTypeCleared)="onCkTypeCleared()">
-          </mm-ck-type-selector-input>
-          <p class="field-hint">Select the type of entities to choose from.</p>
+          <label>Entity source</label>
+          <ul class="k-radio-list">
+            <li class="k-radio-item">
+              <input type="radio" kendoRadioButton name="bindingMode" value="fixed"
+                [(ngModel)]="bindingMode" />
+              <span class="radio-label">Fixed entity</span>
+            </li>
+            <li class="k-radio-item">
+              <input type="radio" kendoRadioButton name="bindingMode" value="selector"
+                [(ngModel)]="bindingMode" [disabled]="availableSelectors.length === 0" />
+              <span class="radio-label">Entity selector{{ availableSelectors.length === 0 ? ' (none configured)' : '' }}</span>
+            </li>
+            <li class="k-radio-item">
+              <input type="radio" kendoRadioButton name="bindingMode" value="variable"
+                [(ngModel)]="bindingMode" />
+              <span class="radio-label">Variable</span>
+            </li>
+          </ul>
+          <p class="field-hint">
+            Choose a fixed entity, follow a board-level entity selector, or bind the
+            type and rtId to MeshBoard variables (e.g. <code>$mp_rtCkTypeId</code> / <code>$mp_rtId</code>).
+          </p>
         </div>
 
-        <div class="form-field" [class.disabled]="!selectedCkType">
-          <label>Entity</label>
-          @if (selectedCkType && entityDataSource) {
-            <mm-entity-select-input
-              #entitySelector
-              [dataSource]="entityDataSource"
-              [dialogDataSource]="entityDialogDataSource"
-              placeholder="Search for an entity..."
-              dialogTitle="Select Entity"
-              [minSearchLength]="1"
-              [ngModel]="selectedEntity"
-              (entitySelected)="onEntitySelected($event)"
-              (entityCleared)="onEntityCleared()">
-            </mm-entity-select-input>
-          } @else {
-            <kendo-textbox
-              [disabled]="true"
-              placeholder="First select Runtime Entities...">
-            </kendo-textbox>
-          }
-          <p class="field-hint">Select the specific entity to display in this widget.</p>
-        </div>
+        @if (bindingMode === 'fixed') {
+          <div class="form-field">
+            <label>Runtime Entities</label>
+            <mm-ck-type-selector-input
+              #ckTypeSelector
+              placeholder="Select Runtime Entities..."
+              [minSearchLength]="2"
+              dialogTitle="Select Runtime Entities"
+              [ngModel]="selectedCkType"
+              (ckTypeSelected)="onCkTypeSelected($event)"
+              (ckTypeCleared)="onCkTypeCleared()">
+            </mm-ck-type-selector-input>
+            <p class="field-hint">Select the type of entities to choose from.</p>
+          </div>
 
-        @if (selectedEntity) {
-          <div class="selection-preview">
-            <h4>Selected Entity</h4>
-            <div class="preview-content">
-              <p><strong>Type:</strong> {{ selectedCkType?.rtCkTypeId }}</p>
-              <p><strong>RT-ID:</strong> {{ selectedEntity.rtId }}</p>
-              @if (selectedEntity.rtWellKnownName) {
-                <p><strong>Name:</strong> {{ selectedEntity.rtWellKnownName }}</p>
-              }
+          <div class="form-field" [class.disabled]="!selectedCkType">
+            <label>Entity</label>
+            @if (selectedCkType && entityDataSource) {
+              <mm-entity-select-input
+                #entitySelector
+                [dataSource]="entityDataSource"
+                [dialogDataSource]="entityDialogDataSource"
+                placeholder="Search for an entity..."
+                dialogTitle="Select Entity"
+                [minSearchLength]="1"
+                [ngModel]="selectedEntity"
+                (entitySelected)="onEntitySelected($event)"
+                (entityCleared)="onEntityCleared()">
+              </mm-entity-select-input>
+            } @else {
+              <kendo-textbox
+                [disabled]="true"
+                placeholder="First select Runtime Entities...">
+              </kendo-textbox>
+            }
+            <p class="field-hint">Select the specific entity to display in this widget.</p>
+          </div>
+
+          @if (selectedEntity) {
+            <div class="selection-preview">
+              <h4>Selected Entity</h4>
+              <div class="preview-content">
+                <p><strong>Type:</strong> {{ selectedCkType?.rtCkTypeId }}</p>
+                <p><strong>RT-ID:</strong> {{ selectedEntity.rtId }}</p>
+                @if (selectedEntity.rtWellKnownName) {
+                  <p><strong>Name:</strong> {{ selectedEntity.rtWellKnownName }}</p>
+                }
+              </div>
             </div>
+          }
+        }
+
+        @if (bindingMode === 'selector') {
+          <div class="form-field">
+            <label>Bind to entity selector</label>
+            <kendo-dropdownlist
+              [data]="availableSelectors"
+              textField="label"
+              valueField="id"
+              [valuePrimitive]="true"
+              [defaultItem]="{ id: '', label: '— Select —' }"
+              [(ngModel)]="entitySelectorId">
+            </kendo-dropdownlist>
+            <p class="field-hint">
+              The card follows the asset picked in this selector at board level —
+              its rtId and CK type are resolved from the current selection.
+            </p>
+          </div>
+        }
+
+        @if (bindingMode === 'variable') {
+          <div class="form-field">
+            <label>CK Type variable</label>
+            <kendo-textbox [(ngModel)]="variableCkTypeId" placeholder="$mp_rtCkTypeId"></kendo-textbox>
+            <p class="field-hint">CK type id, or a variable like <code>$mp_rtCkTypeId</code>.</p>
+          </div>
+          <div class="form-field">
+            <label>rtId variable</label>
+            <kendo-textbox [(ngModel)]="variableRtId" placeholder="$mp_rtId"></kendo-textbox>
+            <p class="field-hint">Runtime id, or a variable like <code>$mp_rtId</code>.</p>
           </div>
         }
 
@@ -4402,7 +4595,7 @@ class EntityCardConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.checkbox-row input{margin:0}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.checkbox-row input{margin:0}.k-radio-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.radio-label{margin-left:8px;font-size:.9rem}.field-hint code{font-size:.78rem}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: EntityCardConfigDialogComponent, decorators: [{
             type: Component,
@@ -4411,6 +4604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         FormsModule,
                         ButtonsModule,
                         InputsModule,
+                        DropDownsModule,
                         CkTypeSelectorInputComponent,
                         EntitySelectInputComponent,
                         LoadingOverlayComponent
@@ -4419,53 +4613,112 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
       <div class="config-form" [class.loading]="isLoadingInitial">
         <mm-loading-overlay [loading]="isLoadingInitial" />
+
         <div class="form-field">
-          <label>Runtime Entities</label>
-          <mm-ck-type-selector-input
-            #ckTypeSelector
-            placeholder="Select Runtime Entities..."
-            [minSearchLength]="2"
-            dialogTitle="Select Runtime Entities"
-            [ngModel]="selectedCkType"
-            (ckTypeSelected)="onCkTypeSelected($event)"
-            (ckTypeCleared)="onCkTypeCleared()">
-          </mm-ck-type-selector-input>
-          <p class="field-hint">Select the type of entities to choose from.</p>
+          <label>Entity source</label>
+          <ul class="k-radio-list">
+            <li class="k-radio-item">
+              <input type="radio" kendoRadioButton name="bindingMode" value="fixed"
+                [(ngModel)]="bindingMode" />
+              <span class="radio-label">Fixed entity</span>
+            </li>
+            <li class="k-radio-item">
+              <input type="radio" kendoRadioButton name="bindingMode" value="selector"
+                [(ngModel)]="bindingMode" [disabled]="availableSelectors.length === 0" />
+              <span class="radio-label">Entity selector{{ availableSelectors.length === 0 ? ' (none configured)' : '' }}</span>
+            </li>
+            <li class="k-radio-item">
+              <input type="radio" kendoRadioButton name="bindingMode" value="variable"
+                [(ngModel)]="bindingMode" />
+              <span class="radio-label">Variable</span>
+            </li>
+          </ul>
+          <p class="field-hint">
+            Choose a fixed entity, follow a board-level entity selector, or bind the
+            type and rtId to MeshBoard variables (e.g. <code>$mp_rtCkTypeId</code> / <code>$mp_rtId</code>).
+          </p>
         </div>
 
-        <div class="form-field" [class.disabled]="!selectedCkType">
-          <label>Entity</label>
-          @if (selectedCkType && entityDataSource) {
-            <mm-entity-select-input
-              #entitySelector
-              [dataSource]="entityDataSource"
-              [dialogDataSource]="entityDialogDataSource"
-              placeholder="Search for an entity..."
-              dialogTitle="Select Entity"
-              [minSearchLength]="1"
-              [ngModel]="selectedEntity"
-              (entitySelected)="onEntitySelected($event)"
-              (entityCleared)="onEntityCleared()">
-            </mm-entity-select-input>
-          } @else {
-            <kendo-textbox
-              [disabled]="true"
-              placeholder="First select Runtime Entities...">
-            </kendo-textbox>
-          }
-          <p class="field-hint">Select the specific entity to display in this widget.</p>
-        </div>
+        @if (bindingMode === 'fixed') {
+          <div class="form-field">
+            <label>Runtime Entities</label>
+            <mm-ck-type-selector-input
+              #ckTypeSelector
+              placeholder="Select Runtime Entities..."
+              [minSearchLength]="2"
+              dialogTitle="Select Runtime Entities"
+              [ngModel]="selectedCkType"
+              (ckTypeSelected)="onCkTypeSelected($event)"
+              (ckTypeCleared)="onCkTypeCleared()">
+            </mm-ck-type-selector-input>
+            <p class="field-hint">Select the type of entities to choose from.</p>
+          </div>
 
-        @if (selectedEntity) {
-          <div class="selection-preview">
-            <h4>Selected Entity</h4>
-            <div class="preview-content">
-              <p><strong>Type:</strong> {{ selectedCkType?.rtCkTypeId }}</p>
-              <p><strong>RT-ID:</strong> {{ selectedEntity.rtId }}</p>
-              @if (selectedEntity.rtWellKnownName) {
-                <p><strong>Name:</strong> {{ selectedEntity.rtWellKnownName }}</p>
-              }
+          <div class="form-field" [class.disabled]="!selectedCkType">
+            <label>Entity</label>
+            @if (selectedCkType && entityDataSource) {
+              <mm-entity-select-input
+                #entitySelector
+                [dataSource]="entityDataSource"
+                [dialogDataSource]="entityDialogDataSource"
+                placeholder="Search for an entity..."
+                dialogTitle="Select Entity"
+                [minSearchLength]="1"
+                [ngModel]="selectedEntity"
+                (entitySelected)="onEntitySelected($event)"
+                (entityCleared)="onEntityCleared()">
+              </mm-entity-select-input>
+            } @else {
+              <kendo-textbox
+                [disabled]="true"
+                placeholder="First select Runtime Entities...">
+              </kendo-textbox>
+            }
+            <p class="field-hint">Select the specific entity to display in this widget.</p>
+          </div>
+
+          @if (selectedEntity) {
+            <div class="selection-preview">
+              <h4>Selected Entity</h4>
+              <div class="preview-content">
+                <p><strong>Type:</strong> {{ selectedCkType?.rtCkTypeId }}</p>
+                <p><strong>RT-ID:</strong> {{ selectedEntity.rtId }}</p>
+                @if (selectedEntity.rtWellKnownName) {
+                  <p><strong>Name:</strong> {{ selectedEntity.rtWellKnownName }}</p>
+                }
+              </div>
             </div>
+          }
+        }
+
+        @if (bindingMode === 'selector') {
+          <div class="form-field">
+            <label>Bind to entity selector</label>
+            <kendo-dropdownlist
+              [data]="availableSelectors"
+              textField="label"
+              valueField="id"
+              [valuePrimitive]="true"
+              [defaultItem]="{ id: '', label: '— Select —' }"
+              [(ngModel)]="entitySelectorId">
+            </kendo-dropdownlist>
+            <p class="field-hint">
+              The card follows the asset picked in this selector at board level —
+              its rtId and CK type are resolved from the current selection.
+            </p>
+          </div>
+        }
+
+        @if (bindingMode === 'variable') {
+          <div class="form-field">
+            <label>CK Type variable</label>
+            <kendo-textbox [(ngModel)]="variableCkTypeId" placeholder="$mp_rtCkTypeId"></kendo-textbox>
+            <p class="field-hint">CK type id, or a variable like <code>$mp_rtCkTypeId</code>.</p>
+          </div>
+          <div class="form-field">
+            <label>rtId variable</label>
+            <kendo-textbox [(ngModel)]="variableRtId" placeholder="$mp_rtId"></kendo-textbox>
+            <p class="field-hint">Runtime id, or a variable like <code>$mp_rtId</code>.</p>
           </div>
         }
 
@@ -4492,7 +4745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </button>
       </div>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.checkbox-row input{margin:0}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding:16px;position:relative}.config-form.loading{pointer-events:none}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.selection-preview{padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.selection-preview h4{margin:0 0 8px;font-size:.9rem;color:var(--kendo-color-primary, #0d6efd)}.preview-content p{margin:4px 0;font-size:.85rem}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.checkbox-row input{margin:0}.k-radio-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.radio-label{margin-left:8px;font-size:.9rem}.field-hint code{font-size:.78rem}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}\n"] }]
         }], propDecorators: { ckTypeSelectorInput: [{
                 type: ViewChild,
                 args: ['ckTypeSelector']
@@ -4503,6 +4756,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }], initialRtId: [{
                 type: Input
+            }], initialEntitySelectorId: [{
+                type: Input
             }], initialHideEmptyAttributes: [{
                 type: Input
             }] } });
@@ -4514,7 +4769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 /**
  * Supported row types for query processing.
  */
-const SUPPORTED_ROW_TYPES = [
+const SUPPORTED_ROW_TYPES$1 = [
     'RtSimpleQueryRow',
     'RtAggregationQueryRow',
     'RtGroupingAggregationQueryRow'
@@ -4615,7 +4870,7 @@ function parseNumericValue(value) {
 function extractAggregationValue(queryResult, valueField) {
     const rows = queryResult.rows?.items ?? [];
     // Get the first supported row
-    const firstRow = rows.find(row => row && SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''));
+    const firstRow = rows.find(row => row && SUPPORTED_ROW_TYPES$1.includes(row.__typename ?? ''));
     if (!firstRow)
         return 0;
     const cells = firstRow.cells?.items ?? [];
@@ -4650,7 +4905,7 @@ function extractGroupedAggregationValue(queryResult, categoryField, categoryValu
     const rows = queryResult.rows?.items ?? [];
     // Find the row where category matches
     for (const row of rows) {
-        if (!row || !SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+        if (!row || !SUPPORTED_ROW_TYPES$1.includes(row.__typename ?? ''))
             continue;
         const cells = row.cells?.items ?? [];
         let categoryMatch = false;
@@ -4687,7 +4942,7 @@ function processStaticSeriesData(rows, categoryField, seriesConfigs) {
         seriesMap.set(seriesConfig.field, []);
     }
     for (const row of rows) {
-        if (!SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+        if (!SUPPORTED_ROW_TYPES$1.includes(row.__typename ?? ''))
             continue;
         const cells = row.cells?.items ?? [];
         let categoryValue = '';
@@ -4737,7 +4992,7 @@ function processDynamicSeriesData(rows, categoryField, seriesGroupField, valueFi
     const allCategories = new Set();
     const allSeriesGroups = new Set();
     for (const row of rows) {
-        if (!SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+        if (!SUPPORTED_ROW_TYPES$1.includes(row.__typename ?? ''))
             continue;
         const cells = row.cells?.items ?? [];
         let categoryValue = '';
@@ -4790,7 +5045,7 @@ function processDynamicSeriesData(rows, categoryField, seriesGroupField, valueFi
 function processPieChartData(rows, categoryField, valueField) {
     const result = [];
     for (const row of rows) {
-        if (!SUPPORTED_ROW_TYPES.includes(row.__typename ?? ''))
+        if (!SUPPORTED_ROW_TYPES$1.includes(row.__typename ?? ''))
             continue;
         const cells = row.cells?.items ?? [];
         let categoryValue = '';
@@ -7006,8 +7261,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Centralized, timezone-aware datetime formatting for MeshBoard widgets.
+ *
+ * Every widget that renders a timestamp routes through here so the board's
+ * {@link MeshBoardTimeZoneMode} governs display consistently — matching the
+ * basis the time-filter boundaries are computed on. In `'local'` mode values
+ * render in the browser's timezone; in `'utc'` mode they render in UTC.
+ */
+/** Locale used for all MeshBoard datetime rendering (matches the app's LOCALE_ID family). */
+const MESHBOARD_LOCALE = 'de-AT';
+/**
+ * Strict ISO-8601 *date-time* matcher (date + time, optional fractional seconds
+ * and `Z`/offset). Plain dates (`2026-01-01`) are intentionally excluded so they
+ * are not reinterpreted across a timezone boundary.
+ */
+const ISO_DATE_TIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
+/** True when the value is a string in strict ISO-8601 date-time form. */
+function isIsoDateTime(value) {
+    return typeof value === 'string' && ISO_DATE_TIME_RE.test(value);
+}
+/** Parses a value into a valid `Date`, or returns `null` when it is not a usable instant. */
+function toInstant(value) {
+    if (value instanceof Date) {
+        return isNaN(value.getTime()) ? null : value;
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+        const date = new Date(value);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    return null;
+}
+/** Maps the board mode to the `Intl` `timeZone` option (`undefined` = browser local). */
+function timeZoneOption(mode) {
+    return mode === 'utc' ? 'UTC' : undefined;
+}
+/**
+ * Cached `Intl.DateTimeFormat` per board mode. Bucketing widgets call
+ * {@link getZonedDateParts} once per data row, so re-creating the (relatively
+ * expensive) formatter each time would be wasteful.
+ */
+const partsFormatterCache = new Map();
+function partsFormatter(mode) {
+    let formatter = partsFormatterCache.get(mode);
+    if (!formatter) {
+        formatter = new Intl.DateTimeFormat('en-US', {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hourCycle: 'h23',
+            timeZone: timeZoneOption(mode)
+        });
+        partsFormatterCache.set(mode, formatter);
+    }
+    return formatter;
+}
+/**
+ * Decomposes an instant into its calendar/clock components **in the board's
+ * timezone**. In `'local'` mode the parts are the browser-local wall-clock
+ * values; in `'utc'` mode they are the UTC values.
+ *
+ * This is the bucketing counterpart to {@link formatInstant}: widgets that group
+ * data by hour-of-day / day (e.g. the heatmap) must derive those buckets on the
+ * same timezone basis the time-filter boundaries use, otherwise a UTC+offset
+ * tenant sees rows shifted into the wrong hour/day. Returns `null` for
+ * non-instants so callers can skip the row.
+ */
+function getZonedDateParts(value, mode) {
+    const date = toInstant(value);
+    if (!date) {
+        return null;
+    }
+    const lookup = new Map();
+    for (const part of partsFormatter(mode).formatToParts(date)) {
+        lookup.set(part.type, part.value);
+    }
+    const year = Number(lookup.get('year'));
+    const month = Number(lookup.get('month'));
+    const day = Number(lookup.get('day'));
+    // `h23` yields 0–23, but some engines emit '24' for midnight — normalize it.
+    const hour = Number(lookup.get('hour')) % 24;
+    const minute = Number(lookup.get('minute'));
+    if ([year, month, day, hour, minute].some(Number.isNaN)) {
+        return null;
+    }
+    return { year, month, day, hour, minute };
+}
+/** Zero-padded `yyyy-MM-dd` key for {@link ZonedDateParts} (stable for sorting). */
+function zonedDateKey(parts) {
+    const month = parts.month.toString().padStart(2, '0');
+    const day = parts.day.toString().padStart(2, '0');
+    return `${parts.year}-${month}-${day}`;
+}
+/**
+ * Formats an instant honoring the board's timezone mode, with caller-supplied
+ * `Intl.DateTimeFormatOptions`. The `timeZone` option is injected from `mode`
+ * and overrides any passed in. Returns `null` when the value is not a valid
+ * instant, so callers can fall back to their own rendering.
+ */
+function formatInstant(value, mode, options) {
+    const date = toInstant(value);
+    if (!date) {
+        return null;
+    }
+    return date.toLocaleString(MESHBOARD_LOCALE, { ...options, timeZone: timeZoneOption(mode) });
+}
+/** Full date with `dd.MM.yyyy` in the board's timezone, or `null`. */
+function formatBoardDate(value, mode) {
+    return formatInstant(value, mode, { day: '2-digit', month: '2-digit', year: 'numeric' });
+}
+/**
+ * Full date + time with seconds (`dd.MM.yyyy HH:mm:ss`) in the board's timezone.
+ * This is the table-widget cell format. Returns `null` for non-instants.
+ *
+ * Date and time parts are formatted separately and joined with a single space so
+ * the output is exactly `dd.MM.yyyy HH:mm:ss` — the locale's combined format
+ * would otherwise insert a comma (`dd.MM.yyyy, HH:mm:ss`).
+ */
+function formatBoardDateTime(value, mode) {
+    const datePart = formatInstant(value, mode, { day: '2-digit', month: '2-digit', year: 'numeric' });
+    const timePart = formatInstant(value, mode, { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+    if (datePart === null || timePart === null) {
+        return null;
+    }
+    return `${datePart} ${timePart}`;
+}
+/**
+ * Table-cell formatter: ISO-8601 date-time strings are rendered in the board's
+ * timezone (`dd.MM.yyyy HH:mm:ss`); every other value passes through unchanged.
+ * Safe to attach to all columns — non-datetime cells are returned via `String`.
+ */
+function formatTableCellValue(value, mode) {
+    if (isIsoDateTime(value)) {
+        return formatBoardDateTime(value, mode) ?? String(value);
+    }
+    return value === null || value === undefined ? '' : String(value);
+}
+
 class EntityAssociationsWidgetComponent {
     dataService = inject(DashboardDataService);
+    stateService = inject(MeshBoardStateService);
     config;
     arrowRightIcon = arrowRightIcon;
     arrowLeftIcon = arrowLeftIcon;
@@ -7218,14 +7613,13 @@ class EntityAssociationsWidgetComponent {
                 maximumFractionDigits: 2
             });
         }
+        const mode = this.stateService.timeZoneMode();
         if (value instanceof Date)
-            return value.toLocaleDateString('de-AT');
+            return formatBoardDate(value, mode) ?? String(value);
         if (typeof value === 'string') {
-            // Try to detect ISO date strings
-            if (/^\d{4}-\d{2}-\d{2}T/.test(value)) {
-                const date = new Date(value);
-                if (!isNaN(date.getTime()))
-                    return date.toLocaleDateString('de-AT');
+            // Format ISO date-time strings on the board's timezone basis
+            if (isIsoDateTime(value)) {
+                return formatBoardDate(value, mode) ?? value;
             }
             return value;
         }
@@ -8514,6 +8908,7 @@ function resolveStatusMapping(config) {
 class TableWidgetComponent {
     config;
     dataSource;
+    stateService = inject(MeshBoardStateService);
     // Widget state signals
     _isLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
@@ -8545,9 +8940,25 @@ class TableWidgetComponent {
      * For persistent queries, uses dynamically derived columns from the query response.
      */
     listViewColumns = computed(() => {
+        // Read the board's timezone mode so datetime cells (e.g. archive
+        // window_start/window_end, which arrive as raw ISO-8601 strings) render on
+        // the same basis the time filter is computed on. Reading it here makes the
+        // columns recompute when the mode changes.
+        const mode = this.stateService.timeZoneMode();
+        // Only plain-text columns get the datetime formatter — columns the user
+        // explicitly typed ('date', 'numeric', 'iso8601', …) keep their own
+        // rendering, and any value that is not an ISO-8601 date-time passes through
+        // unchanged. Derived stream-data columns are all 'text', so they're covered.
+        const withDateFormatter = (column) => {
+            const isPlainText = !column.dataType || column.dataType === 'text';
+            if (!isPlainText || column.formatter) {
+                return column;
+            }
+            return { ...column, formatter: (value) => formatTableCellValue(value, mode) };
+        };
         // If explicit columns are configured, use them (works for both data source types)
         if (this.config?.columns && this.config.columns.length > 0) {
-            return this.config.columns.map(col => ({
+            return this.config.columns.map(col => withDateFormatter({
                 field: col.field,
                 displayName: col.title,
                 dataType: (col.dataType ?? 'text'),
@@ -8559,7 +8970,7 @@ class TableWidgetComponent {
         if (this.config?.dataSource?.type === 'persistentQuery') {
             const queryColumns = this._queryColumnsForView();
             if (queryColumns.length > 0) {
-                return queryColumns;
+                return queryColumns.map(withDateFormatter);
             }
             return [];
         }
@@ -12781,18 +13192,18 @@ class BarChartWidgetComponent {
         return defaultColor;
     }
     formatCategoryValue(value) {
-        const str = String(value ?? '');
-        // Detect ISO 8601 timestamps and format as readable date/time
-        if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(str)) {
-            const date = new Date(str);
-            if (!isNaN(date.getTime())) {
-                return date.toLocaleString('de-AT', {
-                    day: '2-digit', month: '2-digit',
-                    hour: '2-digit', minute: '2-digit'
-                });
+        // ISO-8601 date-time values are formatted on the board's timezone basis;
+        // everything else passes through as a string.
+        if (isIsoDateTime(value)) {
+            const formatted = formatInstant(value, this.stateService.timeZoneMode(), {
+                day: '2-digit', month: '2-digit',
+                hour: '2-digit', minute: '2-digit'
+            });
+            if (formatted !== null) {
+                return formatted;
             }
         }
-        return str;
+        return String(value ?? '');
     }
     /**
      * Converts widget filter configuration to GraphQL FieldFilterDto format.
@@ -14147,8 +14558,11 @@ class LineChartWidgetComponent {
         // Sort categories chronologically
         const sortedCategoryEntries = Array.from(allCategories.entries())
             .sort((a, b) => a[1].getTime() - b[1].getTime());
-        // Detect if we need time precision (multiple data points per day)
-        const dateOnlySet = new Set(sortedCategoryEntries.map(([, date]) => date.toLocaleDateString('de-AT')));
+        // Detect if we need time precision (multiple data points per day). The
+        // day-key is computed on the board's timezone basis so the date axis stays
+        // consistent with the time filter and the rest of the board.
+        const mode = this.stateService.timeZoneMode();
+        const dateOnlySet = new Set(sortedCategoryEntries.map(([, date]) => formatInstant(date, mode, { day: '2-digit', month: '2-digit', year: 'numeric' }) ?? '?'));
         const needsTime = dateOnlySet.size < sortedCategoryEntries.length;
         const categories = sortedCategoryEntries.map(([, date]) => needsTime ? this.formatDateTime(date) : this.formatDate(date));
         const categoryKeys = sortedCategoryEntries.map(([key]) => key);
@@ -14194,27 +14608,24 @@ class LineChartWidgetComponent {
      * Formats a date for display on the category axis (date only).
      */
     formatDate(date) {
-        if (isNaN(date.getTime()))
-            return '?';
-        return date.toLocaleDateString('de-AT', {
+        return formatInstant(date, this.stateService.timeZoneMode(), {
             day: '2-digit',
             month: '2-digit',
             year: 'numeric'
-        });
+        }) ?? '?';
     }
     /**
      * Formats a date with time for display on the category axis.
+     * Date and time parts are formatted separately (joined with a space) to keep
+     * the compact axis label; both honor the board's timezone mode.
      */
     formatDateTime(date) {
-        if (isNaN(date.getTime()))
+        const mode = this.stateService.timeZoneMode();
+        const datePart = formatInstant(date, mode, { day: '2-digit', month: '2-digit' });
+        const timePart = formatInstant(date, mode, { hour: '2-digit', minute: '2-digit' });
+        if (datePart === null || timePart === null)
             return '?';
-        return date.toLocaleDateString('de-AT', {
-            day: '2-digit',
-            month: '2-digit'
-        }) + ' ' + date.toLocaleTimeString('de-AT', {
-            hour: '2-digit',
-            minute: '2-digit'
-        });
+        return `${datePart} ${timePart}`;
     }
     sanitizeAxisName(name) {
         return name.replace(/[^a-zA-Z0-9]/g, '_');
@@ -14303,6 +14714,7 @@ class LineChartWidgetComponent {
                   [axis]="series.axisName ?? ''"
                   [color]="series.color"
                   [opacity]="0.18"
+                  [visibleInLegend]="false"
                   [markers]="{ visible: false }">
                 </kendo-chart-series-item>
               }
@@ -14335,7 +14747,7 @@ class LineChartWidgetComponent {
         </kendo-chart>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.line-chart-widget{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.data-count{position:absolute;top:2px;right:6px;z-index:2;font-size:.7rem;line-height:1;opacity:.55;color:var(--kendo-color-subtle, #6c757d);pointer-events:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.line-chart-widget.loading,.line-chart-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChartsModule }, { kind: "component", type: i1$7.ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "directive", type: i1$7.SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }, { kind: "component", type: i1$7.CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "component", type: i1$7.CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels", "highlight"] }, { kind: "component", type: i1$7.CategoryAxisLabelsComponent, selector: "kendo-chart-category-axis-item-labels", inputs: ["background", "border", "color", "content", "culture", "dateFormats", "font", "format", "margin", "mirror", "padding", "position", "rotation", "skip", "step", "visible", "visual"] }, { kind: "component", type: i1$7.ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "component", type: i1$7.LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: i1$7.SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: i1$7.SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "lineStyle", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: i1$7.TooltipComponent, selector: "kendo-chart-tooltip", inputs: ["background", "border", "color", "font", "format", "opacity", "padding", "shared", "visible"] }, { kind: "component", type: i1$7.ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: i1$7.ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;width:100%;height:100%}.line-chart-widget{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.data-count{position:absolute;top:4px;right:6px;z-index:2;max-width:calc(100% - 12px);padding:1px 7px;border-radius:9px;font-size:.7rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--kendo-color-on-app-surface, #6c757d);background:color-mix(in srgb,var(--kendo-color-app-surface, #888) 12%,transparent);pointer-events:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.line-chart-widget.loading,.line-chart-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ChartsModule }, { kind: "component", type: i1$7.ChartComponent, selector: "kendo-chart", inputs: ["pannable", "renderAs", "seriesColors", "subtitle", "title", "noData", "observeStyles", "transitions", "zoomable", "axisDefaults", "categoryAxis", "chartArea", "legend", "panes", "paneDefaults", "plotArea", "series", "seriesDefaults", "tooltip", "valueAxis", "xAxis", "yAxis", "resizeRateLimit", "popupSettings", "drilldownLevel"], outputs: ["axisLabelClick", "drag", "dragEnd", "dragStart", "legendItemHover", "legendItemLeave", "noteClick", "noteHover", "noteLeave", "paneRender", "plotAreaClick", "plotAreaHover", "plotAreaLeave", "render", "select", "selectEnd", "selectStart", "seriesClick", "drilldown", "seriesHover", "seriesOver", "seriesLeave", "zoom", "zoomEnd", "zoomStart", "legendItemClick", "drilldownLevelChange"], exportAs: ["kendoChart"] }, { kind: "directive", type: i1$7.SeriesTooltipTemplateDirective, selector: "[kendoChartSeriesTooltipTemplate]" }, { kind: "component", type: i1$7.CategoryAxisComponent, selector: "kendo-chart-category-axis" }, { kind: "component", type: i1$7.CategoryAxisItemComponent, selector: "kendo-chart-category-axis-item", inputs: ["autoBaseUnitSteps", "axisCrossingValue", "background", "baseUnit", "baseUnitStep", "categories", "color", "justified", "line", "majorGridLines", "majorTicks", "max", "maxDateGroups", "maxDivisions", "min", "minorGridLines", "minorTicks", "name", "pane", "plotBands", "reverse", "roundToBaseUnit", "startAngle", "type", "visible", "weekStartDay", "crosshair", "labels", "notes", "select", "title", "rangeLabels", "highlight"] }, { kind: "component", type: i1$7.CategoryAxisLabelsComponent, selector: "kendo-chart-category-axis-item-labels", inputs: ["background", "border", "color", "content", "culture", "dateFormats", "font", "format", "margin", "mirror", "padding", "position", "rotation", "skip", "step", "visible", "visual"] }, { kind: "component", type: i1$7.ChartAreaComponent, selector: "kendo-chart-area", inputs: ["background", "border", "height", "margin", "opacity", "width"] }, { kind: "component", type: i1$7.LegendComponent, selector: "kendo-chart-legend", inputs: ["align", "background", "border", "height", "labels", "margin", "offsetX", "offsetY", "orientation", "padding", "position", "reverse", "visible", "width", "markers", "spacing", "inactiveItems", "item", "title", "focusHighlight"] }, { kind: "component", type: i1$7.SeriesComponent, selector: "kendo-chart-series" }, { kind: "component", type: i1$7.SeriesItemComponent, selector: "kendo-chart-series-item", inputs: ["aggregate", "autoFit", "axis", "border", "categoryAxis", "categoryField", "closeField", "color", "colorField", "connectors", "currentField", "dashType", "data", "downColor", "downColorField", "drilldownField", "dynamicHeight", "dynamicSlope", "errorHighField", "errorLowField", "explodeField", "field", "fromField", "gap", "highField", "holeSize", "line", "lowField", "lowerField", "margin", "maxSize", "mean", "meanField", "median", "medianField", "minSize", "missingValues", "name", "neckRatio", "negativeColor", "negativeValues", "noteTextField", "opacity", "openField", "outliersField", "overlay", "padding", "q1Field", "q3Field", "segmentSpacing", "size", "sizeField", "spacing", "stack", "startAngle", "lineStyle", "summaryField", "target", "toField", "type", "upperField", "visible", "visibleInLegend", "visibleInLegendField", "visual", "width", "whiskers", "xAxis", "xErrorHighField", "xErrorLowField", "xField", "yAxis", "yErrorHighField", "yErrorLowField", "yField", "zIndex", "trendline", "for", "legendItem", "pattern", "patternField", "errorBars", "extremes", "highlight", "labels", "markers", "notes", "outliers", "tooltip"] }, { kind: "component", type: i1$7.TooltipComponent, selector: "kendo-chart-tooltip", inputs: ["background", "border", "color", "font", "format", "opacity", "padding", "shared", "visible"] }, { kind: "component", type: i1$7.ValueAxisComponent, selector: "kendo-chart-value-axis" }, { kind: "component", type: i1$7.ValueAxisItemComponent, selector: "kendo-chart-value-axis-item", inputs: ["axisCrossingValue", "background", "color", "line", "majorGridLines", "majorTicks", "majorUnit", "max", "min", "minorGridLines", "minorTicks", "minorUnit", "name", "narrowRange", "pane", "plotBands", "reverse", "type", "visible", "crosshair", "labels", "notes", "title"] }, { kind: "component", type: WidgetNotConfiguredComponent, selector: "mm-widget-not-configured" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: LineChartWidgetComponent, decorators: [{
             type: Component,
@@ -14415,6 +14827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                   [axis]="series.axisName ?? ''"
                   [color]="series.color"
                   [opacity]="0.18"
+                  [visibleInLegend]="false"
                   [markers]="{ visible: false }">
                 </kendo-chart-series-item>
               }
@@ -14447,7 +14860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
         </kendo-chart>
       }
     </div>
-  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;width:100%;height:100%}.line-chart-widget{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.data-count{position:absolute;top:2px;right:6px;z-index:2;font-size:.7rem;line-height:1;opacity:.55;color:var(--kendo-color-subtle, #6c757d);pointer-events:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.line-chart-widget.loading,.line-chart-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.Eager, styles: [":host{display:block;width:100%;height:100%}.line-chart-widget{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:8px;box-sizing:border-box;overflow:hidden}.data-count{position:absolute;top:4px;right:6px;z-index:2;max-width:calc(100% - 12px);padding:1px 7px;border-radius:9px;font-size:.7rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--kendo-color-on-app-surface, #6c757d);background:color-mix(in srgb,var(--kendo-color-app-surface, #888) 12%,transparent);pointer-events:none;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums}.line-chart-widget.loading,.line-chart-widget.error{opacity:.7}.loading-indicator,.error-message{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.loading-indicator span{font-size:1.5rem;color:var(--kendo-color-subtle, #6c757d)}.error-message span{color:var(--kendo-color-error, #dc3545);font-size:.875rem}.chart-container{width:100%;height:100%}kendo-chart{width:100%;height:100%}.chart-tooltip{padding:4px 8px}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -15380,11 +15793,15 @@ class HeatmapWidgetComponent {
         // Detect interval width in minutes from the first row that has both from and to
         const intervalMinutes = this.detectIntervalMinutes(parsedRows);
         const hasSubHourIntervals = dateEndField && intervalMinutes > 0 && intervalMinutes < 60;
+        // Bucket on the board's timezone basis so hour-of-day / day axes match the
+        // time-filter boundaries (default 'local'); using UTC here shifts a UTC+N
+        // tenant's rows into the wrong hour/day.
+        const mode = this.stateService.timeZoneMode();
         if (hasSubHourIntervals) {
-            this.processSubHourData(parsedRows, intervalMinutes, aggregation);
+            this.processSubHourData(parsedRows, intervalMinutes, aggregation, mode);
         }
         else {
-            this.processHourlyData(parsedRows, aggregation);
+            this.processHourlyData(parsedRows, aggregation, mode);
         }
     }
     /**
@@ -15404,11 +15821,14 @@ class HeatmapWidgetComponent {
     /**
      * Processes data into hourly buckets (original behavior).
      */
-    processHourlyData(rows, aggregation) {
+    processHourlyData(rows, aggregation, mode) {
         const buckets = new Map();
         for (const { dateFrom, numericValue } of rows) {
-            const dateKey = this.formatDateKey(dateFrom);
-            const hour = dateFrom.getUTCHours();
+            const parts = getZonedDateParts(dateFrom, mode);
+            if (!parts)
+                continue;
+            const dateKey = zonedDateKey(parts);
+            const hour = parts.hour;
             if (!buckets.has(dateKey))
                 buckets.set(dateKey, new Map());
             const hourMap = buckets.get(dateKey);
@@ -15438,16 +15858,19 @@ class HeatmapWidgetComponent {
      * Y-axis: hours (00:00..23:00), X-axis: interval labels (e.g. "00-15", "15-30", ...).
      * For multi-day data, X-axis labels are prefixed with the date.
      */
-    processSubHourData(rows, intervalMinutes, aggregation) {
+    processSubHourData(rows, intervalMinutes, aggregation, mode) {
         const intervalsPerHour = Math.floor(60 / intervalMinutes);
         // Bucket: xKey (date+interval) -> hour -> values[]
         const buckets = new Map();
         const allDates = new Set();
         for (const { dateFrom, numericValue } of rows) {
-            const dateKey = this.formatDateKey(dateFrom);
+            const parts = getZonedDateParts(dateFrom, mode);
+            if (!parts)
+                continue;
+            const dateKey = zonedDateKey(parts);
             allDates.add(dateKey);
-            const hour = dateFrom.getUTCHours();
-            const minute = dateFrom.getUTCMinutes();
+            const hour = parts.hour;
+            const minute = parts.minute;
             const intervalIndex = Math.floor(minute / intervalMinutes);
             const intervalStart = intervalIndex * intervalMinutes;
             const intervalEnd = intervalStart + intervalMinutes;
@@ -15540,12 +15963,6 @@ class HeatmapWidgetComponent {
         const date = new Date(String(value));
         return isNaN(date.getTime()) ? null : date;
     }
-    formatDateKey(date) {
-        const year = date.getUTCFullYear();
-        const month = (date.getUTCMonth() + 1).toString().padStart(2, '0');
-        const day = date.getUTCDate().toString().padStart(2, '0');
-        return `${year}-${month}-${day}`;
-    }
     convertFiltersToDto(filters) {
         const variables = this.stateService.getVariables();
         return this.variableService.convertToFieldFilterDto(filters, variables);
@@ -16413,8 +16830,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Row `__typename`s the value extraction recognises. Runtime queries
+ * discriminate by kind; stream-data queries collapse every kind
+ * (simple / aggregation / grouped / downsampling) into `StreamDataQueryRow`.
+ */
+const SUPPORTED_ROW_TYPES = new Set([
+    'RtAggregationQueryRow',
+    'RtGroupingAggregationQueryRow',
+    'StreamDataQueryRow'
+]);
+function extractAggregation(result, valueField) {
+    const firstRow = result.rows.find(row => SUPPORTED_ROW_TYPES.has(row.__typename ?? ''));
+    if (!firstRow)
+        return 0;
+    if (valueField) {
+        for (const cell of firstRow.cells) {
+            if (matchesAttributePath(cell.attributePath, valueField)) {
+                return parseNumericValue(cell.value);
+            }
+        }
+    }
+    // Fallback: first cell value when no specific field is configured.
+    return firstRow.cells.length > 0 ? parseNumericValue(firstRow.cells[0].value) : 0;
+}
+function extractGroupedAggregation(result, categoryField, categoryValue, valueField) {
+    if (!categoryField || !categoryValue || !valueField)
+        return 0;
+    for (const row of result.rows) {
+        if (!SUPPORTED_ROW_TYPES.has(row.__typename ?? ''))
+            continue;
+        let categoryMatch = false;
+        let value = 0;
+        for (const cell of row.cells) {
+            if (matchesAttributePath(cell.attributePath, categoryField) && String(cell.value) === categoryValue) {
+                categoryMatch = true;
+            }
+            if (matchesAttributePath(cell.attributePath, valueField)) {
+                value = parseNumericValue(cell.value);
+            }
+        }
+        if (categoryMatch)
+            return value;
+    }
+    return 0;
+}
+/**
+ * Reduces a unified query result to the single numeric value a cell displays,
+ * according to the source's `queryMode`. Mirrors the KPI widget extraction.
+ */
+function extractPersistentQueryCellValue(result, source) {
+    switch (source.queryMode ?? 'simpleCount') {
+        case 'aggregation':
+            return extractAggregation(result, source.queryValueField);
+        case 'groupedAggregation':
+            return extractGroupedAggregation(result, source.queryCategoryField, source.queryCategoryValue, source.queryValueField);
+        case 'simpleCount':
+        default:
+            return result.totalCount;
+    }
+}
+
 class StatsGridWidgetComponent {
     dataService = inject(MeshBoardDataService);
+    queryExecutor = inject(QueryExecutorService);
+    stateService = inject(MeshBoardStateService);
+    variableService = inject(MeshBoardVariableService);
     config;
     _isLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
@@ -16461,26 +16942,22 @@ class StatsGridWidgetComponent {
         this._isLoading.set(true);
         this._error.set(null);
         try {
+            // Runtime aggregation queries are only needed for stats WITHOUT a
+            // per-stat persistent-query source — those run through the executor below.
             const dataSource = this.config.dataSource;
-            if (dataSource?.type !== 'aggregation' || !dataSource.queries?.length) {
-                // No aggregation queries configured - show zeros
-                this._statValues.set(initialValues.map(v => ({ ...v, value: 0, isLoading: false })));
-                return;
-            }
-            // Load all aggregation queries
-            const results = await this.dataService.fetchAggregations(dataSource.queries);
-            // Map results to stat values
-            const updatedValues = this.config.stats.map(stat => {
-                const result = results.get(stat.queryId);
-                return {
-                    label: stat.label,
-                    value: result ?? null,
-                    color: this.getColorClass(stat.color),
-                    prefix: stat.prefix,
-                    suffix: stat.suffix,
-                    isLoading: false
-                };
-            });
+            const aggregationQueries = dataSource?.type === 'aggregation' ? (dataSource.queries ?? []) : [];
+            const aggregationResults = aggregationQueries.length > 0
+                ? await this.dataService.fetchAggregations(aggregationQueries)
+                : new Map();
+            // Resolve every stat's value (persistent-query stats execute in parallel).
+            const updatedValues = await Promise.all(this.config.stats.map(async (stat) => ({
+                label: stat.label,
+                value: await this.resolveStatValue(stat, aggregationResults),
+                color: this.getColorClass(stat.color),
+                prefix: stat.prefix,
+                suffix: stat.suffix,
+                isLoading: false
+            })));
             this._statValues.set(updatedValues);
         }
         catch (err) {
@@ -16492,6 +16969,41 @@ class StatsGridWidgetComponent {
             this._isLoading.set(false);
         }
     }
+    /**
+     * Resolves a single stat's value: a per-stat persistent query (runtime or
+     * stream-data) when configured, otherwise the runtime aggregation result.
+     */
+    async resolveStatValue(stat, aggregationResults) {
+        if (stat.persistentQuerySource) {
+            return this.loadPersistentQueryValue(stat.persistentQuerySource);
+        }
+        return aggregationResults.get(stat.queryId) ?? null;
+    }
+    async loadPersistentQueryValue(source) {
+        try {
+            const result = await firstValueFrom(this.queryExecutor.execute(source.queryFamily, source.queryRtId, {
+                fieldFilter: this.convertFiltersToDto(source.filters),
+                streamDataArgs: this.buildStreamDataArgs(source)
+            }));
+            return extractPersistentQueryCellValue(result, source);
+        }
+        catch (err) {
+            console.error('Error loading stat persistent-query data:', err);
+            return null;
+        }
+    }
+    buildStreamDataArgs(source) {
+        const timeArgs = this.stateService.resolveStreamDataTimeArgs(source.ignoreTimeFilter);
+        const rtIds = this.stateService.resolveStreamDataRtIds(source.entitySelectorId);
+        if (!timeArgs && !rtIds) {
+            return undefined;
+        }
+        return { ...timeArgs, rtIds };
+    }
+    convertFiltersToDto(filters) {
+        const variables = this.stateService.getVariables();
+        return this.variableService.convertToFieldFilterDto(filters, variables) ?? undefined;
+    }
     getColorClass(color) {
         switch (color) {
             case 'mint': return 'stat-mint';
@@ -16526,11 +17038,259 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Reusable editor for a {@link PersistentQueryCellSource} (a single-value
+ * persistent-query data source). Shared by the stats-grid stat editor and the
+ * summary-card tile editor so both surface the identical runtime/stream-data
+ * configuration UX (query picker, SD time-filter opt-out + asset-scope, query
+ * mode and value/category fields). The runtime ↔ stream-data choice is derived
+ * from the picked query's family — the SD-only controls hide for runtime queries.
+ */
+class PersistentQueryCellEditorComponent {
+    getQueriesGQL = inject(GetSystemPersistentQueriesDtoGQL);
+    initialSource;
+    selectors = [];
+    sourceChange = new EventEmitter();
+    queries = [];
+    selectedQuery = null;
+    isLoading = false;
+    ignoreTimeFilter = false;
+    entitySelectorId;
+    queryMode = 'simpleCount';
+    queryValueField;
+    queryCategoryField;
+    queryCategoryValue;
+    queryModeOptions = [
+        { value: 'simpleCount', label: 'Simple (total count)' },
+        { value: 'aggregation', label: 'Aggregation (single value)' },
+        { value: 'groupedAggregation', label: 'Grouped aggregation' }
+    ];
+    /** Family of the picked query, derived from its own CK type. */
+    get family() {
+        return queryFamily(this.selectedQuery?.ckTypeId) ?? undefined;
+    }
+    async ngOnInit() {
+        const src = this.initialSource;
+        if (src) {
+            this.ignoreTimeFilter = src.ignoreTimeFilter ?? false;
+            this.entitySelectorId = src.entitySelectorId;
+            this.queryMode = src.queryMode ?? 'simpleCount';
+            this.queryValueField = src.queryValueField;
+            this.queryCategoryField = src.queryCategoryField;
+            this.queryCategoryValue = src.queryCategoryValue;
+        }
+        await this.loadQueries();
+        if (src?.queryRtId) {
+            this.selectedQuery = this.queries.find(q => q.rtId === src.queryRtId)
+                ?? { rtId: src.queryRtId, name: src.queryName ?? src.queryRtId, ckTypeId: undefined, queryCkTypeId: undefined };
+        }
+    }
+    async onFilter(text) {
+        await this.loadQueries(text);
+    }
+    onQuerySelected(query) {
+        this.selectedQuery = query;
+        // Reset SD-only state when the picked query is not a stream-data query.
+        if (this.family !== 'streamData') {
+            this.ignoreTimeFilter = false;
+            this.entitySelectorId = undefined;
+        }
+        this.emit();
+    }
+    emit() {
+        if (!this.selectedQuery) {
+            // Emit an empty-rtId source so the parent can flag the cell invalid.
+            this.sourceChange.emit({ queryRtId: '', queryMode: this.queryMode });
+            return;
+        }
+        const family = this.family;
+        const source = {
+            queryRtId: this.selectedQuery.rtId,
+            queryName: this.selectedQuery.name,
+            queryFamily: family,
+            queryMode: this.queryMode,
+            queryValueField: this.queryValueField || undefined,
+            queryCategoryField: this.queryCategoryField || undefined,
+            queryCategoryValue: this.queryCategoryValue || undefined,
+            filters: this.initialSource?.filters
+        };
+        if (family === 'streamData') {
+            if (this.ignoreTimeFilter)
+                source.ignoreTimeFilter = true;
+            if (this.entitySelectorId)
+                source.entitySelectorId = this.entitySelectorId;
+        }
+        this.sourceChange.emit(source);
+    }
+    async loadQueries(searchText) {
+        this.isLoading = true;
+        try {
+            const result = await firstValueFrom(this.getQueriesGQL.fetch({
+                first: 100,
+                searchFilter: searchText ? { searchTerm: searchText, language: 'de' } : undefined
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Apollo fetch requires flexible variable typing
+            }));
+            this.queries = (result.data?.runtime?.systemPersistentQuery?.items ?? [])
+                .filter((item) => item !== null)
+                .map(item => ({
+                rtId: item.rtId,
+                name: item.name,
+                description: item.description,
+                ckTypeId: item.ckTypeId,
+                queryCkTypeId: item.queryCkTypeId
+            }));
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PersistentQueryCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: PersistentQueryCellEditorComponent, isStandalone: true, selector: "mm-persistent-query-cell-editor", inputs: { initialSource: "initialSource", selectors: "selectors" }, outputs: { sourceChange: "sourceChange" }, ngImport: i0, template: `
+    <div class="pq-editor">
+      <div class="pq-field">
+        <label>Persistent Query <span class="required">*</span></label>
+        <kendo-combobox
+          [data]="queries"
+          [textField]="'name'"
+          [valueField]="'rtId'"
+          [valuePrimitive]="false"
+          [(ngModel)]="selectedQuery"
+          [filterable]="true"
+          (filterChange)="onFilter($event)"
+          (valueChange)="onQuerySelected($event)"
+          [loading]="isLoading"
+          placeholder="Select a query...">
+        </kendo-combobox>
+      </div>
+
+      <!-- Stream-data-only options (hidden for runtime queries) -->
+      <mm-sd-time-filter-toggle
+        [family]="family"
+        [(ignoreTimeFilter)]="ignoreTimeFilter"
+        (ignoreTimeFilterChange)="emit()">
+      </mm-sd-time-filter-toggle>
+      <mm-entity-selector-scope-picker
+        [family]="family"
+        [selectors]="selectors"
+        [(entitySelectorId)]="entitySelectorId"
+        (entitySelectorIdChange)="emit()">
+      </mm-entity-selector-scope-picker>
+
+      <div class="pq-field">
+        <label>Query Mode</label>
+        <kendo-dropdownlist
+          [data]="queryModeOptions"
+          textField="label"
+          valueField="value"
+          [valuePrimitive]="true"
+          [(ngModel)]="queryMode"
+          (valueChange)="emit()">
+        </kendo-dropdownlist>
+      </div>
+
+      @if (queryMode === 'aggregation' || queryMode === 'groupedAggregation') {
+        <div class="pq-field">
+          <label>Value Field</label>
+          <kendo-textbox [(ngModel)]="queryValueField" (valueChange)="emit()" placeholder="e.g. amountvalue_sum"></kendo-textbox>
+        </div>
+      }
+
+      @if (queryMode === 'groupedAggregation') {
+        <div class="pq-field">
+          <label>Category Field</label>
+          <kendo-textbox [(ngModel)]="queryCategoryField" (valueChange)="emit()" placeholder="e.g. operatingstatus"></kendo-textbox>
+        </div>
+        <div class="pq-field">
+          <label>Category Value</label>
+          <kendo-textbox [(ngModel)]="queryCategoryValue" (valueChange)="emit()" placeholder="value to match"></kendo-textbox>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".pq-editor{display:flex;flex-direction:column;gap:8px}.pq-field{display:flex;flex-direction:column;gap:4px}.pq-field label{font-weight:600;font-size:.85rem}.required{color:var(--kendo-color-error, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: SdTimeFilterToggleComponent, selector: "mm-sd-time-filter-toggle", inputs: ["family", "ignoreTimeFilter"], outputs: ["ignoreTimeFilterChange"] }, { kind: "component", type: EntitySelectorScopePickerComponent, selector: "mm-entity-selector-scope-picker", inputs: ["family", "entitySelectorId", "selectors"], outputs: ["entitySelectorIdChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: PersistentQueryCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-persistent-query-cell-editor', standalone: true, imports: [CommonModule, FormsModule, InputsModule, DropDownsModule, SdTimeFilterToggleComponent, EntitySelectorScopePickerComponent], changeDetection: ChangeDetectionStrategy.Eager, template: `
+    <div class="pq-editor">
+      <div class="pq-field">
+        <label>Persistent Query <span class="required">*</span></label>
+        <kendo-combobox
+          [data]="queries"
+          [textField]="'name'"
+          [valueField]="'rtId'"
+          [valuePrimitive]="false"
+          [(ngModel)]="selectedQuery"
+          [filterable]="true"
+          (filterChange)="onFilter($event)"
+          (valueChange)="onQuerySelected($event)"
+          [loading]="isLoading"
+          placeholder="Select a query...">
+        </kendo-combobox>
+      </div>
+
+      <!-- Stream-data-only options (hidden for runtime queries) -->
+      <mm-sd-time-filter-toggle
+        [family]="family"
+        [(ignoreTimeFilter)]="ignoreTimeFilter"
+        (ignoreTimeFilterChange)="emit()">
+      </mm-sd-time-filter-toggle>
+      <mm-entity-selector-scope-picker
+        [family]="family"
+        [selectors]="selectors"
+        [(entitySelectorId)]="entitySelectorId"
+        (entitySelectorIdChange)="emit()">
+      </mm-entity-selector-scope-picker>
+
+      <div class="pq-field">
+        <label>Query Mode</label>
+        <kendo-dropdownlist
+          [data]="queryModeOptions"
+          textField="label"
+          valueField="value"
+          [valuePrimitive]="true"
+          [(ngModel)]="queryMode"
+          (valueChange)="emit()">
+        </kendo-dropdownlist>
+      </div>
+
+      @if (queryMode === 'aggregation' || queryMode === 'groupedAggregation') {
+        <div class="pq-field">
+          <label>Value Field</label>
+          <kendo-textbox [(ngModel)]="queryValueField" (valueChange)="emit()" placeholder="e.g. amountvalue_sum"></kendo-textbox>
+        </div>
+      }
+
+      @if (queryMode === 'groupedAggregation') {
+        <div class="pq-field">
+          <label>Category Field</label>
+          <kendo-textbox [(ngModel)]="queryCategoryField" (valueChange)="emit()" placeholder="e.g. operatingstatus"></kendo-textbox>
+        </div>
+        <div class="pq-field">
+          <label>Category Value</label>
+          <kendo-textbox [(ngModel)]="queryCategoryValue" (valueChange)="emit()" placeholder="value to match"></kendo-textbox>
+        </div>
+      }
+    </div>
+  `, styles: [".pq-editor{display:flex;flex-direction:column;gap:8px}.pq-field{display:flex;flex-direction:column;gap:4px}.pq-field label{font-weight:600;font-size:.85rem}.required{color:var(--kendo-color-error, #dc3545)}\n"] }]
+        }], propDecorators: { initialSource: [{
+                type: Input
+            }], selectors: [{
+                type: Input
+            }], sourceChange: [{
+                type: Output
+            }] } });
+
 class StatsGridConfigDialogComponent {
     windowRef = inject(WindowRef);
+    stateService = inject(MeshBoardStateService);
     initialStats;
     initialQueries;
     initialColumns;
+    entitySelectors = [];
+    sourceTypeOptions = [
+        { value: 'aggregation', label: 'Runtime aggregation' },
+        { value: 'persistentQuery', label: 'Persistent query' }
+    ];
     colorOptions = [
         { value: 'mint', label: 'Mint', color: '#98d9c2' },
         { value: 'cyan', label: 'Cyan', color: '#5bc0be' },
@@ -16558,20 +17318,29 @@ class StatsGridConfigDialogComponent {
     get isValid() {
         if (this.form.stats.length === 0)
             return false;
-        return this.form.stats.every(stat => stat.label?.trim() && stat.ckTypeId?.trim());
+        return this.form.stats.every(stat => {
+            if (!stat.label?.trim())
+                return false;
+            return stat.sourceType === 'persistentQuery'
+                ? !!stat.persistentQuerySource?.queryRtId
+                : !!stat.ckTypeId?.trim();
+        });
     }
     ngOnInit() {
         this.filteredCkTypeOptions = [...this.ckTypeOptions];
         this.form.columns = this.initialColumns ?? 3;
+        this.entitySelectors = this.stateService.getEntitySelectors();
         // Convert initial stats and queries to editable format
-        if (this.initialStats && this.initialQueries) {
+        if (this.initialStats) {
             this.form.stats = this.initialStats.map(stat => {
                 const query = this.initialQueries?.find(q => q.id === stat.queryId);
                 return {
                     id: `stat-${this.nextId++}`,
                     label: stat.label,
+                    sourceType: stat.persistentQuerySource ? 'persistentQuery' : 'aggregation',
                     ckTypeId: query?.ckTypeId ?? '',
                     aggregation: query?.aggregation ?? 'count',
+                    persistentQuerySource: stat.persistentQuerySource,
                     color: stat.color ?? 'default',
                     prefix: stat.prefix,
                     suffix: stat.suffix
@@ -16588,6 +17357,7 @@ class StatsGridConfigDialogComponent {
         this.form.stats.push({
             id: `stat-${this.nextId++}`,
             label: '',
+            sourceType: 'aggregation',
             ckTypeId: 'ConstructionKit/CkType',
             aggregation: 'count',
             color: 'default'
@@ -16602,6 +17372,18 @@ class StatsGridConfigDialogComponent {
         const queries = [];
         for (const stat of this.form.stats) {
             const queryId = `query-${stat.id}`;
+            if (stat.sourceType === 'persistentQuery') {
+                // Persistent-query stat — value comes from the executor, no aggregation query.
+                stats.push({
+                    label: stat.label,
+                    queryId,
+                    persistentQuerySource: stat.persistentQuerySource,
+                    color: stat.color,
+                    prefix: stat.prefix,
+                    suffix: stat.suffix
+                });
+                continue;
+            }
             stats.push({
                 label: stat.label,
                 queryId,
@@ -16705,28 +17487,53 @@ class StatsGridConfigDialogComponent {
                 </div>
 
                 <div class="form-row">
-                  <div class="form-field flex-2">
-                    <label>CK Type <span class="required">*</span></label>
+                  <div class="form-field flex-1">
+                    <label>Data Source</label>
                     <kendo-dropdownlist
-                      [data]="ckTypeOptions"
+                      [data]="sourceTypeOptions"
                       textField="label"
                       valueField="value"
                       [valuePrimitive]="true"
-                      [(ngModel)]="stat.ckTypeId"
-                      [filterable]="true"
-                      (filterChange)="onCkTypeFilter($event)">
-                    </kendo-dropdownlist>
-                  </div>
-                  <div class="form-field flex-1">
-                    <label>Aggregation</label>
-                    <kendo-dropdownlist
-                      [data]="aggregationOptions"
-                      [valuePrimitive]="true"
-                      [(ngModel)]="stat.aggregation">
+                      [(ngModel)]="stat.sourceType">
                     </kendo-dropdownlist>
                   </div>
                 </div>
 
+                @if (stat.sourceType !== 'persistentQuery') {
+                  <div class="form-row">
+                    <div class="form-field flex-2">
+                      <label>CK Type <span class="required">*</span></label>
+                      <kendo-dropdownlist
+                        [data]="ckTypeOptions"
+                        textField="label"
+                        valueField="value"
+                        [valuePrimitive]="true"
+                        [(ngModel)]="stat.ckTypeId"
+                        [filterable]="true"
+                        (filterChange)="onCkTypeFilter($event)">
+                      </kendo-dropdownlist>
+                    </div>
+                    <div class="form-field flex-1">
+                      <label>Aggregation</label>
+                      <kendo-dropdownlist
+                        [data]="aggregationOptions"
+                        [valuePrimitive]="true"
+                        [(ngModel)]="stat.aggregation">
+                      </kendo-dropdownlist>
+                    </div>
+                  </div>
+                } @else {
+                  <div class="form-row">
+                    <div class="form-field flex-1">
+                      <mm-persistent-query-cell-editor
+                        [initialSource]="stat.persistentQuerySource"
+                        [selectors]="entitySelectors"
+                        (sourceChange)="stat.persistentQuerySource = $event">
+                      </mm-persistent-query-cell-editor>
+                    </div>
+                  </div>
+                }
+
                 <div class="form-row">
                   <div class="form-field flex-1">
                     <label>Prefix</label>
@@ -16760,7 +17567,7 @@ class StatsGridConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;padding:16px;flex:1;overflow-y:auto}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.flex-1{flex:1}.form-field.flex-2{flex:2}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h4{margin:0;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.form-row{display:flex;gap:16px}.required{color:var(--kendo-color-error, #dc3545)}.empty-state{text-align:center;padding:24px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.stat-item{padding:16px;margin-bottom:12px;background:var(--kendo-color-surface, #ffffff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.stat-number{font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.stat-form{display:flex;flex-direction:column;gap:12px}.color-item{display:flex;align-items:center;gap:8px}.color-swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{display:flex;flex-direction:column;gap:20px;padding:16px;flex:1;overflow-y:auto}.form-field{display:flex;flex-direction:column;gap:6px}.form-field.flex-1{flex:1}.form-field.flex-2{flex:2}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.form-section{padding:16px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h4{margin:0;font-size:.95rem;color:var(--kendo-color-primary, #0d6efd)}.form-row{display:flex;gap:16px}.required{color:var(--kendo-color-error, #dc3545)}.empty-state{text-align:center;padding:24px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.stat-item{padding:16px;margin-bottom:12px;background:var(--kendo-color-surface, #ffffff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.stat-number{font-weight:600;color:var(--kendo-color-primary, #0d6efd)}.stat-form{display:flex;flex-direction:column;gap:12px}.color-item{display:flex;align-items:center;gap:8px}.color-swatch{width:16px;height:16px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "directive", type: i4.ValueTemplateDirective, selector: "[kendoDropDownListValueTemplate],[kendoDropDownTreeValueTemplate]" }, { kind: "component", type: PersistentQueryCellEditorComponent, selector: "mm-persistent-query-cell-editor", inputs: ["initialSource", "selectors"], outputs: ["sourceChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: StatsGridConfigDialogComponent, decorators: [{
             type: Component,
@@ -16769,7 +17576,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         FormsModule,
                         ButtonsModule,
                         InputsModule,
-                        DropDownsModule
+                        DropDownsModule,
+                        PersistentQueryCellEditorComponent
                     ], template: `
     <div class="config-container">
 
@@ -16849,28 +17657,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 </div>
 
                 <div class="form-row">
-                  <div class="form-field flex-2">
-                    <label>CK Type <span class="required">*</span></label>
+                  <div class="form-field flex-1">
+                    <label>Data Source</label>
                     <kendo-dropdownlist
-                      [data]="ckTypeOptions"
+                      [data]="sourceTypeOptions"
                       textField="label"
                       valueField="value"
                       [valuePrimitive]="true"
-                      [(ngModel)]="stat.ckTypeId"
-                      [filterable]="true"
-                      (filterChange)="onCkTypeFilter($event)">
-                    </kendo-dropdownlist>
-                  </div>
-                  <div class="form-field flex-1">
-                    <label>Aggregation</label>
-                    <kendo-dropdownlist
-                      [data]="aggregationOptions"
-                      [valuePrimitive]="true"
-                      [(ngModel)]="stat.aggregation">
+                      [(ngModel)]="stat.sourceType">
                     </kendo-dropdownlist>
                   </div>
                 </div>
 
+                @if (stat.sourceType !== 'persistentQuery') {
+                  <div class="form-row">
+                    <div class="form-field flex-2">
+                      <label>CK Type <span class="required">*</span></label>
+                      <kendo-dropdownlist
+                        [data]="ckTypeOptions"
+                        textField="label"
+                        valueField="value"
+                        [valuePrimitive]="true"
+                        [(ngModel)]="stat.ckTypeId"
+                        [filterable]="true"
+                        (filterChange)="onCkTypeFilter($event)">
+                      </kendo-dropdownlist>
+                    </div>
+                    <div class="form-field flex-1">
+                      <label>Aggregation</label>
+                      <kendo-dropdownlist
+                        [data]="aggregationOptions"
+                        [valuePrimitive]="true"
+                        [(ngModel)]="stat.aggregation">
+                      </kendo-dropdownlist>
+                    </div>
+                  </div>
+                } @else {
+                  <div class="form-row">
+                    <div class="form-field flex-1">
+                      <mm-persistent-query-cell-editor
+                        [initialSource]="stat.persistentQuerySource"
+                        [selectors]="entitySelectors"
+                        (sourceChange)="stat.persistentQuerySource = $event">
+                      </mm-persistent-query-cell-editor>
+                    </div>
+                  </div>
+                }
+
                 <div class="form-row">
                   <div class="form-field flex-1">
                     <label>Prefix</label>
@@ -19607,6 +20440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 class SummaryCardWidgetComponent {
     entityGQL = inject(GetDashboardEntityDtoGQL);
     dataService = inject(DashboardDataService);
+    queryExecutor = inject(QueryExecutorService);
+    stateService = inject(MeshBoardStateService);
+    variableService = inject(MeshBoardVariableService);
     config;
     _isLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
@@ -19660,6 +20496,9 @@ class SummaryCardWidgetComponent {
         }
     }
     async fetchTileValue(tile, entityCache) {
+        if (tile.persistentQuerySource) {
+            return this.fetchPersistentQueryValue(tile.persistentQuerySource);
+        }
         if (tile.entitySource) {
             const { rtId, ckTypeId, attributePath } = tile.entitySource;
             if (!entityCache.has(rtId)) {
@@ -19681,6 +20520,25 @@ class SummaryCardWidgetComponent {
         }
         return null;
     }
+    async fetchPersistentQueryValue(source) {
+        const result = await firstValueFrom(this.queryExecutor.execute(source.queryFamily, source.queryRtId, {
+            fieldFilter: this.convertFiltersToDto(source.filters),
+            streamDataArgs: this.buildStreamDataArgs(source)
+        }));
+        return extractPersistentQueryCellValue(result, source);
+    }
+    buildStreamDataArgs(source) {
+        const timeArgs = this.stateService.resolveStreamDataTimeArgs(source.ignoreTimeFilter);
+        const rtIds = this.stateService.resolveStreamDataRtIds(source.entitySelectorId);
+        if (!timeArgs && !rtIds) {
+            return undefined;
+        }
+        return { ...timeArgs, rtIds };
+    }
+    convertFiltersToDto(filters) {
+        const variables = this.stateService.getVariables();
+        return this.variableService.convertToFieldFilterDto(filters, variables) ?? undefined;
+    }
     async fetchEntityAttributes(rtId, ckTypeId) {
         const result = await firstValueFrom(this.entityGQL.fetch({
             variables: { rtId, ckTypeId }
@@ -19755,21 +20613,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 class SummaryCardConfigDialogComponent {
     windowRef = inject(WindowRef);
+    stateService = inject(MeshBoardStateService);
     initialColumns;
     initialTiles;
+    entitySelectors = [];
     form = {
         columns: 2,
         tiles: []
     };
     colorOptions = ['default', 'primary', 'success', 'warning', 'error'];
     sizeOptions = ['normal', 'full'];
-    sourceTypeOptions = ['entity', 'aggregation'];
+    sourceTypeOptions = ['entity', 'aggregation', 'persistentQuery'];
     aggregationOptions = ['count', 'sum', 'avg', 'min', 'max'];
     get isValid() {
-        return this.form.tiles.length > 0 && this.form.tiles.every(t => t.label && t.ckTypeId);
+        return this.form.tiles.length > 0 && this.form.tiles.every(t => {
+            if (!t.label)
+                return false;
+            return t.sourceType === 'persistentQuery' ? !!t.persistentQuerySource?.queryRtId : !!t.ckTypeId;
+        });
     }
     ngOnInit() {
         this.form.columns = this.initialColumns ?? 2;
+        this.entitySelectors = this.stateService.getEntitySelectors();
         if (this.initialTiles) {
             this.form.tiles = this.initialTiles.map((t, i) => ({
                 id: t.id || `tile-${i}`,
@@ -19778,12 +20643,13 @@ class SummaryCardConfigDialogComponent {
                 suffix: t.suffix ?? '',
                 color: t.color ?? 'default',
                 size: t.size ?? 'normal',
-                sourceType: t.entitySource ? 'entity' : 'aggregation',
+                sourceType: t.persistentQuerySource ? 'persistentQuery' : t.entitySource ? 'entity' : 'aggregation',
                 rtId: t.entitySource?.rtId ?? '',
                 ckTypeId: t.entitySource?.ckTypeId ?? t.aggregationSource?.ckTypeId ?? '',
                 attributePath: t.entitySource?.attributePath ?? '',
                 aggregation: t.aggregationSource?.aggregation ?? 'count',
-                aggAttribute: t.aggregationSource?.attribute ?? ''
+                aggAttribute: t.aggregationSource?.attribute ?? '',
+                persistentQuerySource: t.persistentQuerySource
             }));
         }
     }
@@ -19810,7 +20676,10 @@ class SummaryCardConfigDialogComponent {
                 color: t.color || undefined,
                 size: t.size || undefined
             };
-            if (t.sourceType === 'entity') {
+            if (t.sourceType === 'persistentQuery') {
+                tile.persistentQuerySource = t.persistentQuerySource;
+            }
+            else if (t.sourceType === 'entity') {
                 tile.entitySource = { rtId: t.rtId, ckTypeId: t.ckTypeId, attributePath: t.attributePath };
             }
             else {
@@ -19871,6 +20740,16 @@ class SummaryCardConfigDialogComponent {
                 <kendo-textbox [(ngModel)]="tile.aggAttribute" placeholder="Attribute (for sum/avg)" style="flex: 1;"></kendo-textbox>
               </div>
             }
+            @if (tile.sourceType === 'persistentQuery') {
+              <div class="tile-row">
+                <mm-persistent-query-cell-editor
+                  style="flex: 1;"
+                  [initialSource]="tile.persistentQuerySource"
+                  [selectors]="entitySelectors"
+                  (sourceChange)="tile.persistentQuerySource = $event">
+                </mm-persistent-query-cell-editor>
+              </div>
+            }
           </div>
         }
         <button kendoButton fillMode="flat" (click)="addTile()">+ Add Tile</button>
@@ -19881,11 +20760,11 @@ class SummaryCardConfigDialogComponent {
         <button kendoButton themeColor="primary" [disabled]="!isValid" (click)="onSave()">Save</button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.form-field{display:flex;flex-direction:column;gap:6px}.form-field label{font-weight:600;font-size:.9rem}h4{margin:8px 0 4px;font-size:.95rem}.tile-config{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;padding:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px}.tile-header{display:flex;justify-content:space-between;align-items:center}.tile-row{display:flex;gap:6px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.config-form{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.form-field{display:flex;flex-direction:column;gap:6px}.form-field label{font-weight:600;font-size:.9rem}h4{margin:8px 0 4px;font-size:.95rem}.tile-config{border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;padding:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:6px}.tile-header{display:flex;justify-content:space-between;align-items:center}.tile-row{display:flex;gap:6px;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "component", type: PersistentQueryCellEditorComponent, selector: "mm-persistent-query-cell-editor", inputs: ["initialSource", "selectors"], outputs: ["sourceChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SummaryCardConfigDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-summary-card-config-dialog', standalone: true, imports: [CommonModule, FormsModule, ButtonsModule, InputsModule, DropDownsModule], template: `
+            args: [{ selector: 'mm-summary-card-config-dialog', standalone: true, imports: [CommonModule, FormsModule, ButtonsModule, InputsModule, DropDownsModule, PersistentQueryCellEditorComponent], template: `
     <div class="config-container">
       <div class="config-form">
         <div class="form-field">
@@ -19924,6 +20803,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 <kendo-textbox [(ngModel)]="tile.aggAttribute" placeholder="Attribute (for sum/avg)" style="flex: 1;"></kendo-textbox>
               </div>
             }
+            @if (tile.sourceType === 'persistentQuery') {
+              <div class="tile-row">
+                <mm-persistent-query-cell-editor
+                  style="flex: 1;"
+                  [initialSource]="tile.persistentQuerySource"
+                  [selectors]="entitySelectors"
+                  (sourceChange)="tile.persistentQuerySource = $event">
+                </mm-persistent-query-cell-editor>
+              </div>
+            }
           </div>
         }
         <button kendoButton fillMode="flat" (click)="addTile()">+ Add Tile</button>
@@ -20219,6 +21108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
 
 class AlertListWidgetComponent {
     getEntitiesByCkTypeGQL = inject(GetEntitiesByCkTypeDtoGQL);
+    stateService = inject(MeshBoardStateService);
     config;
     _isLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_isLoading" }] : /* istanbul ignore next */ []));
@@ -20251,13 +21141,9 @@ class AlertListWidgetComponent {
         return getAlertSeverityIcon(level);
     }
     formatTime(timestamp) {
-        try {
-            const date = new Date(timestamp);
-            return date.toLocaleString('de-AT', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' });
-        }
-        catch {
-            return '';
-        }
+        return formatInstant(timestamp, this.stateService.timeZoneMode(), {
+            day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
+        }) ?? '';
     }
     async loadData() {
         this._isLoading.set(true);
@@ -20831,7 +21717,7 @@ class ProcessDataService {
     getProcessDiagramsGQL = inject(GetProcessDiagramsDtoGQL);
     createProcessDiagramGQL = inject(CreateProcessDiagramDtoGQL);
     updateProcessDiagramGQL = inject(UpdateProcessDiagramDtoGQL);
-    executeRuntimeQueryGQL = inject(ExecuteRuntimeQueryDtoGQL);
+    queryExecutor = inject(QueryExecutorService);
     /**
      * Loads a list of available process diagrams from the backend
      *
@@ -21145,10 +22031,20 @@ class ProcessDataService {
         if (!queryRtId) {
             throw new Error('Persistent query binding requires queryRtId');
         }
-        // TODO: Implement persistent query execution
-        // For now, return undefined
-        console.warn('Persistent query data source not yet implemented');
-        return undefined;
+        // Execute via the unified executor (family resolved lazily). The active time
+        // filter is applied by default for stream-data queries; runtime queries
+        // ignore it. The element binding has no asset-scope, so no rtIds override.
+        const result = await firstValueFrom(this.queryExecutor.execute(undefined, queryRtId, {
+            first: 1,
+            streamDataArgs: this.stateService.resolveStreamDataTimeArgs()
+        }));
+        // Extract the bound column from the first row.
+        const firstRow = result.rows[0];
+        if (!firstRow) {
+            return undefined;
+        }
+        const cell = firstRow.cells.find(c => c.attributePath === binding.attributePath);
+        return cell?.value;
     }
     /**
      * Resolves variable references in a string
@@ -21327,60 +22223,67 @@ class ProcessDataService {
      * Loads data from a persistent query binding
      */
     async loadBoundQueryData(config) {
-        const { bindingQueryRtId, bindingFilters } = config;
+        const { bindingQueryRtId, bindingFilters, bindingQueryFamily } = config;
         if (!bindingQueryRtId) {
             throw new Error('Persistent query binding requires a Query rtId');
         }
         // Convert widget filters to GraphQL format with variable resolution
         const fieldFilters = this.convertFiltersToDto(bindingFilters);
-        // Execute the query
-        const result = await firstValueFrom(this.executeRuntimeQueryGQL.fetch({
-            variables: {
-                rtId: bindingQueryRtId,
-                first: 1000, // Reasonable limit for process diagram data
-                fieldFilter: fieldFilters
-            }
+        // Execute via the unified executor — it routes runtime vs stream-data from
+        // the persisted family (or a one-time lookup when absent). Stream-data
+        // queries additionally consume the time-filter / asset-scope overrides built
+        // below; runtime queries ignore `streamDataArgs`.
+        const result = await firstValueFrom(this.queryExecutor.execute(bindingQueryFamily, bindingQueryRtId, {
+            first: 1000, // Reasonable limit for process diagram data
+            fieldFilter: fieldFilters,
+            streamDataArgs: this.buildBindingStreamDataArgs(config)
         }));
-        // Parse the query result
-        const queryData = result.data?.runtime?.runtimeQuery?.items?.[0];
-        if (!queryData) {
-            throw new Error(`Query not found or returned no data: ${bindingQueryRtId}`);
-        }
-        // Map the result to our format
-        const queryResult = this.mapQueryResult(queryData);
         return {
             type: 'query',
-            queryResult,
+            queryResult: this.mapExecutionResult(result),
             loadedAt: new Date()
         };
     }
     /**
-     * Maps GraphQL query result to QueryResultData format
+     * Builds the stream-data overrides (time range + asset scope) for the bound
+     * persistent query from the active MeshBoard time filter and entity selector.
+     * Returns `undefined` when neither override applies (e.g. runtime query, no
+     * time filter, opted out). Runtime queries ignore the result.
      */
-    mapQueryResult(queryData) {
-        const columns = queryData.columns.map(col => ({
+    buildBindingStreamDataArgs(config) {
+        const timeArgs = this.stateService.resolveStreamDataTimeArgs(config.bindingIgnoreTimeFilter);
+        const rtIds = this.stateService.resolveStreamDataRtIds(config.bindingEntitySelectorId);
+        if (!timeArgs && !rtIds) {
+            return undefined;
+        }
+        return { ...timeArgs, rtIds };
+    }
+    /**
+     * Maps a unified {@link QueryExecutionResult} (runtime or stream-data) to the
+     * Process Widget's {@link QueryResultData} shape used by column mappings.
+     */
+    mapExecutionResult(result) {
+        const columns = result.columns.map(col => ({
             attributePath: col.attributePath ?? '',
             attributeValueType: col.attributeValueType ?? undefined
         }));
-        const rows = (queryData.rows?.items ?? []).map(row => {
+        const rows = result.rows.map(row => {
             const cells = new Map();
-            for (const cell of row?.cells?.items ?? []) {
-                if (cell?.attributePath) {
+            for (const cell of row.cells) {
+                if (cell.attributePath) {
                     cells.set(cell.attributePath, cell.value);
                 }
             }
-            // Handle different row types
-            const typedRow = row;
             return {
-                rtId: typedRow.rtId ?? undefined,
-                ckTypeId: typedRow.ckTypeId ?? undefined,
+                rtId: row.rtId ?? undefined,
+                ckTypeId: row.ckTypeId ?? undefined,
                 cells
             };
         });
         return {
             columns,
             rows,
-            totalCount: queryData.rows?.totalCount ?? 0
+            totalCount: result.totalCount
         };
     }
     /**
@@ -25121,6 +26024,9 @@ class ProcessConfigDialogComponent {
     initialBindingRtId;
     initialBindingQueryRtId;
     initialBindingQueryName;
+    initialBindingQueryFamily;
+    initialBindingIgnoreTimeFilter;
+    initialBindingEntitySelectorId;
     initialBindingFilters;
     initialPropertyMappings;
     // State - Diagram
@@ -25137,6 +26043,14 @@ class ProcessConfigDialogComponent {
     // State - Persistent Query Binding
     persistentQueries = [];
     selectedPersistentQuery = null;
+    // Stream-data binding state (only relevant when the picked query is a stream-data query)
+    bindingIgnoreTimeFilter = false;
+    bindingEntitySelectorId;
+    entitySelectors = [];
+    /** Family of the picked persistent query, derived from its own CK type. */
+    get selectedQueryFamily() {
+        return queryFamily(this.selectedPersistentQuery?.ckTypeId) ?? undefined;
+    }
     isLoadingQueries = false;
     // State - Filters
     filters = [];
@@ -25196,6 +26110,10 @@ class ProcessConfigDialogComponent {
         this.form.initialZoom = this.initialInitialZoom ?? 1;
         // Initialize data binding mode
         this.dataBindingMode = this.initialDataBindingMode ?? 'none';
+        // Initialize stream-data binding state + available entity selectors (for scope picker)
+        this.bindingIgnoreTimeFilter = this.initialBindingIgnoreTimeFilter ?? false;
+        this.bindingEntitySelectorId = this.initialBindingEntitySelectorId;
+        this.entitySelectors = this.stateService.getEntitySelectors();
         // Initialize filter variables from MeshBoard
         this.initFilterVariables();
         // Load data in parallel
@@ -25425,6 +26343,12 @@ class ProcessConfigDialogComponent {
     }
     onQuerySelected(query) {
         this.selectedPersistentQuery = query;
+        // Reset stream-data-only binding state when the picked query is not a
+        // stream-data query (the toggle/scope picker are hidden in that case).
+        if (this.selectedQueryFamily !== 'streamData') {
+            this.bindingIgnoreTimeFilter = false;
+            this.bindingEntitySelectorId = undefined;
+        }
         // Load attributes if query has associated CK type
         if (query?.queryCkTypeId) {
             this.loadAttributesForCkType(query.queryCkTypeId);
@@ -25447,6 +26371,7 @@ class ProcessConfigDialogComponent {
                 rtId: item.rtId,
                 name: item.name,
                 description: item.description,
+                ckTypeId: item.ckTypeId,
                 queryCkTypeId: item.queryCkTypeId
             }));
         }
@@ -25518,6 +26443,17 @@ class ProcessConfigDialogComponent {
         if (this.dataBindingMode === 'persistentQuery' && this.selectedPersistentQuery) {
             result.bindingQueryRtId = this.selectedPersistentQuery.rtId;
             result.bindingQueryName = this.selectedPersistentQuery.name;
+            const family = this.selectedQueryFamily;
+            result.bindingQueryFamily = family;
+            // Stream-data-only overrides — persisted only when they apply.
+            if (family === 'streamData') {
+                if (this.bindingIgnoreTimeFilter) {
+                    result.bindingIgnoreTimeFilter = true;
+                }
+                if (this.bindingEntitySelectorId) {
+                    result.bindingEntitySelectorId = this.bindingEntitySelectorId;
+                }
+            }
         }
         // Filters
         if (this.filters.length > 0 && this.dataBindingMode !== 'none') {
@@ -25540,7 +26476,7 @@ class ProcessConfigDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ProcessConfigDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ProcessConfigDialogComponent, isStandalone: true, selector: "mm-process-config-dialog", inputs: { initialProcessDiagramRtId: "initialProcessDiagramRtId", initialFitToBounds: "initialFitToBounds", initialAllowZoom: "initialAllowZoom", initialAllowPan: "initialAllowPan", initialShowToolbar: "initialShowToolbar", initialInitialZoom: "initialInitialZoom", initialDataBindingMode: "initialDataBindingMode", initialBindingCkTypeId: "initialBindingCkTypeId", initialBindingRtId: "initialBindingRtId", initialBindingQueryRtId: "initialBindingQueryRtId", initialBindingQueryName: "initialBindingQueryName", initialBindingFilters: "initialBindingFilters", initialPropertyMappings: "initialPropertyMappings" }, providers: [ProcessDataService], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ProcessConfigDialogComponent, isStandalone: true, selector: "mm-process-config-dialog", inputs: { initialProcessDiagramRtId: "initialProcessDiagramRtId", initialFitToBounds: "initialFitToBounds", initialAllowZoom: "initialAllowZoom", initialAllowPan: "initialAllowPan", initialShowToolbar: "initialShowToolbar", initialInitialZoom: "initialInitialZoom", initialDataBindingMode: "initialDataBindingMode", initialBindingCkTypeId: "initialBindingCkTypeId", initialBindingRtId: "initialBindingRtId", initialBindingQueryRtId: "initialBindingQueryRtId", initialBindingQueryName: "initialBindingQueryName", initialBindingQueryFamily: "initialBindingQueryFamily", initialBindingIgnoreTimeFilter: "initialBindingIgnoreTimeFilter", initialBindingEntitySelectorId: "initialBindingEntitySelectorId", initialBindingFilters: "initialBindingFilters", initialPropertyMappings: "initialPropertyMappings" }, providers: [ProcessDataService], ngImport: i0, template: `
     <div class="config-container">
 
       <div class="config-form">
@@ -25706,6 +26642,17 @@ class ProcessConfigDialogComponent {
                       <p class="field-hint warning">No queries found.</p>
                     }
                   </div>
+
+                  <!-- Stream-data-only options (hidden for runtime queries) -->
+                  <mm-sd-time-filter-toggle
+                    [family]="selectedQueryFamily"
+                    [(ignoreTimeFilter)]="bindingIgnoreTimeFilter">
+                  </mm-sd-time-filter-toggle>
+                  <mm-entity-selector-scope-picker
+                    [family]="selectedQueryFamily"
+                    [selectors]="entitySelectors"
+                    [(entitySelectorId)]="bindingEntitySelectorId">
+                  </mm-entity-selector-scope-picker>
                 }
 
                 <!-- Filters Section -->
@@ -25860,7 +26807,7 @@ class ProcessConfigDialogComponent {
         </button>
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{flex:1;overflow-y:auto;padding:16px}.tab-content{padding:16px;min-height:200px;position:relative}.tab-content.loading{pointer-events:none}.section-hint{margin:0 0 16px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.empty-hint{text-align:center;padding:24px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-field:last-child{margin-bottom:0}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.field-hint.warning{color:var(--kendo-color-warning, #ffc107)}.form-row{display:flex;gap:24px;margin-bottom:12px}.form-row:last-child{margin-bottom:0}.mode-toggle{display:flex;gap:8px}.checkbox-field{flex-direction:row;align-items:flex-start}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.checkbox-field .field-hint{margin-top:4px;margin-left:28px}.preview-section{margin-top:16px;padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.preview-info{display:flex;flex-direction:column;gap:6px}.preview-item{display:flex;justify-content:space-between;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border-radius:4px}.preview-label{font-weight:500;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.preview-value{font-weight:600;font-size:.85rem;color:var(--kendo-color-on-app-surface, #212529)}.diagram-item{display:flex;justify-content:space-between;gap:16px}.diagram-name{font-weight:500}.diagram-size{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.property-mappings-table{display:flex;flex-direction:column;gap:6px}.mapping-header{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:4px;font-weight:600;font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);text-transform:uppercase}.mapping-row{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;align-items:center}.col-property{font-weight:500;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-type.type-badge{font-size:.65rem;padding:2px 4px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:10px;text-align:center;text-transform:uppercase;color:var(--kendo-color-subtle, #6c757d)}.col-expression kendo-textbox{font-family:Consolas,Monaco,monospace;font-size:.8rem}.expression-help{margin-top:12px}.expression-help code{background:var(--kendo-color-surface-alt, #f8f9fa);padding:1px 4px;border-radius:3px;font-size:.75rem}.loading-hint{font-style:italic;color:var(--kendo-color-subtle, #6c757d);padding:8px;text-align:center}:host ::ng-deep kendo-tabstrip{border:none}:host ::ng-deep .k-tabstrip-items-wrapper{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}:host ::ng-deep .k-tabstrip-content{border:none;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+  `, isInline: true, styles: [":host{display:block;height:100%}.config-container{display:flex;flex-direction:column;height:100%}.action-bar{display:flex;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--kendo-color-border, #dee2e6)}.config-form{flex:1;overflow-y:auto;padding:16px}.tab-content{padding:16px;min-height:200px;position:relative}.tab-content.loading{pointer-events:none}.section-hint{margin:0 0 16px;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.empty-hint{text-align:center;padding:24px;color:var(--kendo-color-subtle, #6c757d);font-style:italic}.form-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-field:last-child{margin-bottom:0}.form-field.disabled{opacity:.6}.form-field label{font-weight:600;font-size:.9rem;color:var(--kendo-color-on-app-surface, #212529)}.required{color:var(--kendo-color-error, #dc3545)}.field-hint{margin:0;font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.field-hint.warning{color:var(--kendo-color-warning, #ffc107)}.form-row{display:flex;gap:24px;margin-bottom:12px}.form-row:last-child{margin-bottom:0}.mode-toggle{display:flex;gap:8px}.checkbox-field{flex-direction:row;align-items:flex-start}.checkbox-field label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400}.checkbox-field .field-hint{margin-top:4px;margin-left:28px}.preview-section{margin-top:16px;padding:12px;background:var(--kendo-color-surface-alt, #f8f9fa);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px}.preview-info{display:flex;flex-direction:column;gap:6px}.preview-item{display:flex;justify-content:space-between;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border-radius:4px}.preview-label{font-weight:500;font-size:.85rem;color:var(--kendo-color-subtle, #6c757d)}.preview-value{font-weight:600;font-size:.85rem;color:var(--kendo-color-on-app-surface, #212529)}.diagram-item{display:flex;justify-content:space-between;gap:16px}.diagram-name{font-weight:500}.diagram-size{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.query-item{display:flex;flex-direction:column;gap:2px}.query-name{font-weight:500}.query-description{font-size:.8rem;color:var(--kendo-color-subtle, #6c757d)}.property-mappings-table{display:flex;flex-direction:column;gap:6px}.mapping-header{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:4px;font-weight:600;font-size:.7rem;color:var(--kendo-color-subtle, #6c757d);text-transform:uppercase}.mapping-row{display:grid;grid-template-columns:minmax(80px,1fr) 55px 85px minmax(80px,1fr) minmax(90px,1.2fr);gap:6px;padding:6px 10px;background:var(--kendo-color-surface, #ffffff);border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;align-items:center}.col-property{font-weight:500;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-type.type-badge{font-size:.65rem;padding:2px 4px;background:var(--kendo-color-surface-alt, #f8f9fa);border-radius:10px;text-align:center;text-transform:uppercase;color:var(--kendo-color-subtle, #6c757d)}.col-expression kendo-textbox{font-family:Consolas,Monaco,monospace;font-size:.8rem}.expression-help{margin-top:12px}.expression-help code{background:var(--kendo-color-surface-alt, #f8f9fa);padding:1px 4px;border-radius:3px;font-size:.75rem}.loading-hint{font-style:italic;color:var(--kendo-color-subtle, #6c757d);padding:8px;text-align:center}:host ::ng-deep kendo-tabstrip{border:none}:host ::ng-deep .k-tabstrip-items-wrapper{border-bottom:1px solid var(--kendo-color-border, #dee2e6)}:host ::ng-deep .k-tabstrip-content{border:none;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "ngmodule", type: DropDownsModule }, { kind: "directive", type: i4.ItemTemplateDirective, selector: "[kendoDropDownListItemTemplate],[kendoComboBoxItemTemplate],[kendoAutoCompleteItemTemplate],[kendoMultiSelectItemTemplate]" }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: CkTypeSelectorInputComponent, selector: "mm-ck-type-selector-input", inputs: ["placeholder", "minSearchLength", "maxResults", "debounceMs", "ckModelIds", "allowAbstract", "dialogTitle", "advancedSearchLabel", "derivedFromRtCkTypeId", "messages", "dialogMessages", "disabled", "required"], outputs: ["ckTypeSelected", "ckTypeCleared"] }, { kind: "component", type: EntitySelectInputComponent, selector: "mm-entity-select-input", inputs: ["dataSource", "placeholder", "minSearchLength", "maxResults", "debounceMs", "prefix", "initialDisplayValue", "dialogDataSource", "dialogTitle", "multiSelect", "advancedSearchLabel", "dialogMessages", "messages", "disabled", "required"], outputs: ["entitySelected", "entityCleared", "entitiesSelected"] }, { kind: "component", type: FieldFilterEditorComponent, selector: "mm-field-filter-editor", inputs: ["availableAttributes", "ckTypeId", "hideNavigationProperties", "attributePaths", "enableVariables", "availableVariables", "filters"], outputs: ["filtersChange"] }, { kind: "component", type: LoadingOverlayComponent, selector: "mm-loading-overlay", inputs: ["loading"] }, { kind: "component", type: SdTimeFilterToggleComponent, selector: "mm-sd-time-filter-toggle", inputs: ["family", "ignoreTimeFilter"], outputs: ["ignoreTimeFilterChange"] }, { kind: "component", type: EntitySelectorScopePickerComponent, selector: "mm-entity-selector-scope-picker", inputs: ["family", "entitySelectorId", "selectors"], outputs: ["entitySelectorIdChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ProcessConfigDialogComponent, decorators: [{
             type: Component,
@@ -25874,7 +26821,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         CkTypeSelectorInputComponent,
                         EntitySelectInputComponent,
                         FieldFilterEditorComponent,
-                        LoadingOverlayComponent
+                        LoadingOverlayComponent,
+                        SdTimeFilterToggleComponent,
+                        EntitySelectorScopePickerComponent
                     ], providers: [ProcessDataService], template: `
     <div class="config-container">
 
@@ -26041,6 +26990,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                       <p class="field-hint warning">No queries found.</p>
                     }
                   </div>
+
+                  <!-- Stream-data-only options (hidden for runtime queries) -->
+                  <mm-sd-time-filter-toggle
+                    [family]="selectedQueryFamily"
+                    [(ignoreTimeFilter)]="bindingIgnoreTimeFilter">
+                  </mm-sd-time-filter-toggle>
+                  <mm-entity-selector-scope-picker
+                    [family]="selectedQueryFamily"
+                    [selectors]="entitySelectors"
+                    [(entitySelectorId)]="bindingEntitySelectorId">
+                  </mm-entity-selector-scope-picker>
                 }
 
                 <!-- Filters Section -->
@@ -26218,6 +27178,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                 type: Input
             }], initialBindingQueryName: [{
                 type: Input
+            }], initialBindingQueryFamily: [{
+                type: Input
+            }], initialBindingIgnoreTimeFilter: [{
+                type: Input
+            }], initialBindingEntitySelectorId: [{
+                type: Input
             }], initialBindingFilters: [{
                 type: Input
             }], initialPropertyMappings: [{
@@ -26283,6 +27249,9 @@ function registerProcessWidget(registry) {
             initialBindingRtId: widget.bindingRtId,
             initialBindingQueryRtId: widget.bindingQueryRtId,
             initialBindingQueryName: widget.bindingQueryName,
+            initialBindingQueryFamily: widget.bindingQueryFamily,
+            initialBindingIgnoreTimeFilter: widget.bindingIgnoreTimeFilter,
+            initialBindingEntitySelectorId: widget.bindingEntitySelectorId,
             initialBindingFilters: widget.bindingFilters,
             initialPropertyMappings: widget.propertyMappings
         }),
@@ -26303,6 +27272,9 @@ function registerProcessWidget(registry) {
             bindingRtId: result.bindingRtId,
             bindingQueryRtId: result.bindingQueryRtId,
             bindingQueryName: result.bindingQueryName,
+            bindingQueryFamily: result.bindingQueryFamily,
+            bindingIgnoreTimeFilter: result.bindingIgnoreTimeFilter,
+            bindingEntitySelectorId: result.bindingEntitySelectorId,
             bindingFilters: result.bindingFilters,
             propertyMappings: result.propertyMappings
         }),
@@ -26341,6 +27313,10 @@ function registerProcessWidget(registry) {
                 bindingRtId: widget.bindingRtId,
                 bindingQueryRtId: widget.bindingQueryRtId,
                 bindingQueryName: widget.bindingQueryName,
+                // Stream-data binding — written only when set.
+                ...(widget.bindingQueryFamily && { bindingQueryFamily: widget.bindingQueryFamily }),
+                ...(widget.bindingIgnoreTimeFilter && { bindingIgnoreTimeFilter: true }),
+                ...(widget.bindingEntitySelectorId && { bindingEntitySelectorId: widget.bindingEntitySelectorId }),
                 bindingFilters: widget.bindingFilters,
                 propertyMappings: widget.propertyMappings
             }
@@ -26371,6 +27347,9 @@ function registerProcessWidget(registry) {
                 bindingRtId: config['bindingRtId'],
                 bindingQueryRtId: config['bindingQueryRtId'],
                 bindingQueryName: config['bindingQueryName'],
+                bindingQueryFamily: config['bindingQueryFamily'],
+                bindingIgnoreTimeFilter: config['bindingIgnoreTimeFilter'],
+                bindingEntitySelectorId: config['bindingEntitySelectorId'],
                 bindingFilters: config['bindingFilters'],
                 propertyMappings: config['propertyMappings']
             };
@@ -26498,14 +27477,25 @@ function registerDefaultWidgets(registry) {
         configDialogTitle: 'Entity Configuration',
         defaultSize: { colSpan: 2, rowSpan: 2 },
         supportedDataSources: ['runtimeEntity'],
-        getInitialConfig: (widget) => ({
-            initialCkTypeId: getDataSourceInfo(widget).ckTypeId,
-            initialRtId: getDataSourceInfo(widget).rtId,
-            initialHideEmptyAttributes: widget.hideEmptyAttributes ?? false
-        }),
+        getInitialConfig: (widget) => {
+            const ds = widget.dataSource;
+            const isRuntime = ds.type === 'runtimeEntity';
+            return {
+                initialCkTypeId: isRuntime ? ds.ckTypeId : undefined,
+                initialRtId: isRuntime ? ds.rtId : undefined,
+                initialEntitySelectorId: isRuntime ? ds.entitySelectorId : undefined,
+                initialHideEmptyAttributes: widget.hideEmptyAttributes ?? false
+            };
+        },
         applyConfigResult: (widget, result) => ({
             ...widget,
-            dataSource: createDataSource(result, true),
+            dataSource: {
+                type: 'runtimeEntity',
+                ckTypeId: result.ckTypeId || undefined,
+                rtId: result.rtId || undefined,
+                entitySelectorId: result.entitySelectorId || undefined,
+                includeAssociations: true
+            },
             hideEmptyAttributes: result.hideEmptyAttributes
         }),
         // SOLID: Factory function
@@ -26527,7 +27517,8 @@ function registerDefaultWidgets(registry) {
                 showHeader: widget.showHeader,
                 showAttributes: widget.showAttributes,
                 attributeFilter: widget.attributeFilter,
-                hideEmptyAttributes: widget.hideEmptyAttributes
+                hideEmptyAttributes: widget.hideEmptyAttributes,
+                entitySelectorId: widget.dataSource.type === 'runtimeEntity' ? widget.dataSource.entitySelectorId : undefined
             }
         }),
         // SOLID: Deserialization from persistence
@@ -26540,7 +27531,8 @@ function registerDefaultWidgets(registry) {
                 dataSource: {
                     type: 'runtimeEntity',
                     ckTypeId: data.dataSourceCkTypeId ?? undefined,
-                    rtId: data.dataSourceRtId ?? undefined
+                    rtId: data.dataSourceRtId ?? undefined,
+                    entitySelectorId: config['entitySelectorId'] || undefined
                 },
                 showHeader: config['showHeader'] ?? true,
                 showAttributes: config['showAttributes'] ?? true,
@@ -29144,7 +30136,8 @@ class MeshBoardSettingsResult {
     rtWellKnownName;
     entitySelectors;
     autoRefreshSeconds;
-    constructor(name, description, columns, rowHeight, gap, variables, timeFilter, rtWellKnownName, entitySelectors, autoRefreshSeconds) {
+    timeZoneMode;
+    constructor(name, description, columns, rowHeight, gap, variables, timeFilter, rtWellKnownName, entitySelectors, autoRefreshSeconds, timeZoneMode) {
         this.name = name;
         this.description = description;
         this.columns = columns;
@@ -29155,6 +30148,7 @@ class MeshBoardSettingsResult {
         this.rtWellKnownName = rtWellKnownName;
         this.entitySelectors = entitySelectors;
         this.autoRefreshSeconds = autoRefreshSeconds;
+        this.timeZoneMode = timeZoneMode;
     }
 }
 /**
@@ -29182,6 +30176,11 @@ class MeshBoardSettingsDialogComponent {
     timeFilterEnabled = false;
     defaultSelection;
     initialDefaultSelection;
+    /**
+     * Timezone basis for time-filter boundaries and datetime display across all
+     * widgets. Defaults to `'local'` (browser timezone).
+     */
+    timeZoneMode = DEFAULT_TIME_ZONE_MODE;
     /** Static and time filter variable names for duplicate detection in entity selector editor */
     get staticVariableNames() {
         return this.variables
@@ -29207,6 +30206,7 @@ class MeshBoardSettingsDialogComponent {
         this.rowHeight = settings.rowHeight;
         this.gap = settings.gap;
         this.autoRefreshSeconds = settings.autoRefreshSeconds ?? 0;
+        this.timeZoneMode = settings.timeZoneMode ?? DEFAULT_TIME_ZONE_MODE;
         this.variables = settings.variables ? [...settings.variables] : [];
         this.entitySelectors = settings.entitySelectors ? settings.entitySelectors.map(es => ({ ...es })) : [];
         this.timeFilterEnabled = settings.timeFilter?.enabled ?? false;
@@ -29248,7 +30248,7 @@ class MeshBoardSettingsDialogComponent {
             enabled: this.timeFilterEnabled,
             defaultSelection: this.timeFilterEnabled ? this.defaultSelection : undefined
         };
-        const result = new MeshBoardSettingsResult(this.name.trim(), this.description.trim(), this.columns, this.rowHeight, this.gap, this.variables, timeFilter, this.rtWellKnownName.trim() || undefined, this.entitySelectors.length > 0 ? this.entitySelectors : undefined, this.autoRefreshSeconds > 0 ? this.autoRefreshSeconds : undefined);
+        const result = new MeshBoardSettingsResult(this.name.trim(), this.description.trim(), this.columns, this.rowHeight, this.gap, this.variables, timeFilter, this.rtWellKnownName.trim() || undefined, this.entitySelectors.length > 0 ? this.entitySelectors : undefined, this.autoRefreshSeconds > 0 ? this.autoRefreshSeconds : undefined, this.timeZoneMode);
         this.windowRef.close(result);
     }
     /**
@@ -29258,7 +30258,7 @@ class MeshBoardSettingsDialogComponent {
         this.windowRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MeshBoardSettingsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: MeshBoardSettingsDialogComponent, isStandalone: true, selector: "mm-meshboard-settings-dialog", ngImport: i0, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "component", type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i3.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i3.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: VariablesEditorComponent, selector: "mm-variables-editor", inputs: ["variables"], outputs: ["variablesChange"] }, { kind: "component", type: EntitySelectorEditorComponent, selector: "mm-entity-selector-editor", inputs: ["entitySelectors", "existingVariableNames"], outputs: ["entitySelectorsChange", "editingStateChange"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: MeshBoardSettingsDialogComponent, isStandalone: true, selector: "mm-meshboard-settings-dialog", ngImport: i0, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <kendo-label text=\"Timezone\"></kendo-label>\n              <div class=\"radio-group\">\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzLocal\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"local\"\n                    id=\"timeZoneModeLocal\"/>\n                  <kendo-label [for]=\"tzLocal\" text=\"Local time (browser)\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzUtc\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"utc\"\n                    id=\"timeZoneModeUtc\"/>\n                  <kendo-label [for]=\"tzUtc\" text=\"UTC\" class=\"radio-label\"></kendo-label>\n                </div>\n              </div>\n              <kendo-formhint>\n                Basis for the time filter and for how all widgets display dates and times. Local time is the default.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper,.meshboard-settings-dialog .settings-form .radio-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .checkbox-wrapper .radio-label,.meshboard-settings-dialog .settings-form .radio-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .radio-wrapper .radio-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .settings-form .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.meshboard-settings-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio]:not([ngNoCva])[formControlName],input[type=radio]:not([ngNoCva])[formControl],input[type=radio]:not([ngNoCva])[ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "component", type: i3.TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: i3.CheckBoxDirective, selector: "input[kendoCheckBox]", inputs: ["size", "rounded"] }, { kind: "directive", type: i3.RadioButtonDirective, selector: "input[kendoRadioButton]", inputs: ["size"] }, { kind: "component", type: i3.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i3.HintComponent, selector: "kendo-formhint", inputs: ["align"] }, { kind: "component", type: i3.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "ngmodule", type: CheckBoxModule }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i4$1.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: FormFieldModule }, { kind: "ngmodule", type: TabStripModule }, { kind: "component", type: i5.TabStripComponent, selector: "kendo-tabstrip", inputs: ["height", "animate", "tabAlignment", "tabPosition", "keepTabContent", "closable", "scrollable", "size", "closeIcon", "closeIconClass", "closeSVGIcon", "showContentArea"], outputs: ["tabSelect", "tabClose", "tabScroll"], exportAs: ["kendoTabStrip"] }, { kind: "component", type: i5.TabStripTabComponent, selector: "kendo-tabstrip-tab", inputs: ["title", "disabled", "cssClass", "cssStyle", "selected", "closable", "closeIcon", "closeIconClass", "closeSVGIcon"], exportAs: ["kendoTabStripTab"] }, { kind: "directive", type: i5.TabContentDirective, selector: "[kendoTabContent]" }, { kind: "component", type: VariablesEditorComponent, selector: "mm-variables-editor", inputs: ["variables"], outputs: ["variablesChange"] }, { kind: "component", type: EntitySelectorEditorComponent, selector: "mm-entity-selector-editor", inputs: ["entitySelectors", "existingVariableNames"], outputs: ["entitySelectorsChange", "editingStateChange"] }, { kind: "component", type: TimeRangePickerComponent, selector: "mm-time-range-picker", inputs: ["config", "labels", "initialSelection"], outputs: ["rangeChange", "rangeChangeISO", "selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: MeshBoardSettingsDialogComponent, decorators: [{
             type: Component,
@@ -29274,7 +30274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         VariablesEditorComponent,
                         EntitySelectorEditorComponent,
                         TimeRangePickerComponent
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"meshboard-settings-dialog\">\n  <kendo-tabstrip [animate]=\"false\">\n    <!-- General Tab -->\n    <kendo-tabstrip-tab [title]=\"'General'\" [selected]=\"true\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <!-- Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"nameInput\" text=\"Name *\"></kendo-label>\n              <kendo-textbox\n                #nameInput\n                [(ngModel)]=\"name\"\n                name=\"name\"\n                placeholder=\"Enter MeshBoard name\"\n                required>\n              </kendo-textbox>\n              @if (name.trim().length === 0) {\n                <kendo-formerror>Name is required</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Description Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"descriptionInput\" text=\"Description\"></kendo-label>\n              <kendo-textarea\n                #descriptionInput\n                [(ngModel)]=\"description\"\n                name=\"description\"\n                placeholder=\"Enter MeshBoard description (optional)\"\n                [rows]=\"3\">\n              </kendo-textarea>\n            </kendo-formfield>\n\n            <!-- Well-Known Name Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"wellKnownNameInput\" text=\"Well-Known Name\"></kendo-label>\n              <kendo-textbox\n                #wellKnownNameInput\n                [(ngModel)]=\"rtWellKnownName\"\n                name=\"rtWellKnownName\"\n                placeholder=\"e.g., cockpit, dashboard-main\">\n              </kendo-textbox>\n              <kendo-formhint>Unique identifier for routing. Use lowercase with hyphens (e.g., 'cockpit', 'sales-dashboard').</kendo-formhint>\n            </kendo-formfield>\n\n            <!-- Layout Settings -->\n            <div class=\"section-title\">Layout Settings</div>\n\n            <!-- Columns Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"columnsInput\" text=\"Columns *\"></kendo-label>\n              <kendo-numerictextbox\n                #columnsInput\n                [(ngModel)]=\"columns\"\n                name=\"columns\"\n                [min]=\"1\"\n                [max]=\"12\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Number of columns in the grid (1-12)</kendo-formhint>\n              @if (columns < 1 || columns > 12) {\n                <kendo-formerror>Columns must be between 1 and 12</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Row Height Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"rowHeightInput\" text=\"Row Height *\"></kendo-label>\n              <kendo-numerictextbox\n                #rowHeightInput\n                [(ngModel)]=\"rowHeight\"\n                name=\"rowHeight\"\n                [min]=\"100\"\n                [max]=\"1000\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Height of each row in pixels (100-1000)</kendo-formhint>\n              @if (rowHeight < 100 || rowHeight > 1000) {\n                <kendo-formerror>Row height must be between 100 and 1000</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Gap Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"gapInput\" text=\"Gap *\"></kendo-label>\n              <kendo-numerictextbox\n                #gapInput\n                [(ngModel)]=\"gap\"\n                name=\"gap\"\n                [min]=\"0\"\n                [max]=\"100\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\"\n                required>\n              </kendo-numerictextbox>\n              <kendo-formhint>Space between widgets in pixels (0-100)</kendo-formhint>\n              @if (gap < 0 || gap > 100) {\n                <kendo-formerror>Gap must be between 0 and 100</kendo-formerror>\n              }\n            </kendo-formfield>\n\n            <!-- Auto-Refresh Field -->\n            <kendo-formfield>\n              <kendo-label [for]=\"autoRefreshInput\" text=\"Auto-refresh\"></kendo-label>\n              <kendo-numerictextbox\n                #autoRefreshInput\n                [(ngModel)]=\"autoRefreshSeconds\"\n                name=\"autoRefreshSeconds\"\n                [min]=\"0\"\n                [max]=\"3600\"\n                [decimals]=\"0\"\n                [format]=\"'n0'\"\n                [spinners]=\"true\">\n              </kendo-numerictextbox>\n              <kendo-formhint>Refresh interval in seconds (0 = disabled, max 3600). Pauses while the tab is hidden.</kendo-formhint>\n              @if (autoRefreshSeconds < 0 || autoRefreshSeconds > 3600) {\n                <kendo-formerror>Auto-refresh must be between 0 and 3600 seconds</kendo-formerror>\n              }\n            </kendo-formfield>\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Variables Tab -->\n    <kendo-tabstrip-tab [title]=\"'Variables'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-variables-editor\n            [(variables)]=\"variables\">\n          </mm-variables-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Time Filter Tab -->\n    <kendo-tabstrip-tab [title]=\"'Time Filter'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <form class=\"settings-form\">\n            <kendo-formfield>\n              <kendo-label text=\"Timezone\"></kendo-label>\n              <div class=\"radio-group\">\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzLocal\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"local\"\n                    id=\"timeZoneModeLocal\"/>\n                  <kendo-label [for]=\"tzLocal\" text=\"Local time (browser)\" class=\"radio-label\"></kendo-label>\n                </div>\n                <div class=\"radio-wrapper\">\n                  <input\n                    type=\"radio\"\n                    kendoRadioButton\n                    #tzUtc\n                    [(ngModel)]=\"timeZoneMode\"\n                    name=\"timeZoneMode\"\n                    value=\"utc\"\n                    id=\"timeZoneModeUtc\"/>\n                  <kendo-label [for]=\"tzUtc\" text=\"UTC\" class=\"radio-label\"></kendo-label>\n                </div>\n              </div>\n              <kendo-formhint>\n                Basis for the time filter and for how all widgets display dates and times. Local time is the default.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            <kendo-formfield>\n              <div class=\"checkbox-wrapper\">\n                <input\n                  type=\"checkbox\"\n                  kendoCheckBox\n                  #timeFilterCheckbox\n                  [(ngModel)]=\"timeFilterEnabled\"\n                  name=\"timeFilterEnabled\"\n                  id=\"timeFilterEnabled\"/>\n                <kendo-label\n                  [for]=\"timeFilterCheckbox\"\n                  text=\"Enable Time Filter\"\n                  class=\"checkbox-label\">\n                </kendo-label>\n              </div>\n              <kendo-formhint>\n                Shows a time range picker in the toolbar. Sets $timeRangeFrom and $timeRangeTo variables.\n              </kendo-formhint>\n            </kendo-formfield>\n\n            @if (timeFilterEnabled) {\n              <kendo-formfield>\n                <kendo-label text=\"Default Selection\"></kendo-label>\n                <mm-time-range-picker\n                  [initialSelection]=\"initialDefaultSelection\"\n                  (selectionChange)=\"onDefaultSelectionChange($event)\">\n                </mm-time-range-picker>\n                <kendo-formhint>Initial time filter shown when no URL parameters are set. Note: User-selected filters override this default. Use the reset button in the toolbar to revert to the default.</kendo-formhint>\n              </kendo-formfield>\n            }\n          </form>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n\n    <!-- Entity Selectors Tab -->\n    <kendo-tabstrip-tab [title]=\"'Entity Selectors'\">\n      <ng-template kendoTabContent>\n        <div class=\"tab-content\">\n          <mm-entity-selector-editor\n            [(entitySelectors)]=\"entitySelectors\"\n            [existingVariableNames]=\"staticVariableNames\"\n            (editingStateChange)=\"entitySelectorEditing = $event\">\n          </mm-entity-selector-editor>\n        </div>\n      </ng-template>\n    </kendo-tabstrip-tab>\n  </kendo-tabstrip>\n\n  <!-- Dialog Actions -->\n  @if (!entitySelectorEditing) {\n    <div class=\"dialog-actions mm-dialog-actions\">\n      <button kendoButton (click)=\"cancel()\" fillMode=\"flat\">\n        Cancel\n      </button>\n      <button\n        kendoButton\n        (click)=\"save()\"\n        [disabled]=\"!isValid\"\n        themeColor=\"primary\">\n        Save\n      </button>\n    </div>\n  }\n</div>\n", styles: [".meshboard-settings-dialog{display:flex;flex-direction:column;height:100%;overflow:hidden}.meshboard-settings-dialog kendo-tabstrip{flex:1;min-height:0;display:flex;flex-direction:column}.meshboard-settings-dialog kendo-tabstrip ::ng-deep .k-tabstrip-content{flex:1;min-height:0;overflow:hidden}.meshboard-settings-dialog .tab-content{height:100%;overflow-y:auto;padding:1.5rem}.meshboard-settings-dialog .settings-form{display:flex;flex-direction:column;gap:1.25rem}.meshboard-settings-dialog .settings-form kendo-formfield{display:flex;flex-direction:column;gap:.5rem}.meshboard-settings-dialog .settings-form kendo-formfield kendo-label{font-weight:500;color:var(--kendo-color-on-app-surface, #424242)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-textbox,.meshboard-settings-dialog .settings-form kendo-formfield kendo-textarea,.meshboard-settings-dialog .settings-form kendo-formfield kendo-numerictextbox{width:100%}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formhint{font-size:.75rem;color:var(--kendo-color-subtle, #757575)}.meshboard-settings-dialog .settings-form kendo-formfield kendo-formerror{font-size:.75rem;color:var(--kendo-color-error, #f44336)}.meshboard-settings-dialog .settings-form .section-title{font-size:.875rem;font-weight:600;color:var(--kendo-color-on-app-surface, #424242);text-transform:uppercase;letter-spacing:.5px;margin-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--kendo-color-border, #e0e0e0)}.meshboard-settings-dialog .settings-form .checkbox-wrapper,.meshboard-settings-dialog .settings-form .radio-wrapper{display:flex;align-items:center;gap:.5rem}.meshboard-settings-dialog .settings-form .checkbox-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .checkbox-wrapper .radio-label,.meshboard-settings-dialog .settings-form .radio-wrapper .checkbox-label,.meshboard-settings-dialog .settings-form .radio-wrapper .radio-label{font-weight:400;cursor:pointer}.meshboard-settings-dialog .settings-form .radio-group{display:flex;flex-direction:column;gap:.5rem;margin-top:.25rem}.meshboard-settings-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.5rem;border-top:1px solid var(--kendo-color-border, #e0e0e0);flex-shrink:0;background-color:var(--kendo-color-surface-alt, white)}\n"] }]
         }] });
 
 /**
@@ -30444,7 +31444,7 @@ class MeshBoardViewComponent {
             // Update state so widgets use the URL-derived time range
             const sharedSelection = this.toSharedSelection(urlSelection);
             const showTime = timeFilter.pickerConfig?.showTime ?? false;
-            const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+            const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime, this.stateService.timeZoneMode());
             if (range) {
                 const rangeISO = TimeRangeUtils.toISO(range);
                 this.stateService.updateTimeFilterSelection(urlSelection, rangeISO.from, rangeISO.to);
@@ -30461,7 +31461,7 @@ class MeshBoardViewComponent {
             this._urlTimeSelection.set(selection);
             const sharedSelection = this.toSharedSelection(selection);
             const showTime = timeFilter.pickerConfig?.showTime ?? false;
-            const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+            const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime, this.stateService.timeZoneMode());
             if (range) {
                 const rangeISO = TimeRangeUtils.toISO(range);
                 this.stateService.updateTimeFilterSelection(selection, rangeISO.from, rangeISO.to);
@@ -30470,7 +31470,21 @@ class MeshBoardViewComponent {
         }
         const sharedSelection = this.toSharedSelection(selection);
         const showTime = timeFilter.pickerConfig?.showTime ?? false;
-        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime, this.stateService.timeZoneMode());
+        if (!range) {
+            return;
+        }
+        const rangeISO = TimeRangeUtils.toISO(range);
+        this.stateService.setTimeFilterVariables(rangeISO.from, rangeISO.to);
+    }
+    /**
+     * Recomputes the active time-filter range from the current selection on the
+     * board's (possibly just-changed) timezone mode and republishes the
+     * `$timeRangeFrom`/`$timeRangeTo` variables. No-op when the filter is
+     * disabled or no selection is active.
+     */
+    reapplyTimeFilterRange() {
+        const range = this.stateService.resolveCurrentTimeRange();
         if (!range) {
             return;
         }
@@ -30540,6 +31554,11 @@ class MeshBoardViewComponent {
                     ...settingsResult,
                     entitySelectors: settingsResult.entitySelectors
                 });
+                // The timezone mode and/or default selection may have changed — recompute
+                // the active time-filter range on the new basis so $timeRangeFrom/To and
+                // every widget's display stay consistent, then reload widget data.
+                this.reapplyTimeFilterRange();
+                await this.refresh();
                 // Enter edit mode if not already in it
                 if (!this.isEditMode()) {
                     this.editModeService.enterEditMode(this.stateService.getConfig());
@@ -30730,7 +31749,7 @@ class MeshBoardViewComponent {
         }
         // Calculate the time range from the selection
         const showTime = this.stateService.getTimeFilterConfig()?.pickerConfig?.showTime ?? false;
-        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime, this.stateService.timeZoneMode());
         if (!range)
             return;
         // Convert to ISO strings
@@ -30756,7 +31775,7 @@ class MeshBoardViewComponent {
         const defaultSel = config.defaultSelection;
         const sharedSelection = this.toSharedSelection(defaultSel);
         const showTime = config.pickerConfig?.showTime ?? false;
-        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime);
+        const range = TimeRangeUtils.getTimeRangeFromSelection(sharedSelection, showTime, this.stateService.timeZoneMode());
         if (!range)
             return;
         const rangeISO = TimeRangeUtils.toISO(range);
@@ -31096,7 +32115,9 @@ class MeshBoardViewComponent {
     isWidgetUnconfigured(widget) {
         const dataSource = widget.dataSource;
         if (dataSource.type === 'runtimeEntity') {
-            return !dataSource.rtId && !dataSource.ckTypeId;
+            // An entity-selector binding (or a variable-bearing rtId/ckTypeId) counts
+            // as configured — the entity is resolved live from a board-level selection.
+            return !dataSource.entitySelectorId && !dataSource.rtId && !dataSource.ckTypeId;
         }
         if (dataSource.type === 'persistentQuery') {
             return !dataSource.queryRtId;
@@ -31240,6 +32261,16 @@ class MeshBoardViewComponent {
             if (!values.some(v => v.name === rtIdVariableName)) {
                 values.push({ name: rtIdVariableName, value: rtId, type: 'string' });
             }
+            // Auto-expose the selected entity's CK type as `$<selectorId>_rtCkTypeId`
+            // so entity-display widgets (e.g. the entity card) can resolve both the
+            // rtId and its type from a single board-level selection. Prefer the picked
+            // entity's actual type (it may be a subtype of the selector's configured
+            // `ckTypeId`); fall back to the selector's type. An explicit mapping to the
+            // same variable name wins.
+            const rtCkTypeIdVariableName = `${selector.id}_rtCkTypeId`;
+            if (!values.some(v => v.name === rtCkTypeIdVariableName)) {
+                values.push({ name: rtCkTypeIdVariableName, value: entity.ckTypeId ?? selector.ckTypeId, type: 'string' });
+            }
             this.stateService.setEntitySelectorVariables(selector.id, values);
             // Resolve the stream-data scope rtIds for this selection (one-hop
             // childScope traversal, or the picked entity itself). Runs alongside the
@@ -31377,5 +32408,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddWidgetDialogComponent, AiInsightsConfigDialogComponent, AiInsightsService, AiInsightsWidgetComponent, AlertBannerConfigDialogComponent, AlertBannerWidgetComponent, AlertListConfigDialogComponent, AlertListWidgetComponent, AssociationsConfigDialogComponent, AutoRefreshTimerService, BarChartConfigDialogComponent, BarChartWidgetComponent, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, EntitySelectorEditorComponent, EntitySelectorToolbarComponent, GaugeConfigDialogComponent, GaugeWidgetComponent, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KpiConfigDialogComponent, KpiWidgetComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, PieChartConfigDialogComponent, PieChartWidgetComponent, QueryExecutorService, QuerySelectorComponent, RuntimeEntitySelectorComponent, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, StatusListConfigDialogComponent, StatusListWidgetComponent, SummaryCardConfigDialogComponent, SummaryCardWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, classifyQuery, provideDefaultWidgets, provideMeshBoard, provideProcessWidget, provideWidgetRegistrations, queryFamily, registerDefaultWidgets, registerProcessWidget };
+export { AddWidgetDialogComponent, AiInsightsConfigDialogComponent, AiInsightsService, AiInsightsWidgetComponent, AlertBannerConfigDialogComponent, AlertBannerWidgetComponent, AlertListConfigDialogComponent, AlertListWidgetComponent, AssociationsConfigDialogComponent, AutoRefreshTimerService, BarChartConfigDialogComponent, BarChartWidgetComponent, DEFAULT_TIME_ZONE_MODE, DashboardDataService, DashboardGridService, EditModeStateService, EditWidgetDialogComponent, EntityAssociationsWidgetComponent, EntityCardConfigDialogComponent, EntityCardWidgetComponent, EntityDetailDialogComponent, EntitySelectorEditorComponent, EntitySelectorToolbarComponent, GaugeConfigDialogComponent, GaugeWidgetComponent, HeatmapConfigDialogComponent, HeatmapWidgetComponent, KpiConfigDialogComponent, KpiWidgetComponent, LineChartConfigDialogComponent, LineChartWidgetComponent, MESHBOARD_OPTIONS, MESHBOARD_TENANT_ID_PROVIDER, MarkdownConfigDialogComponent, MarkdownWidgetComponent, MeshBoardDataService, MeshBoardGridService, MeshBoardManagerDialogComponent, MeshBoardPersistenceService, MeshBoardSettingsDialogComponent, MeshBoardSettingsResult, MeshBoardStateService, MeshBoardViewComponent, PieChartConfigDialogComponent, PieChartWidgetComponent, QueryExecutorService, QuerySelectorComponent, RuntimeEntitySelectorComponent, ServiceHealthConfigDialogComponent, ServiceHealthWidgetComponent, StatsGridConfigDialogComponent, StatsGridWidgetComponent, StatusIndicatorConfigDialogComponent, StatusIndicatorWidgetComponent, StatusListConfigDialogComponent, StatusListWidgetComponent, SummaryCardConfigDialogComponent, SummaryCardWidgetComponent, TableConfigDialogComponent, TableWidgetComponent, TableWidgetDataSourceDirective, WidgetFactoryService, WidgetGroupComponent, WidgetGroupConfigDialogComponent, WidgetNotConfiguredComponent, WidgetRegistryService, classifyQuery, provideDefaultWidgets, provideMeshBoard, provideProcessWidget, provideWidgetRegistrations, queryFamily, registerDefaultWidgets, registerProcessWidget };
 //# sourceMappingURL=meshmakers-octo-meshboard.mjs.map