@praxisui/page-builder 10.0.0-rc.13 → 10.0.0-rc.15

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-14T09:51:43.880Z",
+  "generatedAt": "2026-10-14T16:04:24.084Z",
   "packageName": "@praxisui/page-builder",
-  "packageVersion": "10.0.0-rc.13",
+  "packageVersion": "10.0.0-rc.15",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-page-builder.mjs

@@ -14567,11 +14567,17 @@ const DERIVED_OPERATORS = ['merge-objects', 'pick', 'omit'];
 const MERGE_STRATEGIES = ['replace', 'merge', 'append', 'remove-keys'];
 const VALUE_MODES = ['json', 'string', 'number', 'boolean', 'null'];
 const GROUPING_KINDS = ['section', 'tabs', 'hero', 'rail'];
+const DATA_SOURCE_KINDS = ['remote-resource', 'stats-query', 'raw-http'];
+const DATA_SOURCE_METHODS = ['GET', 'POST'];
+const DATA_SOURCE_ERROR_POLICIES = ['fallback', 'silent', 'propagate'];
 class PageConfigEditorComponent {
     derivedOperators = DERIVED_OPERATORS;
     mergeStrategies = MERGE_STRATEGIES;
     valueModes = VALUE_MODES;
     groupingKinds = GROUPING_KINDS;
+    dataSourceKinds = DATA_SOURCE_KINDS;
+    dataSourceMethods = DATA_SOURCE_METHODS;
+    dataSourceErrorPolicies = DATA_SOURCE_ERROR_POLICIES;
     layoutPresetEntries = Object.values(BUILTIN_PAGE_LAYOUT_PRESETS);
     themePresetEntries = Object.values(BUILTIN_PAGE_THEME_PRESETS);
     page = input(null, ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
@@ -14595,6 +14601,7 @@ class PageConfigEditorComponent {
     groupingNodes = new FormArray([]);
     schemaNodes = new FormArray([]);
     derivedNodes = new FormArray([]);
+    dataSourceNodes = new FormArray([]);
     deviceDesktopForm = this.createDeviceLayoutForm();
     deviceTabletForm = this.createDeviceLayoutForm();
     deviceMobileForm = this.createDeviceLayoutForm();
@@ -14789,6 +14796,14 @@ class PageConfigEditorComponent {
             .pipe(takeUntilDestroyed())
             .subscribe(() => {
             this.stateError.set(null);
+            this.syncDataSourceNodesFromControl();
+            this.refreshPanelState();
+        });
+        this.dataSourceNodes.valueChanges
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            this.stateError.set(null);
+            this.syncDataSourcesControlFromNodes();
             this.refreshPanelState();
         });
         this.schemaNodes.valueChanges
@@ -14825,6 +14840,12 @@ class PageConfigEditorComponent {
     removeDerivedNode(index) {
         this.derivedNodes.removeAt(index);
     }
+    addDataSourceNode(seed) {
+        this.dataSourceNodes.push(this.createDataSourceNodeGroup(seed));
+    }
+    removeDataSourceNode(index) {
+        this.dataSourceNodes.removeAt(index);
+    }
     addGroupingNode(seed) {
         this.groupingNodes.push(this.createGroupingNodeGroup(seed));
     }
@@ -15049,19 +15070,143 @@ class PageConfigEditorComponent {
         this.replaceDerivedNodes(normalized.derived);
     }
     hydrateDataSourcesEditor(dataSources) {
+        const normalized = this.normalizeDataSourcesArray(dataSources);
         const hasEntries = Array.isArray(dataSources)
             ? dataSources.length > 0
             : !!(dataSources && Object.keys(dataSources).length);
         const nextJson = hasEntries
             ? JSON.stringify(dataSources, null, 2)
             : '';
-        if (nextJson !== this.lastDataSources) {
-            this.lastDataSources = nextJson;
-            this.dataSourcesControl.setValue(nextJson, { emitEvent: false });
-            this.stateError.set(null);
+        this.lastDataSources = nextJson;
+        this.dataSourcesControl.setValue(nextJson, { emitEvent: false });
+        this.replaceDataSourceNodes(normalized);
+        this.stateError.set(null);
+    }
+    normalizeDataSourcesArray(dataSources) {
+        if (!dataSources)
+            return [];
+        if (Array.isArray(dataSources))
+            return dataSources;
+        if (typeof dataSources === 'object') {
+            return Object.entries(dataSources).map(([id, def]) => ({
+                ...def,
+                id: def?.id || id,
+            }));
+        }
+        return [];
+    }
+    replaceDataSourceNodes(dataSources) {
+        this.dataSourceNodes.clear({ emitEvent: false });
+        for (const item of dataSources || []) {
+            this.dataSourceNodes.push(this.createDataSourceNodeGroup(item), { emitEvent: false });
+        }
+    }
+    createDataSourceNodeGroup(seed) {
+        return new FormGroup({
+            id: new FormControl(seed?.id || '', { nonNullable: true, validators: [Validators.required] }),
+            kind: new FormControl(seed?.kind || '', { nonNullable: true }),
+            resourcePath: new FormControl(seed?.resourcePath || '', { nonNullable: true, validators: [Validators.required] }),
+            method: new FormControl(seed?.method || '', { nonNullable: true }),
+            targetStatePath: new FormControl(seed?.targetStatePath || '', { nonNullable: true }),
+            errorPolicy: new FormControl(seed?.errorPolicy || '', { nonNullable: true }),
+            refreshIntervalMs: new FormControl(seed?.refreshIntervalMs ?? null),
+            autoFetch: new FormControl(typeof seed?.autoFetch === 'boolean' ? String(seed.autoFetch) : '', { nonNullable: true }),
+            queryJson: new FormControl(seed?.query !== undefined ? JSON.stringify(seed.query, null, 2) : '', { nonNullable: true }),
+            transformJson: new FormControl(seed?.transform !== undefined ? JSON.stringify(seed.transform, null, 2) : '', { nonNullable: true }),
+            fallbackJson: new FormControl(seed?.fallbackValue !== undefined ? JSON.stringify(seed.fallbackValue, null, 2) : '', { nonNullable: true }),
+            description: new FormControl(seed?.description || '', { nonNullable: true }),
+        });
+    }
+    syncDataSourceNodesFromControl() {
+        const raw = this.dataSourcesControl.value.trim();
+        if (!raw) {
+            this.replaceDataSourceNodes([]);
+            return;
         }
+        const parsed = this.parseJson(raw, null);
+        if (parsed && typeof parsed === 'object') {
+            this.replaceDataSourceNodes(this.normalizeDataSourcesArray(parsed));
+        }
+    }
+    syncDataSourcesControlFromNodes() {
+        const built = this.buildDataSourcesFromNodes();
+        if (built === null)
+            return;
+        const json = built.length ? JSON.stringify(built, null, 2) : '';
+        this.lastDataSources = json;
+        this.dataSourcesControl.setValue(json, { emitEvent: false });
+    }
+    buildDataSourcesFromNodes() {
+        const list = [];
+        for (const group of this.dataSourceNodes.controls) {
+            const id = group.controls.id.value.trim();
+            const resourcePath = group.controls.resourcePath.value.trim();
+            if (!id || !resourcePath)
+                continue;
+            const node = { id, resourcePath };
+            const kind = group.controls.kind.value.trim();
+            const method = group.controls.method.value.trim();
+            const targetStatePath = group.controls.targetStatePath.value.trim();
+            const errorPolicy = group.controls.errorPolicy.value.trim();
+            const refreshIntervalMs = group.controls.refreshIntervalMs.value;
+            const autoFetch = group.controls.autoFetch.value.trim();
+            const queryRaw = group.controls.queryJson.value.trim();
+            const transformRaw = group.controls.transformJson.value.trim();
+            const fallbackRaw = group.controls.fallbackJson.value.trim();
+            const description = group.controls.description.value.trim();
+            if (kind)
+                node.kind = kind;
+            if (method)
+                node.method = method;
+            if (targetStatePath)
+                node.targetStatePath = targetStatePath;
+            if (errorPolicy)
+                node.errorPolicy = errorPolicy;
+            if (refreshIntervalMs !== null && refreshIntervalMs !== undefined && !Number.isNaN(Number(refreshIntervalMs))) {
+                node.refreshIntervalMs = Number(refreshIntervalMs);
+            }
+            if (autoFetch === 'true')
+                node.autoFetch = true;
+            if (autoFetch === 'false')
+                node.autoFetch = false;
+            if (queryRaw) {
+                const parsedQuery = this.parseJson(queryRaw, {});
+                if (parsedQuery === null || typeof parsedQuery !== 'object' || Array.isArray(parsedQuery))
+                    return null;
+                node.query = parsedQuery;
+            }
+            if (transformRaw) {
+                const parsedTransform = this.parseJson(transformRaw, {});
+                if (parsedTransform === null)
+                    return null;
+                node.transform = parsedTransform;
+            }
+            if (fallbackRaw) {
+                try {
+                    node.fallbackValue = JSON.parse(fallbackRaw);
+                }
+                catch {
+                    return null;
+                }
+            }
+            if (description)
+                node.description = description;
+            list.push(node);
+        }
+        return list;
     }
     buildDataSources() {
+        if (this.dataSourceNodes.length > 0) {
+            const fromNodes = this.buildDataSourcesFromNodes();
+            if (fromNodes === null)
+                return null;
+            if (fromNodes.length > 0) {
+                const json = JSON.stringify(fromNodes, null, 2);
+                this.lastDataSources = json;
+                this.dataSourcesControl.setValue(json, { emitEvent: false });
+                return fromNodes;
+            }
+        }
         const raw = this.dataSourcesControl.value.trim();
         if (!raw)
             return undefined;
@@ -16056,12 +16201,85 @@ class PageConfigEditorComponent {
             }
           </div>
         </div>
-        <div class="state-card">
-          <div class="state-card-head">
-            <div>
-              <div class="state-card-title">{{ tx('editor.state.dataSourcesTitle', 'Declarative Data Sources (JSON)') }}</div>
-              <div class="state-card-copy">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</div>
-            </div>
+
+        <div class="state-group">
+          <div class="state-group-head">
+            <div class="state-group-title">{{ tx('editor.state.dataSourcesTitle', 'Declarative Data Sources') }}</div>
+            <button mat-stroked-button type="button" (click)="addDataSourceNode()">
+              <mat-icon>add</mat-icon>
+              {{ tx('editor.state.addDataSource', 'Add data source') }}
+            </button>
+          </div>
+          <div class="state-group-help">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</div>
+          @if (!dataSourceNodes.length) {
+            <div class="state-empty">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</div>
+          }
+          <div class="state-list">
+            @for (group of dataSourceNodes.controls; track $index) {
+              <div class="state-card" [formGroup]="group">
+                <div class="state-card-head">
+                  <div class="state-card-title">{{ tx('editor.state.dataSourceN', 'Data source {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
+                  <button praxisIconButton="delete" size="compact" type="button" (click)="removeDataSourceNode($index)" [attr.aria-label]="tx('editor.state.removeDataSourceAria', 'Remove data source')"></button>
+                </div>
+                <div class="state-card-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>
+                    <input matInput formControlName="id" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>
+                    <mat-select formControlName="kind">
+                      <mat-option value="">{{ tx('editor.common.default', 'Default') }}</mat-option>
+                      @for (kind of dataSourceKinds; track kind) {
+                        <mat-option [value]="kind">{{ kind }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>
+                    <input matInput formControlName="resourcePath" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>
+                    <mat-select formControlName="method">
+                      <mat-option value="">{{ tx('editor.common.auto', 'Auto') }}</mat-option>
+                      @for (method of dataSourceMethods; track method) {
+                        <mat-option [value]="method">{{ method }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>
+                    <input matInput formControlName="targetStatePath" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>
+                    <mat-select formControlName="errorPolicy">
+                      <mat-option value="">{{ tx('editor.common.default', 'Default') }}</mat-option>
+                      @for (policy of dataSourceErrorPolicies; track policy) {
+                        <mat-option [value]="policy">{{ policy }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="queryJson"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="transformJson"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="fallbackJson"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>
+                    <input matInput formControlName="description" />
+                  </mat-form-field>
+                </div>
+              </div>
+            }
           </div>
           <mat-form-field appearance="outline" class="page-context">
             <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>
@@ -16672,12 +16890,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }
           </div>
         </div>
-        <div class="state-card">
-          <div class="state-card-head">
-            <div>
-              <div class="state-card-title">{{ tx('editor.state.dataSourcesTitle', 'Declarative Data Sources (JSON)') }}</div>
-              <div class="state-card-copy">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</div>
-            </div>
+
+        <div class="state-group">
+          <div class="state-group-head">
+            <div class="state-group-title">{{ tx('editor.state.dataSourcesTitle', 'Declarative Data Sources') }}</div>
+            <button mat-stroked-button type="button" (click)="addDataSourceNode()">
+              <mat-icon>add</mat-icon>
+              {{ tx('editor.state.addDataSource', 'Add data source') }}
+            </button>
+          </div>
+          <div class="state-group-help">{{ tx('editor.state.dataSourcesCopy', 'Bind HTTP or resource endpoints directly into page state paths with reactive parameters.') }}</div>
+          @if (!dataSourceNodes.length) {
+            <div class="state-empty">{{ tx('editor.state.emptyDataSources', 'No declarative data sources configured.') }}</div>
+          }
+          <div class="state-list">
+            @for (group of dataSourceNodes.controls; track $index) {
+              <div class="state-card" [formGroup]="group">
+                <div class="state-card-head">
+                  <div class="state-card-title">{{ tx('editor.state.dataSourceN', 'Data source {{index}}').replace('{{index}}', '' + ($index + 1)) }}</div>
+                  <button praxisIconButton="delete" size="compact" type="button" (click)="removeDataSourceNode($index)" [attr.aria-label]="tx('editor.state.removeDataSourceAria', 'Remove data source')"></button>
+                </div>
+                <div class="state-card-grid">
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.dataSourceId', 'ID') }}</mat-label>
+                    <input matInput formControlName="id" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.dataSourceKind', 'Kind') }}</mat-label>
+                    <mat-select formControlName="kind">
+                      <mat-option value="">{{ tx('editor.common.default', 'Default') }}</mat-option>
+                      @for (kind of dataSourceKinds; track kind) {
+                        <mat-option [value]="kind">{{ kind }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.resourcePath', 'Resource path') }}</mat-label>
+                    <input matInput formControlName="resourcePath" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.method', 'HTTP method') }}</mat-label>
+                    <mat-select formControlName="method">
+                      <mat-option value="">{{ tx('editor.common.auto', 'Auto') }}</mat-option>
+                      @for (method of dataSourceMethods; track method) {
+                        <mat-option [value]="method">{{ method }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.targetStatePath', 'Target state path') }}</mat-label>
+                    <input matInput formControlName="targetStatePath" />
+                  </mat-form-field>
+                  <mat-form-field appearance="outline">
+                    <mat-label>{{ tx('editor.state.errorPolicy', 'Error policy') }}</mat-label>
+                    <mat-select formControlName="errorPolicy">
+                      <mat-option value="">{{ tx('editor.common.default', 'Default') }}</mat-option>
+                      @for (policy of dataSourceErrorPolicies; track policy) {
+                        <mat-option [value]="policy">{{ policy }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.queryJson', 'Query (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="queryJson"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.transformJson', 'Transform (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="transformJson"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.fallbackJson', 'Fallback value (JSON)') }}</mat-label>
+                    <textarea matInput rows="3" formControlName="fallbackJson"></textarea>
+                  </mat-form-field>
+                  <mat-form-field appearance="outline" class="span-2">
+                    <mat-label>{{ tx('editor.state.description', 'Description') }}</mat-label>
+                    <input matInput formControlName="description" />
+                  </mat-form-field>
+                </div>
+              </div>
+            }
           </div>
           <mat-form-field appearance="outline" class="page-context">
             <mat-label>{{ tx('editor.state.dataSourcesJson', 'page.dataSources (JSON)') }}</mat-label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/page-builder",
-  "version": "10.0.0-rc.13",
+  "version": "10.0.0-rc.15",
   "description": "Page and widget builder utilities for Praxis UI (grid, dynamic widgets, editors).",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -8,9 +8,9 @@
     "@angular/forms": "^21.0.0",
     "@angular/cdk": "^21.0.0",
     "@angular/material": "^21.0.0",
-    "@praxisui/ai": "^10.0.0-rc.13",
-    "@praxisui/core": "^10.0.0-rc.13",
-    "@praxisui/settings-panel": "^10.0.0-rc.13",
+    "@praxisui/ai": "^10.0.0-rc.15",
+    "@praxisui/core": "^10.0.0-rc.15",
+    "@praxisui/settings-panel": "^10.0.0-rc.15",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-page-builder.d.ts

@@ -2,7 +2,7 @@ import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import * as _angular_core from '@angular/core';
 import { EventEmitter, OnInit, WritableSignal, InjectionToken, Provider, OnChanges, OnDestroy, Type, SimpleChanges } from '@angular/core';
 import * as _praxisui_core from '@praxisui/core';
-import { ComponentDocMeta, WidgetShellConfig, ComponentMetadataRegistry, PraxisI18nService, SettingsEditorSection, EndpointRef, PraxisTextValue, WidgetShellPresetCategory, CompositionLink, WidgetShellAction, WidgetPageAuthoringCapabilities, PortContract, ComponentPortPathSegment, LinkIntent, WidgetPageDefinition, SurfaceOpenActionEditorComponent, TransformKind, TransformPipeline, SurfaceOpenPayload, WidgetPageDeviceKind, SettingsValueProvider as SettingsValueProvider$1, WidgetShellPresetDefinition, WidgetPageCanvasLayout, WidgetPageGroupingDefinition, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, PageIdentity, WidgetStateNode, WidgetDerivedStateNode, AiCapability, AiCapabilityCategory, AiCapabilityCatalog, AiValueKind, WidgetPageDeviceLayouts, WidgetPageSlotAssignments, WidgetPageStateInput, WidgetInstance, TransformOutputHint, TransformSemanticKind, ConfigAuthoringSource, DomainKnowledgeChangeSetRequest, DomainKnowledgeChangeSet, DomainKnowledgeChangeSetTimelineResponse, DomainKnowledgeChangeSetFilters, DomainKnowledgeValidationResponse, DomainKnowledgeStatusTransitionRequest, DomainRuleIntakeRequest, DomainRuleIntakeResponse, DomainRuleDefinitionRequest, DomainRuleDefinition, DomainRuleSimulationRequest, DomainRuleSimulationResponse, DomainRuleStatusTransitionRequest, DomainRulePublicationRequest, DomainRulePublicationResponse, DomainRuleMaterializationFilters, DomainRuleMaterialization, DomainRuleTimelineResponse, PraxisRuntimeComponentObservationEnvelope, ComponentContextPack, ComponentAuthoringManifest, DiagnosticRecord, NestedPortCatalogRegistry, CompositionValidatorService, ApiUrlEntry, DynamicWidgetPageComponent, ConfigDocument, WidgetPagePersistenceState, WidgetEventEnvelope, ObservabilityAgenticTurnMetrics, SettingsPanelBridge, ObservabilityAgenticTurnMetricBucket, RichTimelineItem } from '@praxisui/core';
+import { ComponentDocMeta, WidgetShellConfig, ComponentMetadataRegistry, PraxisI18nService, SettingsEditorSection, EndpointRef, PraxisTextValue, WidgetShellPresetCategory, CompositionLink, WidgetShellAction, WidgetPageAuthoringCapabilities, PortContract, ComponentPortPathSegment, LinkIntent, WidgetPageDefinition, SurfaceOpenActionEditorComponent, TransformKind, TransformPipeline, SurfaceOpenPayload, WidgetPageDeviceKind, SettingsValueProvider as SettingsValueProvider$1, WidgetShellPresetDefinition, WidgetPageCanvasLayout, WidgetPageGroupingDefinition, WidgetPageDataSourceKind, WidgetPageDataSourceMethod, WidgetPageDataSourceErrorPolicy, BUILTIN_PAGE_LAYOUT_PRESETS, BUILTIN_PAGE_THEME_PRESETS, PageIdentity, WidgetStateNode, WidgetDerivedStateNode, WidgetPageDataSourceDefinition, AiCapability, AiCapabilityCategory, AiCapabilityCatalog, AiValueKind, WidgetPageDeviceLayouts, WidgetPageSlotAssignments, WidgetPageStateInput, WidgetInstance, TransformOutputHint, TransformSemanticKind, ConfigAuthoringSource, DomainKnowledgeChangeSetRequest, DomainKnowledgeChangeSet, DomainKnowledgeChangeSetTimelineResponse, DomainKnowledgeChangeSetFilters, DomainKnowledgeValidationResponse, DomainKnowledgeStatusTransitionRequest, DomainRuleIntakeRequest, DomainRuleIntakeResponse, DomainRuleDefinitionRequest, DomainRuleDefinition, DomainRuleSimulationRequest, DomainRuleSimulationResponse, DomainRuleStatusTransitionRequest, DomainRulePublicationRequest, DomainRulePublicationResponse, DomainRuleMaterializationFilters, DomainRuleMaterialization, DomainRuleTimelineResponse, PraxisRuntimeComponentObservationEnvelope, ComponentContextPack, ComponentAuthoringManifest, DiagnosticRecord, NestedPortCatalogRegistry, CompositionValidatorService, ApiUrlEntry, DynamicWidgetPageComponent, ConfigDocument, WidgetPagePersistenceState, WidgetEventEnvelope, ObservabilityAgenticTurnMetrics, SettingsPanelBridge, ObservabilityAgenticTurnMetricBucket, RichTimelineItem } from '@praxisui/core';
 import * as rxjs from 'rxjs';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { FormGroup, FormControl, FormArray, AbstractControl } from '@angular/forms';
@@ -1409,11 +1409,28 @@ type GroupingNodeGroup = FormGroup<{
     side: FormControl<string>;
     tabsJson: FormControl<string>;
 }>;
+type DataSourceNodeGroup = FormGroup<{
+    id: FormControl<string>;
+    kind: FormControl<string>;
+    resourcePath: FormControl<string>;
+    method: FormControl<string>;
+    targetStatePath: FormControl<string>;
+    errorPolicy: FormControl<string>;
+    refreshIntervalMs: FormControl<number | null>;
+    autoFetch: FormControl<string>;
+    queryJson: FormControl<string>;
+    transformJson: FormControl<string>;
+    fallbackJson: FormControl<string>;
+    description: FormControl<string>;
+}>;
 declare class PageConfigEditorComponent implements SettingsValueProvider$1 {
     protected readonly derivedOperators: readonly ["merge-objects", "pick", "omit"];
     protected readonly mergeStrategies: readonly ["replace", "merge", "append", "remove-keys"];
     protected readonly valueModes: readonly ["json", "string", "number", "boolean", "null"];
     protected readonly groupingKinds: readonly ["section", "tabs", "hero", "rail"];
+    protected readonly dataSourceKinds: WidgetPageDataSourceKind[];
+    protected readonly dataSourceMethods: WidgetPageDataSourceMethod[];
+    protected readonly dataSourceErrorPolicies: WidgetPageDataSourceErrorPolicy[];
     protected readonly layoutPresetEntries: Array<(typeof BUILTIN_PAGE_LAYOUT_PRESETS)[string]>;
     protected readonly themePresetEntries: Array<(typeof BUILTIN_PAGE_THEME_PRESETS)[string]>;
     readonly page: _angular_core.InputSignal<string | PageDefinition | null>;
@@ -1437,6 +1454,7 @@ declare class PageConfigEditorComponent implements SettingsValueProvider$1 {
     readonly groupingNodes: FormArray<GroupingNodeGroup>;
     readonly schemaNodes: FormArray<SchemaNodeGroup>;
     readonly derivedNodes: FormArray<DerivedNodeGroup>;
+    readonly dataSourceNodes: FormArray<DataSourceNodeGroup>;
     readonly deviceDesktopForm: FormGroup<{
         orientation: FormControl<string>;
         columns: FormControl<number | null>;
@@ -1519,6 +1537,8 @@ declare class PageConfigEditorComponent implements SettingsValueProvider$1 {
         config?: WidgetDerivedStateNode;
     }): void;
     removeDerivedNode(index: number): void;
+    addDataSourceNode(seed?: WidgetPageDataSourceDefinition): void;
+    removeDataSourceNode(index: number): void;
     addGroupingNode(seed?: WidgetPageGroupingDefinition): void;
     removeGroupingNode(index: number): void;
     setActiveTab(tab: EditorTabId): void;
@@ -1536,6 +1556,12 @@ declare class PageConfigEditorComponent implements SettingsValueProvider$1 {
     private buildDeviceLayoutVariant;
     private hydrateStateEditor;
     private hydrateDataSourcesEditor;
+    private normalizeDataSourcesArray;
+    private replaceDataSourceNodes;
+    private createDataSourceNodeGroup;
+    private syncDataSourceNodesFromControl;
+    private syncDataSourcesControlFromNodes;
+    private buildDataSourcesFromNodes;
     private buildDataSources;
     private replaceSchemaNodes;
     private replaceDerivedNodes;