@yourself.create/ngx-form-designer 0.0.3 → 0.0.4

package/fesm2022/uch-web-ngx-form-designer.mjs

@@ -1,7 +1,7 @@
+import { v4 } from 'uuid';
 import * as i0 from '@angular/core';
 import { Injectable, InjectionToken, NgModule, inject, signal, computed, EventEmitter, DestroyRef, Injector, afterNextRender, ViewContainerRef, Input, ViewChild, Output, Inject, ChangeDetectionStrategy, Component, effect, ElementRef, NgZone, input, output, HostListener, ContentChildren, untracked, ChangeDetectorRef, Pipe } from '@angular/core';
 import { BehaviorSubject, Subject, merge, of, filter, map, debounceTime as debounceTime$1, skip, firstValueFrom } from 'rxjs';
-import { v4 } from 'uuid';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -14,7 +14,8 @@ import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i5 from 'angular-resizable-element';
 import { ResizableModule } from 'angular-resizable-element';
 import loader from '@monaco-editor/loader';
-import { AI_BACKEND_CLIENT, AiChatDrawerComponent, AiWorkspaceComponent } from '@uch-web/angai';
+import { ColorPickerDirective } from 'ngx-color-picker';
+import { defineAiTool, provideAngaiFeature, AI_BACKEND_CLIENT, AiChatDrawerComponent, AiWorkspaceComponent } from '@uch-web/angai';
 import { Router, NavigationEnd } from '@angular/router';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { NgSelectComponent } from '@ng-select/ng-select';
@@ -24,6 +25,243 @@ import { HttpClient, provideHttpClient } from '@angular/common/http';
 
 const CURRENT_SCHEMA_VERSION = '1.0.0';
 
+/**
+ * Automatically computes and sets `hierarchyAccess` flags
+ * on each field's dataConfig based on dependency relationships.
+ *
+ * Logic:
+ * - hierarchyAccess = true if field has dependsOn OR other fields depend on it
+ */
+function computeAccessFlags(schema) {
+    if (!schema.fields || schema.fields.length === 0) {
+        return;
+    }
+    const fieldByIdOrName = new Map();
+    for (const field of schema.fields) {
+        fieldByIdOrName.set(field.id, field);
+        if (field.name) {
+            fieldByIdOrName.set(field.name, field);
+        }
+    }
+    // Build a map of canonical field ids that are depended upon
+    const dependedUponFieldIds = new Set();
+    for (const field of schema.fields) {
+        if (field.dataConfig?.dependsOn && field.dataConfig.dependsOn.length > 0) {
+            for (const dep of field.dataConfig.dependsOn) {
+                const dependedField = fieldByIdOrName.get(dep.fieldId);
+                if (dependedField) {
+                    dependedUponFieldIds.add(dependedField.id);
+                }
+            }
+        }
+    }
+    // Compute flags for each field
+    for (const field of schema.fields) {
+        const hasDependsOn = !!field.dataConfig?.dependsOn?.length;
+        const isDependedUpon = dependedUponFieldIds.has(field.id);
+        const hierarchyAccess = hasDependsOn || isDependedUpon;
+        if (!field.dataConfig) {
+            if (!hierarchyAccess) {
+                continue;
+            }
+            // Persist hierarchy participation for fields that act as dependency parents
+            // even when they did not have a dataConfig previously.
+            field.dataConfig = {
+                type: 'static',
+                hierarchyAccess
+            };
+            continue;
+        }
+        // hierarchyAccess: true if field participates in hierarchy (either direction)
+        field.dataConfig.hierarchyAccess = hierarchyAccess;
+    }
+    for (const field of schema.fields) {
+        const itemSchema = field.repeatable?.itemSchema;
+        if (!itemSchema)
+            continue;
+        computeAccessFlags(itemSchema);
+    }
+}
+
+/**
+ * Metadata field is intended for AI/LLM and project-level information (prompts, generation parameters, tags).
+ * SchemaVersion will be used for future migrations as more flavors (audio/video/image editors, tables, etc.) are added.
+ */
+function createEmptySchema(flavor = 'form', opts) {
+    return {
+        id: opts?.id || v4(),
+        version: '1.0',
+        schemaVersion: CURRENT_SCHEMA_VERSION,
+        flavor,
+        title: opts?.title || 'New Form',
+        metadata: {},
+        fields: [],
+        layout: {
+            id: v4(),
+            type: 'col', // Root is a vertical Page/Column
+            responsive: { xs: 12 },
+            children: [
+                {
+                    id: v4(),
+                    type: 'row', // Initial Row
+                    children: [
+                        {
+                            id: v4(),
+                            type: 'col',
+                            responsive: { xs: 12 },
+                            children: []
+                        }
+                    ]
+                }
+            ]
+        }
+    };
+}
+function serializeSchema(schema) {
+    const schemaForSerialization = JSON.parse(JSON.stringify(schema));
+    computeAccessFlags(schemaForSerialization);
+    return JSON.stringify(schemaForSerialization, null, 2);
+}
+function parseSchema(json) {
+    let schema;
+    try {
+        schema = JSON.parse(json);
+    }
+    catch (e) {
+        throw new Error('Invalid JSON');
+    }
+    if (!schema.id || !schema.layout) {
+        throw new Error('Invalid Schema Structure');
+    }
+    // Normalization / Migration Logic
+    if (!schema.schemaVersion) {
+        schema.schemaVersion = CURRENT_SCHEMA_VERSION;
+    }
+    // Default flavor if missing (legacy support)
+    if (!schema.flavor) {
+        schema.flavor = 'form';
+    }
+    // TODO: Future migrations based on schemaVersion can go here.
+    // Auto-compute access flags based on dependencies
+    computeAccessFlags(schema);
+    return schema;
+}
+
+function normalizePageName(name, schema) {
+    const explicitName = (name ?? '').trim();
+    if (explicitName)
+        return explicitName;
+    const schemaTitle = (schema.title ?? '').trim();
+    if (schemaTitle)
+        return schemaTitle;
+    return 'Page';
+}
+function toRouteSegment(input) {
+    return input
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+function normalizeRoute(route, name) {
+    const raw = (route ?? '').trim().toLowerCase();
+    if (!raw) {
+        const segment = toRouteSegment(name);
+        return segment ? `/${segment}` : '/step';
+    }
+    return raw.startsWith('/') ? raw : `/${raw}`;
+}
+function normalizePage(page) {
+    const schema = page.schema;
+    const name = normalizePageName(page.name, schema);
+    return {
+        id: page.id || v4(),
+        name,
+        route: normalizeRoute(page.route, name),
+        schema: {
+            ...schema,
+            title: schema.title ?? name
+        }
+    };
+}
+function createFormJourneyPage(opts) {
+    const schema = opts?.schema ?? createEmptySchema('form');
+    const name = normalizePageName(opts?.name, schema);
+    return {
+        id: opts?.id ?? v4(),
+        name,
+        route: normalizeRoute(opts?.route, name),
+        schema: {
+            ...schema,
+            title: schema.title ?? name
+        }
+    };
+}
+function createFormJourneyProject(opts) {
+    const pages = (opts?.pages?.length ? opts.pages : [
+        createFormJourneyPage({
+            name: 'Step 1',
+            schema: createEmptySchema('form', { title: 'Step 1' })
+        })
+    ]).map(normalizePage);
+    const startPageId = pages.some(page => page.id === opts?.startPageId)
+        ? opts?.startPageId
+        : pages[0].id;
+    return {
+        id: opts?.id ?? v4(),
+        title: opts?.title ?? pages[0]?.schema.title ?? 'New Journey',
+        pages,
+        startPageId,
+        metadata: opts?.metadata ?? {}
+    };
+}
+function isFormJourneyProject(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return false;
+    const candidate = value;
+    if (!Array.isArray(candidate.pages))
+        return false;
+    if (typeof candidate.startPageId !== 'string' || candidate.startPageId.trim().length === 0)
+        return false;
+    return candidate.pages.every(page => {
+        if (!page || typeof page !== 'object')
+            return false;
+        const p = page;
+        if (typeof p.id !== 'string' || typeof p.name !== 'string')
+            return false;
+        if (!p.schema || typeof p.schema !== 'object' || Array.isArray(p.schema))
+            return false;
+        return 'layout' in p.schema && 'fields' in p.schema;
+    });
+}
+function normalizeToJourney(value) {
+    if (isFormJourneyProject(value)) {
+        return createFormJourneyProject({
+            id: value.id,
+            title: value.title,
+            pages: value.pages.map(page => normalizePage(page)),
+            startPageId: value.startPageId,
+            metadata: value.metadata
+        });
+    }
+    const singlePage = createFormJourneyPage({
+        name: value.title ?? 'Step 1',
+        schema: value
+    });
+    return createFormJourneyProject({
+        title: value.title ?? 'New Journey',
+        pages: [singlePage],
+        startPageId: singlePage.id,
+        metadata: value.metadata
+    });
+}
+function unwrapSinglePageJourney(value) {
+    if (value.pages.length === 1) {
+        return value.pages[0].schema;
+    }
+    return value;
+}
+
 class RuleEvaluationService {
     constructor() { }
     /**
@@ -145,6 +383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 class FormEngine {
     schema;
     values = {};
+    fieldLabels = {};
     errors = {};
     ruleEvaluator = new RuleEvaluationService();
     // Reactive Streams
@@ -163,9 +402,10 @@ class FormEngine {
             valueChanges: this.valueChanges$
         };
     }
-    constructor(schema, initialValues = {}) {
+    constructor(schema, initialValues = {}, initialFieldLabels = {}) {
         this.schema = schema;
         this.values = { ...initialValues };
+        this.fieldLabels = { ...initialFieldLabels };
         // Initialize default values if missing
         this.schema.fields.forEach(field => {
             if (this.values[field.name] === undefined) {
@@ -212,6 +452,19 @@ class FormEngine {
     getValues() {
         return { ...this.values };
     }
+    getFieldLabel(fieldName) {
+        return this.fieldLabels[fieldName];
+    }
+    getFieldLabels() {
+        return { ...this.fieldLabels };
+    }
+    setFieldLabel(fieldName, label) {
+        if (label === undefined) {
+            delete this.fieldLabels[fieldName];
+            return;
+        }
+        this.fieldLabels[fieldName] = Array.isArray(label) ? [...label] : label;
+    }
     getErrors() {
         return { ...this.errors };
     }
@@ -411,130 +664,8 @@ class FormEngine {
         return currentState;
     }
 }
-function createFormEngine(schema, initialValues = {}) {
-    return new FormEngine(schema, initialValues);
-}
-
-/**
- * Automatically computes and sets `hierarchyAccess` flags
- * on each field's dataConfig based on dependency relationships.
- *
- * Logic:
- * - hierarchyAccess = true if field has dependsOn OR other fields depend on it
- */
-function computeAccessFlags(schema) {
-    if (!schema.fields || schema.fields.length === 0) {
-        return;
-    }
-    const fieldByIdOrName = new Map();
-    for (const field of schema.fields) {
-        fieldByIdOrName.set(field.id, field);
-        if (field.name) {
-            fieldByIdOrName.set(field.name, field);
-        }
-    }
-    // Build a map of canonical field ids that are depended upon
-    const dependedUponFieldIds = new Set();
-    for (const field of schema.fields) {
-        if (field.dataConfig?.dependsOn && field.dataConfig.dependsOn.length > 0) {
-            for (const dep of field.dataConfig.dependsOn) {
-                const dependedField = fieldByIdOrName.get(dep.fieldId);
-                if (dependedField) {
-                    dependedUponFieldIds.add(dependedField.id);
-                }
-            }
-        }
-    }
-    // Compute flags for each field
-    for (const field of schema.fields) {
-        const hasDependsOn = !!field.dataConfig?.dependsOn?.length;
-        const isDependedUpon = dependedUponFieldIds.has(field.id);
-        const hierarchyAccess = hasDependsOn || isDependedUpon;
-        if (!field.dataConfig) {
-            if (!hierarchyAccess) {
-                continue;
-            }
-            // Persist hierarchy participation for fields that act as dependency parents
-            // even when they did not have a dataConfig previously.
-            field.dataConfig = {
-                type: 'static',
-                hierarchyAccess
-            };
-            continue;
-        }
-        // hierarchyAccess: true if field participates in hierarchy (either direction)
-        field.dataConfig.hierarchyAccess = hierarchyAccess;
-    }
-    for (const field of schema.fields) {
-        const itemSchema = field.repeatable?.itemSchema;
-        if (!itemSchema)
-            continue;
-        computeAccessFlags(itemSchema);
-    }
-}
-
-/**
- * Metadata field is intended for AI/LLM and project-level information (prompts, generation parameters, tags).
- * SchemaVersion will be used for future migrations as more flavors (audio/video/image editors, tables, etc.) are added.
- */
-function createEmptySchema(flavor = 'form', opts) {
-    return {
-        id: opts?.id || v4(),
-        version: '1.0',
-        schemaVersion: CURRENT_SCHEMA_VERSION,
-        flavor,
-        title: opts?.title || 'New Form',
-        metadata: {},
-        fields: [],
-        layout: {
-            id: v4(),
-            type: 'col', // Root is a vertical Page/Column
-            responsive: { xs: 12 },
-            children: [
-                {
-                    id: v4(),
-                    type: 'row', // Initial Row
-                    children: [
-                        {
-                            id: v4(),
-                            type: 'col',
-                            responsive: { xs: 12 },
-                            children: []
-                        }
-                    ]
-                }
-            ]
-        }
-    };
-}
-function serializeSchema(schema) {
-    const schemaForSerialization = JSON.parse(JSON.stringify(schema));
-    computeAccessFlags(schemaForSerialization);
-    return JSON.stringify(schemaForSerialization, null, 2);
-}
-function parseSchema(json) {
-    let schema;
-    try {
-        schema = JSON.parse(json);
-    }
-    catch (e) {
-        throw new Error('Invalid JSON');
-    }
-    if (!schema.id || !schema.layout) {
-        throw new Error('Invalid Schema Structure');
-    }
-    // Normalization / Migration Logic
-    if (!schema.schemaVersion) {
-        schema.schemaVersion = CURRENT_SCHEMA_VERSION;
-    }
-    // Default flavor if missing (legacy support)
-    if (!schema.flavor) {
-        schema.flavor = 'form';
-    }
-    // TODO: Future migrations based on schemaVersion can go here.
-    // Auto-compute access flags based on dependencies
-    computeAccessFlags(schema);
-    return schema;
+function createFormEngine(schema, initialValues = {}, initialFieldLabels = {}) {
+    return new FormEngine(schema, initialValues, initialFieldLabels);
 }
 
 /**
@@ -2692,6 +2823,7 @@ class LayoutNodeComponent {
     engine;
     fields = [];
     designMode = false;
+    showLayoutGuides = true;
     readOnlyMode = false;
     scopePath = [];
     device = 'desktop';
@@ -3154,7 +3286,9 @@ class LayoutNodeComponent {
     getColContainerClasses(node) {
         const widthClasses = this.getColClasses(node);
         const interactionClasses = this.designMode
-            ? 'min-h-[50px] relative transition-all cursor-pointer border border-transparent hover:border-blue-200/50'
+            ? this.showLayoutGuides
+                ? 'min-h-[50px] relative transition-all cursor-pointer border border-transparent hover:border-blue-200/50'
+                : 'min-h-[50px] relative transition-all cursor-pointer'
             : 'min-h-[50px] relative transition-all';
         return `${interactionClasses} ${widthClasses}`.trim();
     }
@@ -3294,7 +3428,7 @@ class LayoutNodeComponent {
         return this.fields.find(field => field.id === widget.refId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutNodeComponent, deps: [{ token: WIDGET_DEFINITIONS }, { token: DesignerStateService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LayoutNodeComponent, isStandalone: true, selector: "app-layout-node", inputs: { node: "node", engine: "engine", fields: "fields", designMode: "designMode", readOnlyMode: "readOnlyMode", scopePath: "scopePath", device: "device", breakpoint: "breakpoint", connectedDropLists: "connectedDropLists" }, outputs: { nodeDrop: "nodeDrop", nodeSelect: "nodeSelect" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: LayoutNodeComponent, isStandalone: true, selector: "app-layout-node", inputs: { node: "node", engine: "engine", fields: "fields", designMode: "designMode", showLayoutGuides: "showLayoutGuides", readOnlyMode: "readOnlyMode", scopePath: "scopePath", device: "device", breakpoint: "breakpoint", connectedDropLists: "connectedDropLists" }, outputs: { nodeDrop: "nodeDrop", nodeSelect: "nodeSelect" }, viewQueries: [{ propertyName: "widgetContainer", first: true, predicate: ["widgetContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container [ngSwitch]="node.type">
       
       <!-- ROW -->
@@ -3308,9 +3442,9 @@ class LayoutNodeComponent {
              (resizeEnd)="onHeightResizeEnd(node, $event)"
              (click)="onRowClick($event)"
              (contextmenu)="onRowContextMenu($event)"
-             [class.outline-dashed]="designMode"
-             [class.outline-1]="designMode"
-             [class.outline-blue-200]="designMode && !isSelected"
+             [class.outline-dashed]="designMode && showLayoutGuides"
+             [class.outline-1]="designMode && showLayoutGuides"
+             [class.outline-blue-200]="designMode && showLayoutGuides && !isSelected"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected">
@@ -3337,7 +3471,7 @@ class LayoutNodeComponent {
         </div>
          
         <!-- Visual Label for Row when hovered (not selected) -->
-        <div *ngIf="designMode && !isSelected" class="absolute -top-3 left-0 bg-blue-500 text-white text-[10px] px-1 rounded rounded-b-none opacity-0 group-hover:opacity-100 transition-opacity z-10">
+        <div *ngIf="designMode && showLayoutGuides && !isSelected" class="absolute -top-3 left-0 bg-blue-500 text-white text-[10px] px-1 rounded rounded-b-none opacity-0 group-hover:opacity-100 transition-opacity z-10">
             ROW
         </div>
 
@@ -3346,6 +3480,7 @@ class LayoutNodeComponent {
                          [engine]="engine"
                          [fields]="fields"
                          [designMode]="designMode"
+                         [showLayoutGuides]="showLayoutGuides"
                          [readOnlyMode]="readOnlyMode"
                          [scopePath]="scopePath"
                          [device]="device"
@@ -3382,9 +3517,9 @@ class LayoutNodeComponent {
              [id]="getScopedNodeId(node.id)"
              [cdkDropListConnectedTo]="connectedDropLists"
              (cdkDropListDropped)="onDrop($event)"
-             [class.outline-dashed]="designMode"
-             [class.outline-1]="designMode"
-             [class.outline-gray-300]="designMode && !isSelected"
+             [class.outline-dashed]="designMode && showLayoutGuides"
+             [class.outline-1]="designMode && showLayoutGuides"
+             [class.outline-gray-300]="designMode && showLayoutGuides && !isSelected"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected && asCol(node).children.length === 0">
@@ -3433,6 +3568,7 @@ class LayoutNodeComponent {
                               [engine]="engine"
                               [fields]="fields"
                               [designMode]="designMode"
+                              [showLayoutGuides]="showLayoutGuides"
                               [readOnlyMode]="readOnlyMode"
                               [scopePath]="scopePath"
                               [device]="device"
@@ -3537,7 +3673,7 @@ class LayoutNodeComponent {
       </ng-container>
 
     </ng-container>
-  `, isInline: true, dependencies: [{ kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: ResizableModule }, { kind: "directive", type: i5.ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: i5.ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "showLayoutGuides", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i3.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "ngmodule", type: ResizableModule }, { kind: "directive", type: i5.ResizableDirective, selector: "[mwlResizable]", inputs: ["validateResize", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS"], outputs: ["resizeStart", "resizing", "resizeEnd"], exportAs: ["mwlResizable"] }, { kind: "directive", type: i5.ResizeHandleDirective, selector: "[mwlResizeHandle]", inputs: ["resizeEdges", "resizableContainer"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutNodeComponent, decorators: [{
             type: Component,
@@ -3560,9 +3696,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              (resizeEnd)="onHeightResizeEnd(node, $event)"
              (click)="onRowClick($event)"
              (contextmenu)="onRowContextMenu($event)"
-             [class.outline-dashed]="designMode"
-             [class.outline-1]="designMode"
-             [class.outline-blue-200]="designMode && !isSelected"
+             [class.outline-dashed]="designMode && showLayoutGuides"
+             [class.outline-1]="designMode && showLayoutGuides"
+             [class.outline-blue-200]="designMode && showLayoutGuides && !isSelected"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected">
@@ -3589,7 +3725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         </div>
          
         <!-- Visual Label for Row when hovered (not selected) -->
-        <div *ngIf="designMode && !isSelected" class="absolute -top-3 left-0 bg-blue-500 text-white text-[10px] px-1 rounded rounded-b-none opacity-0 group-hover:opacity-100 transition-opacity z-10">
+        <div *ngIf="designMode && showLayoutGuides && !isSelected" class="absolute -top-3 left-0 bg-blue-500 text-white text-[10px] px-1 rounded rounded-b-none opacity-0 group-hover:opacity-100 transition-opacity z-10">
             ROW
         </div>
 
@@ -3598,6 +3734,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                          [engine]="engine"
                          [fields]="fields"
                          [designMode]="designMode"
+                         [showLayoutGuides]="showLayoutGuides"
                          [readOnlyMode]="readOnlyMode"
                          [scopePath]="scopePath"
                          [device]="device"
@@ -3634,9 +3771,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
              [id]="getScopedNodeId(node.id)"
              [cdkDropListConnectedTo]="connectedDropLists"
              (cdkDropListDropped)="onDrop($event)"
-             [class.outline-dashed]="designMode"
-             [class.outline-1]="designMode"
-             [class.outline-gray-300]="designMode && !isSelected"
+             [class.outline-dashed]="designMode && showLayoutGuides"
+             [class.outline-1]="designMode && showLayoutGuides"
+             [class.outline-gray-300]="designMode && showLayoutGuides && !isSelected"
              [class.ring-2]="designMode && isSelected"
              [class.ring-blue-500]="designMode && isSelected"
              [class.bg-blue-50]="designMode && isSelected && asCol(node).children.length === 0">
@@ -3685,6 +3822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                               [engine]="engine"
                               [fields]="fields"
                               [designMode]="designMode"
+                              [showLayoutGuides]="showLayoutGuides"
                               [readOnlyMode]="readOnlyMode"
                               [scopePath]="scopePath"
                               [device]="device"
@@ -3802,6 +3940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], designMode: [{
                 type: Input
+            }], showLayoutGuides: [{
+                type: Input
             }], readOnlyMode: [{
                 type: Input
             }], scopePath: [{
@@ -3892,6 +4032,7 @@ class FormEventRunner {
     logger;
     apiExecutor;
     dataSourceWriter;
+    navigateToPage;
     constructor(engine, loggerOrOptions = NOOP_LOGGER) {
         this.engine = engine;
         if (isEventLogger(loggerOrOptions)) {
@@ -3901,6 +4042,7 @@ class FormEventRunner {
             this.logger = loggerOrOptions.logger ?? NOOP_LOGGER;
             this.apiExecutor = loggerOrOptions.apiExecutor;
             this.dataSourceWriter = loggerOrOptions.dataSourceWriter;
+            this.navigateToPage = loggerOrOptions.navigateToPage;
         }
         this.sub = this.engine.events$.subscribe(evt => {
             void this.handleEvent(evt);
@@ -3925,7 +4067,10 @@ class FormEventRunner {
             const bindings = field.events.filter(b => b.on === evt.type && b.enabled !== false);
             for (const binding of bindings) {
                 for (const action of binding.actions) {
-                    await this.executeAction(action, binding.id, evt, schema.fields);
+                    const stop = await this.executeAction(action, binding.id, evt, schema.fields);
+                    if (stop) {
+                        return;
+                    }
                 }
             }
         }
@@ -3936,13 +4081,17 @@ class FormEventRunner {
     async executeAction(action, eventId, evt, fields) {
         if (action.type === 'log') {
             this.logger.log(action.message || 'Event fired', { event: evt });
-            return;
+            return false;
         }
         if (action.type === 'setValue') {
             this.handleSetValue(action, evt, fields);
-            return;
+            return false;
+        }
+        if (action.type === 'navigate') {
+            return this.handleNavigateAction(action, fields);
         }
         await this.handleApiAction(action, eventId, evt, fields);
+        return false;
     }
     handleSetValue(action, evt, fields) {
         const target = fields.find(f => f.id === action.targetFieldId);
@@ -4019,6 +4168,119 @@ class FormEventRunner {
             });
         }
     }
+    async handleNavigateAction(action, fields) {
+        const targetPageId = action.targetPageId?.trim();
+        if (!targetPageId) {
+            this.logger.warn('Navigate action skipped because targetPageId is missing.', { action });
+            return false;
+        }
+        if (!this.evaluateNavigateCondition(action.when, fields)) {
+            return false;
+        }
+        if (!this.navigateToPage) {
+            this.logger.warn('Navigate action skipped because no navigateToPage handler was provided.', { action });
+            return false;
+        }
+        try {
+            const result = await this.navigateToPage(targetPageId);
+            if (!result?.ok) {
+                this.logger.warn('Navigate action was blocked by navigateToPage handler.', { action, result });
+                return false;
+            }
+            return true;
+        }
+        catch (error) {
+            this.logger.warn('Navigate action execution failed.', { action, error });
+            return false;
+        }
+    }
+    evaluateNavigateCondition(group, fields) {
+        if (!group)
+            return true;
+        return this.evaluateLogicGroup(group, fields);
+    }
+    evaluateLogicGroup(group, fields) {
+        const results = group.conditions.map(condition => this.isLogicCondition(condition)
+            ? this.evaluateLogicCondition(condition, fields)
+            : this.evaluateLogicGroup(condition, fields));
+        return group.operator === 'AND'
+            ? results.every(Boolean)
+            : results.some(Boolean);
+    }
+    isLogicCondition(value) {
+        return 'fieldId' in value;
+    }
+    evaluateLogicCondition(condition, fields) {
+        const left = this.getFieldValue(condition.fieldId, fields);
+        const right = condition.valueSource === 'field'
+            ? this.getFieldValue(condition.valueFieldId ?? '', fields)
+            : condition.value;
+        switch (condition.operator) {
+            case 'eq':
+                return left === right;
+            case 'neq':
+                return left !== right;
+            case 'gt':
+                return this.compareValues(left, right) > 0;
+            case 'lt':
+                return this.compareValues(left, right) < 0;
+            case 'gte':
+                return this.compareValues(left, right) >= 0;
+            case 'lte':
+                return this.compareValues(left, right) <= 0;
+            case 'contains':
+                return this.containsValue(left, right);
+            case 'startsWith':
+                return String(left ?? '').startsWith(String(right ?? ''));
+            case 'endsWith':
+                return String(left ?? '').endsWith(String(right ?? ''));
+            case 'empty':
+                return this.isEmptyValue(left);
+            case 'notEmpty':
+                return !this.isEmptyValue(left);
+            case 'truthy':
+                return !!left;
+            default:
+                return false;
+        }
+    }
+    compareValues(left, right) {
+        const leftNumber = Number(left);
+        const rightNumber = Number(right);
+        const leftIsNumeric = Number.isFinite(leftNumber);
+        const rightIsNumeric = Number.isFinite(rightNumber);
+        if (leftIsNumeric && rightIsNumeric) {
+            if (leftNumber === rightNumber)
+                return 0;
+            return leftNumber > rightNumber ? 1 : -1;
+        }
+        const leftText = String(left ?? '');
+        const rightText = String(right ?? '');
+        if (leftText === rightText)
+            return 0;
+        return leftText > rightText ? 1 : -1;
+    }
+    containsValue(left, right) {
+        if (Array.isArray(left)) {
+            return left.includes(right);
+        }
+        return String(left ?? '').includes(String(right ?? ''));
+    }
+    isEmptyValue(value) {
+        if (value === null || value === undefined)
+            return true;
+        if (typeof value === 'string')
+            return value.trim().length === 0;
+        if (Array.isArray(value))
+            return value.length === 0;
+        return false;
+    }
+    getFieldValue(fieldId, fields) {
+        const field = fields.find(item => item.id === fieldId);
+        if (!field)
+            return undefined;
+        return this.engine.getValue(field.name);
+    }
     collectSourceValues(action, fields) {
         const values = {};
         const fieldIds = action.sourceFieldIds ?? [];
@@ -4495,12 +4757,15 @@ class JsonFormRendererComponent {
     designerState;
     schema;
     initialValues = {};
+    initialFieldLabels = {};
     mode = 'live';
     device = 'desktop';
+    showLayoutGuides = true;
     breakpoint = 'xl';
     eventLogger;
     eventApis = [];
     eventApiExecutor;
+    navigateToPage;
     uploadOnSubmit = true;
     fieldDataAccessMap;
     fieldDataAccessApi;
@@ -4545,7 +4810,8 @@ class JsonFormRendererComponent {
         }
         if (changes['eventLogger']
             || changes['eventApiExecutor']
-            || changes['eventApis']) {
+            || changes['eventApis']
+            || changes['navigateToPage']) {
             this.configureRunner();
         }
     }
@@ -4564,7 +4830,7 @@ class JsonFormRendererComponent {
                     console.warn('[ngx-form-designer] API-Only Architecture Warnings:', issues);
                 }
             }
-            this.engine = createFormEngine(this.schema, this.initialValues);
+            this.engine = createFormEngine(this.schema, this.initialValues, this.initialFieldLabels);
             this.syncRuntimeFieldDataAccessContext();
             this.configureRunner();
             // Subscribe to value changes
@@ -4617,7 +4883,8 @@ class JsonFormRendererComponent {
         this.runner = new FormEventRunner(this.engine, {
             logger: this.eventLogger,
             apiExecutor,
-            dataSourceWriter: request => this.writeEventDatasource(request)
+            dataSourceWriter: request => this.writeEventDatasource(request),
+            navigateToPage: this.navigateToPage
         });
     }
     resolveEventApiExecutor() {
@@ -4916,7 +5183,8 @@ class JsonFormRendererComponent {
             }
             mapped[field.id] = {
                 fieldName: field.name,
-                fieldValue: rawValue
+                fieldValue: rawValue,
+                ...this.buildFieldLabelMetadata(field.name)
             };
         }
         return mapped;
@@ -5003,6 +5271,12 @@ class JsonFormRendererComponent {
         }
         return [];
     }
+    buildFieldLabelMetadata(fieldName) {
+        const fieldLabel = typeof this.engine?.getFieldLabel === 'function'
+            ? this.engine.getFieldLabel(fieldName)
+            : undefined;
+        return fieldLabel === undefined ? {} : { fieldLabel };
+    }
     mergeFileMetadata(target, source) {
         const merged = { ...target };
         for (const fieldId of Object.keys(source)) {
@@ -5085,7 +5359,7 @@ class JsonFormRendererComponent {
             || typeof record['type'] === 'string';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: JsonFormRendererComponent, deps: [{ token: DesignerStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: JsonFormRendererComponent, isStandalone: true, selector: "app-json-form-renderer", inputs: { schema: "schema", initialValues: "initialValues", mode: "mode", device: "device", breakpoint: "breakpoint", eventLogger: "eventLogger", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", uploadOnSubmit: "uploadOnSubmit", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, outputs: { valueChange: "valueChange", groupedValueChange: "groupedValueChange", combinedValueChange: "combinedValueChange", validationChange: "validationChange", uploadedFilesChange: "uploadedFilesChange", formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: JsonFormRendererComponent, isStandalone: true, selector: "app-json-form-renderer", inputs: { schema: "schema", initialValues: "initialValues", initialFieldLabels: "initialFieldLabels", mode: "mode", device: "device", showLayoutGuides: "showLayoutGuides", breakpoint: "breakpoint", eventLogger: "eventLogger", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", navigateToPage: "navigateToPage", uploadOnSubmit: "uploadOnSubmit", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, outputs: { valueChange: "valueChange", groupedValueChange: "groupedValueChange", combinedValueChange: "combinedValueChange", validationChange: "validationChange", uploadedFilesChange: "uploadedFilesChange", formSubmit: "formSubmit" }, usesOnChanges: true, ngImport: i0, template: `
     <div class="form-renderer-container"
          data-fd="renderer"
          [class.is-mobile]="device === 'mobile'"
@@ -5097,6 +5371,7 @@ class JsonFormRendererComponent {
                       [engine]="engine"
                       [fields]="schema.fields"
                       [designMode]="mode === 'design'"
+                      [showLayoutGuides]="showLayoutGuides"
                       [readOnlyMode]="mode === 'preview'"
                       [device]="device"
                       [breakpoint]="breakpoint"
@@ -5106,7 +5381,7 @@ class JsonFormRendererComponent {
         </ng-container>
         <ng-template #loading>Loading form...</ng-template>
     </div>
-  `, isInline: true, styles: [".form-renderer-container{width:100%;height:100vh}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
+  `, isInline: true, styles: [".form-renderer-container{width:100%;height:100vh}.form-renderer-container.is-design{padding-top:2.25rem;height:auto;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "showLayoutGuides", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: JsonFormRendererComponent, decorators: [{
             type: Component,
@@ -5122,6 +5397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                       [engine]="engine"
                       [fields]="schema.fields"
                       [designMode]="mode === 'design'"
+                      [showLayoutGuides]="showLayoutGuides"
                       [readOnlyMode]="mode === 'preview'"
                       [device]="device"
                       [breakpoint]="breakpoint"
@@ -5136,10 +5412,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], initialValues: [{
                 type: Input
+            }], initialFieldLabels: [{
+                type: Input
             }], mode: [{
                 type: Input
             }], device: [{
                 type: Input
+            }], showLayoutGuides: [{
+                type: Input
             }], breakpoint: [{
                 type: Input
             }], eventLogger: [{
@@ -5148,6 +5428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], eventApiExecutor: [{
                 type: Input
+            }], navigateToPage: [{
+                type: Input
             }], uploadOnSubmit: [{
                 type: Input
             }], fieldDataAccessMap: [{
@@ -5347,8 +5629,262 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }] } });
 
+class FormJourneyViewerComponent {
+    journey;
+    viewOnly = false;
+    eventApis = [];
+    eventApiExecutor;
+    initialValues;
+    initialFieldLabels;
+    fieldDataAccessMap;
+    fieldDataAccessApi;
+    formContentId;
+    formContentVersion;
+    formDataChange = new EventEmitter();
+    formDataByPageChange = new EventEmitter();
+    formValidationChange = new EventEmitter();
+    uploadedFilesChange = new EventEmitter();
+    submit = new EventEmitter();
+    activePageIdChange = new EventEmitter();
+    renderer;
+    activePageId = signal('');
+    values = signal({});
+    fieldLabels = signal({});
+    activePage = computed(() => this.journey.pages.find(page => page.id === this.activePageId()) ?? null);
+    activePageIndex = computed(() => {
+        const id = this.activePageId();
+        const index = this.journey.pages.findIndex(page => page.id === id);
+        return index >= 0 ? index : 0;
+    });
+    ngOnInit() {
+        this.activePageId.set(this.journey.startPageId || this.journey.pages[0]?.id || '');
+        this.values.set(this.normalizeInitialValues(this.initialValues));
+        this.fieldLabels.set(this.normalizeInitialFieldLabels(this.initialFieldLabels));
+    }
+    ngOnChanges(changes) {
+        if (changes['initialValues']) {
+            this.values.set(this.normalizeInitialValues(this.initialValues));
+        }
+        if (changes['initialFieldLabels']) {
+            this.fieldLabels.set(this.normalizeInitialFieldLabels(this.initialFieldLabels));
+        }
+        const current = this.activePageId();
+        if (current && this.journey.pages.some(page => page.id === current))
+            return;
+        this.activePageId.set(this.journey.startPageId || this.journey.pages[0]?.id || '');
+    }
+    navigateToPage = async (pageId) => {
+        if (!this.journey.pages.some(page => page.id === pageId)) {
+            return { ok: false, reason: 'unknown-page' };
+        }
+        if (!this.viewOnly && this.renderer?.engine) {
+            const errors = this.renderer.engine.validate();
+            const validation = {
+                errors: { ...errors },
+                isValid: Object.keys(errors).length === 0
+            };
+            this.formValidationChange.emit(validation);
+            if (!validation.isValid) {
+                return { ok: false, reason: 'validation' };
+            }
+        }
+        this.activePageId.set(pageId);
+        this.activePageIdChange.emit(pageId);
+        return { ok: true };
+    };
+    onValueChange(values) {
+        const mergedScope = this.mergeValueScope(this.values(), this.toValueScope(values));
+        const mergedFieldLabels = this.mergeFieldLabelScope(this.fieldLabels(), this.toFieldLabelScope(values));
+        this.values.set(mergedScope);
+        this.fieldLabels.set(mergedFieldLabels);
+        const valuesByPage = this.toJourneyValueMapByPage(mergedScope, mergedFieldLabels);
+        this.formDataByPageChange.emit(valuesByPage);
+        this.formDataChange.emit(this.flattenJourneyValueMapByPage(valuesByPage));
+    }
+    onValidationChange(result) {
+        this.formValidationChange.emit(result);
+    }
+    onUploadedFilesChange(result) {
+        this.uploadedFilesChange.emit(result);
+    }
+    onSubmit(result) {
+        this.submit.emit(result);
+    }
+    normalizeInitialValues(value) {
+        if (!value)
+            return {};
+        return structuredClone(value);
+    }
+    normalizeInitialFieldLabels(value) {
+        if (!value)
+            return {};
+        return structuredClone(value);
+    }
+    toValueScope(values) {
+        const scope = {};
+        for (const fieldValue of Object.values(values)) {
+            scope[fieldValue.fieldName] = fieldValue.fieldValue;
+        }
+        return scope;
+    }
+    toFieldLabelScope(values) {
+        const scope = {};
+        for (const fieldValue of Object.values(values)) {
+            if (fieldValue.fieldLabel === undefined)
+                continue;
+            scope[fieldValue.fieldName] = fieldValue.fieldLabel;
+        }
+        return scope;
+    }
+    mergeValueScope(currentScope, incomingScope) {
+        return {
+            ...currentScope,
+            ...incomingScope
+        };
+    }
+    mergeFieldLabelScope(currentScope, incomingScope) {
+        return {
+            ...currentScope,
+            ...incomingScope
+        };
+    }
+    toJourneyValueMapByPage(scope, fieldLabels) {
+        const valuesByPage = {};
+        for (const page of this.journey.pages) {
+            const pageValues = {};
+            for (const field of page.schema.fields) {
+                if (!Object.prototype.hasOwnProperty.call(scope, field.name))
+                    continue;
+                pageValues[field.id] = {
+                    fieldName: field.name,
+                    fieldValue: scope[field.name],
+                    ...(fieldLabels[field.name] === undefined ? {} : { fieldLabel: fieldLabels[field.name] })
+                };
+            }
+            valuesByPage[page.id] = pageValues;
+        }
+        return valuesByPage;
+    }
+    flattenJourneyValueMapByPage(valuesByPage) {
+        const flattened = {};
+        for (const page of this.journey.pages) {
+            const pageValues = valuesByPage[page.id];
+            if (!pageValues)
+                continue;
+            for (const [fieldId, value] of Object.entries(pageValues)) {
+                flattened[fieldId] = value;
+            }
+        }
+        return flattened;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormJourneyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormJourneyViewerComponent, isStandalone: true, selector: "app-form-journey-viewer", inputs: { journey: "journey", viewOnly: "viewOnly", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", initialValues: "initialValues", initialFieldLabels: "initialFieldLabels", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, outputs: { formDataChange: "formDataChange", formDataByPageChange: "formDataByPageChange", formValidationChange: "formValidationChange", uploadedFilesChange: "uploadedFilesChange", submit: "submit", activePageIdChange: "activePageIdChange" }, viewQueries: [{ propertyName: "renderer", first: true, predicate: JsonFormRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <div class="form-journey-viewer flex h-full w-full flex-col" data-fd="form-journey-viewer">
+      <div class="border-b border-gray-200 bg-white px-4 py-2 text-xs text-gray-600" data-fd="journey-progress">
+        {{ activePageIndex() + 1 }} / {{ journey.pages.length }}
+        <span class="ml-2 font-semibold text-gray-800">{{ activePage()?.name }}</span>
+      </div>
+
+      <div class="min-h-0 flex-1" data-fd="journey-surface">
+        <app-json-form-renderer
+          *ngIf="activePage() as page"
+          [schema]="page.schema"
+          [initialValues]="values()"
+          [initialFieldLabels]="fieldLabels()"
+          [mode]="viewOnly ? 'preview' : 'live'"
+          [eventApis]="eventApis"
+          [eventApiExecutor]="eventApiExecutor"
+          [fieldDataAccessMap]="fieldDataAccessMap"
+          [fieldDataAccessApi]="fieldDataAccessApi"
+          [formContentId]="formContentId"
+          [formContentVersion]="formContentVersion"
+          [navigateToPage]="navigateToPage"
+          (valueChange)="onValueChange($event)"
+          (validationChange)="onValidationChange($event)"
+          (uploadedFilesChange)="onUploadedFilesChange($event)"
+          (formSubmit)="onSubmit($event)">
+        </app-json-form-renderer>
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "initialFieldLabels", "mode", "device", "showLayoutGuides", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "navigateToPage", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormJourneyViewerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-form-journey-viewer',
+                    standalone: true,
+                    imports: [CommonModule, JsonFormRendererComponent],
+                    template: `
+    <div class="form-journey-viewer flex h-full w-full flex-col" data-fd="form-journey-viewer">
+      <div class="border-b border-gray-200 bg-white px-4 py-2 text-xs text-gray-600" data-fd="journey-progress">
+        {{ activePageIndex() + 1 }} / {{ journey.pages.length }}
+        <span class="ml-2 font-semibold text-gray-800">{{ activePage()?.name }}</span>
+      </div>
+
+      <div class="min-h-0 flex-1" data-fd="journey-surface">
+        <app-json-form-renderer
+          *ngIf="activePage() as page"
+          [schema]="page.schema"
+          [initialValues]="values()"
+          [initialFieldLabels]="fieldLabels()"
+          [mode]="viewOnly ? 'preview' : 'live'"
+          [eventApis]="eventApis"
+          [eventApiExecutor]="eventApiExecutor"
+          [fieldDataAccessMap]="fieldDataAccessMap"
+          [fieldDataAccessApi]="fieldDataAccessApi"
+          [formContentId]="formContentId"
+          [formContentVersion]="formContentVersion"
+          [navigateToPage]="navigateToPage"
+          (valueChange)="onValueChange($event)"
+          (validationChange)="onValidationChange($event)"
+          (uploadedFilesChange)="onUploadedFilesChange($event)"
+          (formSubmit)="onSubmit($event)">
+        </app-json-form-renderer>
+      </div>
+    </div>
+  `
+                }]
+        }], propDecorators: { journey: [{
+                type: Input,
+                args: [{ required: true }]
+            }], viewOnly: [{
+                type: Input
+            }], eventApis: [{
+                type: Input
+            }], eventApiExecutor: [{
+                type: Input
+            }], initialValues: [{
+                type: Input
+            }], initialFieldLabels: [{
+                type: Input
+            }], fieldDataAccessMap: [{
+                type: Input
+            }], fieldDataAccessApi: [{
+                type: Input
+            }], formContentId: [{
+                type: Input
+            }], formContentVersion: [{
+                type: Input
+            }], formDataChange: [{
+                type: Output
+            }], formDataByPageChange: [{
+                type: Output
+            }], formValidationChange: [{
+                type: Output
+            }], uploadedFilesChange: [{
+                type: Output
+            }], submit: [{
+                type: Output
+            }], activePageIdChange: [{
+                type: Output
+            }], renderer: [{
+                type: ViewChild,
+                args: [JsonFormRendererComponent]
+            }] } });
+
 class FormViewerComponent {
     schema;
+    journey;
     set data(value) {
         this._data = value ?? {};
         this.refreshNormalizedInitialValues();
@@ -5376,10 +5912,13 @@ class FormViewerComponent {
     formContentId;
     formContentVersion;
     formDataChange = new EventEmitter();
+    formDataByPageChange = new EventEmitter();
     formValidationChange = new EventEmitter();
     uploadedFilesChange = new EventEmitter();
     submit = new EventEmitter();
+    activePageIdChange = new EventEmitter();
     renderer;
+    journeyViewer;
     // Responsive State
     breakpoint = signal('xl');
     el = inject(ElementRef);
@@ -5389,6 +5928,7 @@ class FormViewerComponent {
     _data = {};
     _dataUsesFieldNameKeys = false;
     normalizedInitialValues = {};
+    normalizedInitialFieldLabels = {};
     ngOnInit() {
         this.setupResizeObserver();
     }
@@ -5436,6 +5976,11 @@ class FormViewerComponent {
     onValidationChange(result) {
         this.formValidationChange.emit(result);
     }
+    onJourneyValueByPageChange(valuesByPage) {
+        if (this.options.emitOnChange !== false) {
+            this.formDataByPageChange.emit(valuesByPage);
+        }
+    }
     onUploadedFilesChange(result) {
         this.uploadedFilesChange.emit(result);
     }
@@ -5447,14 +5992,34 @@ class FormViewerComponent {
         // But `onSubmit` is public, let's just call it with a fake event.
         if (this.renderer) {
             this.renderer.onSubmit(new Event('submit'));
+            return;
+        }
+        if (this.journeyViewer?.renderer) {
+            this.journeyViewer.renderer.onSubmit(new Event('submit'));
         }
     }
     onRendererSubmit(result) {
         // Re-emit upwards
         this.submit.emit(result);
     }
+    onActivePageIdChange(pageId) {
+        this.activePageIdChange.emit(pageId);
+    }
+    hasJourney() {
+        return !!this.journey && Array.isArray(this.journey.pages) && this.journey.pages.length > 0;
+    }
+    resolvedSchema() {
+        if (this.schema) {
+            return this.schema;
+        }
+        if (!this.hasJourney()) {
+            return null;
+        }
+        return this.journey.pages[0]?.schema ?? null;
+    }
     refreshNormalizedInitialValues() {
         this.normalizedInitialValues = this.normalizeInitialValues(this._data);
+        this.normalizedInitialFieldLabels = this.normalizeInitialFieldLabels(this._data);
     }
     normalizeInitialValues(input) {
         if (!this.isRecord(input))
@@ -5477,6 +6042,29 @@ class FormViewerComponent {
         }
         return normalized;
     }
+    normalizeInitialFieldLabels(input) {
+        if (!this.isRecord(input))
+            return {};
+        if (this._dataUsesFieldNameKeys) {
+            const normalizedFieldNameKeys = this.normalizeFieldNameKeyedLabels(input);
+            if (normalizedFieldNameKeys) {
+                return normalizedFieldNameKeys;
+            }
+        }
+        if (!this.isOutputShapeCandidate(input))
+            return {};
+        const outputValues = new Map();
+        this.collectOutputShapeFields(input, outputValues);
+        if (outputValues.size === 0)
+            return {};
+        const normalized = {};
+        for (const [fieldName, value] of outputValues.entries()) {
+            if (value.fieldLabel === undefined)
+                continue;
+            normalized[fieldName] = value.fieldLabel;
+        }
+        return normalized;
+    }
     normalizeFieldNameKeyedValues(input) {
         if (!this.isFieldNameKeyedOutputCandidate(input)) {
             return input;
@@ -5495,6 +6083,19 @@ class FormViewerComponent {
         }
         return normalized;
     }
+    normalizeFieldNameKeyedLabels(input) {
+        if (!this.isFieldNameKeyedOutputCandidate(input)) {
+            return null;
+        }
+        const normalized = {};
+        for (const [fieldName, value] of Object.entries(input)) {
+            if (!this.isFieldIdValue(value) || value.fieldLabel === undefined) {
+                continue;
+            }
+            normalized[fieldName] = value.fieldLabel;
+        }
+        return normalized;
+    }
     collectOutputShapeFields(value, output) {
         if (this.isFormFieldValue(value)) {
             output.set(value.fieldName, value);
@@ -5585,31 +6186,56 @@ class FormViewerComponent {
         return !!value && typeof value === 'object';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormViewerComponent, isStandalone: true, selector: "app-form-viewer", inputs: { schema: "schema", data: "data", dataUsesFieldNameKeys: "dataUsesFieldNameKeys", options: "options", viewOnly: "viewOnly", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, outputs: { formDataChange: "formDataChange", formValidationChange: "formValidationChange", uploadedFilesChange: "uploadedFilesChange", submit: "submit" }, viewQueries: [{ propertyName: "renderer", first: true, predicate: JsonFormRendererComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormViewerComponent, isStandalone: true, selector: "app-form-viewer", inputs: { schema: "schema", journey: "journey", data: "data", dataUsesFieldNameKeys: "dataUsesFieldNameKeys", options: "options", viewOnly: "viewOnly", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, outputs: { formDataChange: "formDataChange", formDataByPageChange: "formDataByPageChange", formValidationChange: "formValidationChange", uploadedFilesChange: "uploadedFilesChange", submit: "submit", activePageIdChange: "activePageIdChange" }, viewQueries: [{ propertyName: "renderer", first: true, predicate: JsonFormRendererComponent, descendants: true }, { propertyName: "journeyViewer", first: true, predicate: FormJourneyViewerComponent, descendants: true }], ngImport: i0, template: `
     <div class="form-viewer-container flex flex-col h-full"
          data-fd="form-viewer"
          [attr.data-fd-mode]="viewOnly ? 'preview' : 'live'">
         <div class="flex-1 min-h-0" data-fd="form-viewer-surface">
-            <app-json-form-renderer
-                [schema]="schema"
-                [initialValues]="normalizedInitialValues"
-                [mode]="viewOnly ? 'preview' : 'live'"
-                [breakpoint]="breakpoint()"
-                [uploadOnSubmit]="true"
-                [eventApis]="eventApis"
-                [eventApiExecutor]="eventApiExecutor"
-                [fieldDataAccessMap]="fieldDataAccessMap"
-                [fieldDataAccessApi]="fieldDataAccessApi"
-                [formContentId]="formContentId"
-                [formContentVersion]="formContentVersion"
-                (valueChange)="onValueChange($event)"
-                (validationChange)="onValidationChange($event)"
-                (uploadedFilesChange)="onUploadedFilesChange($event)"
-                (formSubmit)="onRendererSubmit($event)">
-            </app-json-form-renderer>
+            <ng-container *ngIf="hasJourney(); else singleFormRenderer">
+                <app-form-journey-viewer
+                    data-fd="form-viewer-journey"
+                    [journey]="journey!"
+                    [viewOnly]="viewOnly"
+                    [eventApis]="eventApis"
+                    [eventApiExecutor]="eventApiExecutor"
+                    [initialValues]="normalizedInitialValues"
+                    [initialFieldLabels]="normalizedInitialFieldLabels"
+                    [fieldDataAccessMap]="fieldDataAccessMap"
+                    [fieldDataAccessApi]="fieldDataAccessApi"
+                    [formContentId]="formContentId"
+                    [formContentVersion]="formContentVersion"
+                    (formDataChange)="onValueChange($event)"
+                    (formDataByPageChange)="onJourneyValueByPageChange($event)"
+                    (formValidationChange)="onValidationChange($event)"
+                    (submit)="onRendererSubmit($event)"
+                    (activePageIdChange)="onActivePageIdChange($event)">
+                </app-form-journey-viewer>
+            </ng-container>
+
+            <ng-template #singleFormRenderer>
+                <app-json-form-renderer
+                    *ngIf="resolvedSchema() as currentSchema"
+                    [schema]="currentSchema"
+                    [initialValues]="normalizedInitialValues"
+                    [initialFieldLabels]="normalizedInitialFieldLabels"
+                    [mode]="viewOnly ? 'preview' : 'live'"
+                    [breakpoint]="breakpoint()"
+                    [uploadOnSubmit]="true"
+                    [eventApis]="eventApis"
+                    [eventApiExecutor]="eventApiExecutor"
+                    [fieldDataAccessMap]="fieldDataAccessMap"
+                    [fieldDataAccessApi]="fieldDataAccessApi"
+                    [formContentId]="formContentId"
+                    [formContentVersion]="formContentVersion"
+                    (valueChange)="onValueChange($event)"
+                    (validationChange)="onValidationChange($event)"
+                    (uploadedFilesChange)="onUploadedFilesChange($event)"
+                    (formSubmit)="onRendererSubmit($event)">
+                </app-json-form-renderer>
+            </ng-template>
         </div>
 
-        <div *ngIf="!viewOnly && options.showSubmitButton"
+        <div *ngIf="!viewOnly && options.showSubmitButton && !hasJourney()"
              data-fd="form-viewer-submit-bar"
              class="p-4 border-t border-gray-200 bg-white shadow-sm flex justify-end shrink-0 z-10">
             <button 
@@ -5621,35 +6247,60 @@ class FormViewerComponent {
             </button>
         </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "initialFieldLabels", "mode", "device", "showLayoutGuides", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "navigateToPage", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "component", type: FormJourneyViewerComponent, selector: "app-form-journey-viewer", inputs: ["journey", "viewOnly", "eventApis", "eventApiExecutor", "initialValues", "initialFieldLabels", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["formDataChange", "formDataByPageChange", "formValidationChange", "uploadedFilesChange", "submit", "activePageIdChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-form-viewer', standalone: true, imports: [CommonModule, JsonFormRendererComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'app-form-viewer', standalone: true, imports: [CommonModule, JsonFormRendererComponent, FormJourneyViewerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="form-viewer-container flex flex-col h-full"
          data-fd="form-viewer"
          [attr.data-fd-mode]="viewOnly ? 'preview' : 'live'">
         <div class="flex-1 min-h-0" data-fd="form-viewer-surface">
-            <app-json-form-renderer
-                [schema]="schema"
-                [initialValues]="normalizedInitialValues"
-                [mode]="viewOnly ? 'preview' : 'live'"
-                [breakpoint]="breakpoint()"
-                [uploadOnSubmit]="true"
-                [eventApis]="eventApis"
-                [eventApiExecutor]="eventApiExecutor"
-                [fieldDataAccessMap]="fieldDataAccessMap"
-                [fieldDataAccessApi]="fieldDataAccessApi"
-                [formContentId]="formContentId"
-                [formContentVersion]="formContentVersion"
-                (valueChange)="onValueChange($event)"
-                (validationChange)="onValidationChange($event)"
-                (uploadedFilesChange)="onUploadedFilesChange($event)"
-                (formSubmit)="onRendererSubmit($event)">
-            </app-json-form-renderer>
+            <ng-container *ngIf="hasJourney(); else singleFormRenderer">
+                <app-form-journey-viewer
+                    data-fd="form-viewer-journey"
+                    [journey]="journey!"
+                    [viewOnly]="viewOnly"
+                    [eventApis]="eventApis"
+                    [eventApiExecutor]="eventApiExecutor"
+                    [initialValues]="normalizedInitialValues"
+                    [initialFieldLabels]="normalizedInitialFieldLabels"
+                    [fieldDataAccessMap]="fieldDataAccessMap"
+                    [fieldDataAccessApi]="fieldDataAccessApi"
+                    [formContentId]="formContentId"
+                    [formContentVersion]="formContentVersion"
+                    (formDataChange)="onValueChange($event)"
+                    (formDataByPageChange)="onJourneyValueByPageChange($event)"
+                    (formValidationChange)="onValidationChange($event)"
+                    (submit)="onRendererSubmit($event)"
+                    (activePageIdChange)="onActivePageIdChange($event)">
+                </app-form-journey-viewer>
+            </ng-container>
+
+            <ng-template #singleFormRenderer>
+                <app-json-form-renderer
+                    *ngIf="resolvedSchema() as currentSchema"
+                    [schema]="currentSchema"
+                    [initialValues]="normalizedInitialValues"
+                    [initialFieldLabels]="normalizedInitialFieldLabels"
+                    [mode]="viewOnly ? 'preview' : 'live'"
+                    [breakpoint]="breakpoint()"
+                    [uploadOnSubmit]="true"
+                    [eventApis]="eventApis"
+                    [eventApiExecutor]="eventApiExecutor"
+                    [fieldDataAccessMap]="fieldDataAccessMap"
+                    [fieldDataAccessApi]="fieldDataAccessApi"
+                    [formContentId]="formContentId"
+                    [formContentVersion]="formContentVersion"
+                    (valueChange)="onValueChange($event)"
+                    (validationChange)="onValidationChange($event)"
+                    (uploadedFilesChange)="onUploadedFilesChange($event)"
+                    (formSubmit)="onRendererSubmit($event)">
+                </app-json-form-renderer>
+            </ng-template>
         </div>
 
-        <div *ngIf="!viewOnly && options.showSubmitButton"
+        <div *ngIf="!viewOnly && options.showSubmitButton && !hasJourney()"
              data-fd="form-viewer-submit-bar"
              class="p-4 border-t border-gray-200 bg-white shadow-sm flex justify-end shrink-0 z-10">
             <button 
@@ -5663,8 +6314,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
     </div>
   `, styles: [":host{display:block;height:100%;width:100%}\n"] }]
         }], propDecorators: { schema: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
+            }], journey: [{
+                type: Input
             }], data: [{
                 type: Input
             }], dataUsesFieldNameKeys: [{
@@ -5687,15 +6339,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], formDataChange: [{
                 type: Output
+            }], formDataByPageChange: [{
+                type: Output
             }], formValidationChange: [{
                 type: Output
             }], uploadedFilesChange: [{
                 type: Output
             }], submit: [{
                 type: Output
+            }], activePageIdChange: [{
+                type: Output
             }], renderer: [{
                 type: ViewChild,
                 args: [JsonFormRendererComponent]
+            }], journeyViewer: [{
+                type: ViewChild,
+                args: [FormJourneyViewerComponent]
             }] } });
 
 class LayerTreeNodeComponent {
@@ -7021,6 +7680,7 @@ class LayoutCanvasComponent {
     get device() { return this.state.activeDevice(); } // 'mobile' | 'desktop' for basic passing
     get breakpoint() { return this.state.activeBreakpoint(); }
     zoom = signal(1);
+    showLayoutGuides = signal(true);
     showLiveSchemaEditor = signal(false);
     liveSchemaEditorText = signal('');
     liveSchemaEditorError = signal('');
@@ -7187,6 +7847,9 @@ class LayoutCanvasComponent {
         }
         this.state.isPreviewMode.set(true);
     }
+    toggleLayoutGuides() {
+        this.showLayoutGuides.update(current => !current);
+    }
     toggleLiveSchemaEditor() {
         if (this.showLiveSchemaEditor()) {
             this.closeLiveSchemaEditor();
@@ -7489,6 +8152,18 @@ class LayoutCanvasComponent {
 
             <div class="w-px h-3.5 bg-border-default mx-0.5"></div>
 
+            <button type="button"
+                    class="inline-flex h-7 items-center rounded-[4px] border border-transparent px-2 text-[11px] font-medium transition-colors hover:border-border-default hover:bg-slate-50"
+                    [class.bg-slate-100]="!showLayoutGuides()"
+                    [attr.aria-pressed]="!showLayoutGuides()"
+                    aria-label="Toggle layout guides"
+                    title="Toggle row and column outlines"
+                    (click)="toggleLayoutGuides(); $event.stopPropagation()">
+                Guides
+            </button>
+
+            <div class="w-px h-3.5 bg-border-default mx-0.5"></div>
+
             <button class="inline-flex h-7 items-center gap-1 rounded-[4px] bg-transparent px-1.5 transition-colors hover:bg-slate-50"
                     style="font-family: 'Lato', sans-serif; font-weight: 400; color: #1c2431;"
                     (click)="preview(); $event.stopPropagation()" title="Preview Form">
@@ -7534,6 +8209,7 @@ class LayoutCanvasComponent {
                             [schema]="schema()"
                             mode="design"
                             [device]="device"
+                            [showLayoutGuides]="showLayoutGuides()"
                             [breakpoint]="breakpoint">
                          </app-json-form-renderer>
                      </div>
@@ -7650,7 +8326,7 @@ class LayoutCanvasComponent {
 
     <!-- Hidden file input for import -->
     <input type="file" #fileInput accept=".json" (change)="onFileSelected($event)" style="display: none;">
-    `, isInline: true, styles: [".canvas-grid{background-image:radial-gradient(rgba(148,163,184,.35) 1px,transparent 1px);background-size:18px 18px}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: MonacoEditorComponent, selector: "app-monaco-editor", inputs: ["value", "language", "theme", "readOnly", "minimap", "options"], outputs: ["valueChange"] }] });
+    `, isInline: true, styles: [".canvas-grid{background-image:radial-gradient(rgba(148,163,184,.35) 1px,transparent 1px);background-size:18px 18px}.custom-scrollbar::-webkit-scrollbar{width:6px;height:6px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "initialFieldLabels", "mode", "device", "showLayoutGuides", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "navigateToPage", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: MonacoEditorComponent, selector: "app-monaco-editor", inputs: ["value", "language", "theme", "readOnly", "minimap", "options"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: LayoutCanvasComponent, decorators: [{
             type: Component,
@@ -7722,6 +8398,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 
             <div class="w-px h-3.5 bg-border-default mx-0.5"></div>
 
+            <button type="button"
+                    class="inline-flex h-7 items-center rounded-[4px] border border-transparent px-2 text-[11px] font-medium transition-colors hover:border-border-default hover:bg-slate-50"
+                    [class.bg-slate-100]="!showLayoutGuides()"
+                    [attr.aria-pressed]="!showLayoutGuides()"
+                    aria-label="Toggle layout guides"
+                    title="Toggle row and column outlines"
+                    (click)="toggleLayoutGuides(); $event.stopPropagation()">
+                Guides
+            </button>
+
+            <div class="w-px h-3.5 bg-border-default mx-0.5"></div>
+
             <button class="inline-flex h-7 items-center gap-1 rounded-[4px] bg-transparent px-1.5 transition-colors hover:bg-slate-50"
                     style="font-family: 'Lato', sans-serif; font-weight: 400; color: #1c2431;"
                     (click)="preview(); $event.stopPropagation()" title="Preview Form">
@@ -7767,6 +8455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                             [schema]="schema()"
                             mode="design"
                             [device]="device"
+                            [showLayoutGuides]="showLayoutGuides()"
                             [breakpoint]="breakpoint">
                          </app-json-form-renderer>
                      </div>
@@ -8678,6 +9367,10 @@ class UiColorSwatchComponent {
     value = '#ffffff';
     valueChange = new EventEmitter();
     blur = new EventEmitter();
+    onPickerChange(color) {
+        this.value = color;
+        this.valueChange.emit(color);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiColorSwatchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: UiColorSwatchComponent, isStandalone: true, selector: "ui-color-swatch", inputs: { label: "label", hint: "hint", helpText: "helpText", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, ngImport: i0, template: `
     <ui-field-wrapper [label]="label" [hint]="hint" [helpText]="helpText">
@@ -8693,18 +9386,28 @@ class UiColorSwatchComponent {
           />
           <lucide-icon name="paintbrush" class="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 text-gray-400"></lucide-icon>
         </div>
-        <input type="color" class="w-9 h-9 border border-gray-200 rounded cursor-pointer"
-               [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)">
+        <button
+          type="button"
+          data-testid="color-swatch-picker-trigger"
+          class="h-9 w-9 shrink-0 cursor-pointer rounded border border-gray-200"
+          [style.background]="value || '#ffffff'"
+          [colorPicker]="value || '#ffffff'"
+          [cpAlphaChannel]="'disabled'"
+          [cpOutputFormat]="'hex'"
+          [cpFallbackColor]="'#ffffff'"
+          (colorPickerChange)="onPickerChange($event)"
+          aria-label="Open color picker">
+        </button>
       </div>
     </ui-field-wrapper>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiFieldWrapperComponent, selector: "ui-field-wrapper", inputs: ["label", "hint", "helpText"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "component", type: UiFieldWrapperComponent, selector: "ui-field-wrapper", inputs: ["label", "hint", "helpText"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: UiColorSwatchComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-color-swatch',
                     standalone: true,
-                    imports: [CommonModule, FormsModule, UiFieldWrapperComponent, UiIconModule],
+                    imports: [CommonModule, FormsModule, ColorPickerDirective, UiFieldWrapperComponent, UiIconModule],
                     template: `
     <ui-field-wrapper [label]="label" [hint]="hint" [helpText]="helpText">
       <div class="flex items-center gap-2">
@@ -8719,8 +9422,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
           />
           <lucide-icon name="paintbrush" class="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 text-gray-400"></lucide-icon>
         </div>
-        <input type="color" class="w-9 h-9 border border-gray-200 rounded cursor-pointer"
-               [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)">
+        <button
+          type="button"
+          data-testid="color-swatch-picker-trigger"
+          class="h-9 w-9 shrink-0 cursor-pointer rounded border border-gray-200"
+          [style.background]="value || '#ffffff'"
+          [colorPicker]="value || '#ffffff'"
+          [cpAlphaChannel]="'disabled'"
+          [cpOutputFormat]="'hex'"
+          [cpFallbackColor]="'#ffffff'"
+          (colorPickerChange)="onPickerChange($event)"
+          aria-label="Open color picker">
+        </button>
       </div>
     </ui-field-wrapper>
   `
@@ -10884,6 +11597,13 @@ class InspectorTypographySectionComponent {
         const textDecoration = String(this.style()['textDecoration'] || '');
         return textDecoration.includes('underline');
     }
+    colorValue() {
+        const color = this.style()['color'];
+        if (typeof color === 'string' && color.trim().length > 0) {
+            return color;
+        }
+        return '#1a1b1f';
+    }
     updateStyle(key, value) {
         this.styleChange.emit({ ...this.style(), [key]: value });
     }
@@ -10917,14 +11637,21 @@ class InspectorTypographySectionComponent {
       <div class="grid grid-cols-[60px_1fr] gap-2 items-center">
         <label class="text-[12px] text-highlight-orange">Color</label>
         <div class="flex items-center bg-input-dark border border-border-dark rounded px-2 py-1">
-          <input
-            type="color"
-            [ngModel]="style()['color'] || '#1a1b1f'"
-            (ngModelChange)="updateStyle('color', $event)"
-            class="w-4 h-4 border border-gray-300 rounded-sm mr-2 cursor-pointer">
+          <button
+            type="button"
+            data-testid="typography-color-picker-trigger"
+            class="mr-2 h-4 w-4 cursor-pointer rounded-sm border border-gray-300"
+            [style.background]="colorValue()"
+            [colorPicker]="colorValue()"
+            [cpAlphaChannel]="'disabled'"
+            [cpOutputFormat]="'hex'"
+            [cpFallbackColor]="'#000000'"
+            (colorPickerChange)="updateStyle('color', $event)"
+            aria-label="Typography color picker">
+          </button>
           <input
             type="text"
-            [ngModel]="style()['color'] || '#1a1b1f'"
+            [ngModel]="colorValue()"
             (ngModelChange)="updateStyle('color', $event)"
             class="bg-transparent border-none p-0 text-sm text-gray-700 focus:ring-0 w-full">
         </div>
@@ -11010,11 +11737,11 @@ class InspectorTypographySectionComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".inspector-select{height:2rem;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700);appearance:none;cursor:pointer}.inspector-select:focus{outline:none;border-color:var(--color-primary-blue)}.inspector-input-with-unit{display:flex;align-items:center;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-700)}.inspector-number-input:focus{outline:none}.inspector-unit{font-size:11px;color:var(--color-ink-400);padding-left:.25rem;padding-right:.25rem;background-color:var(--color-input-dark);height:2rem;display:flex;align-items:center;border-left:1px solid var(--color-border-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+  `, isInline: true, styles: [".inspector-select{height:2rem;padding-left:.5rem;padding-right:.5rem;font-size:.875rem;line-height:1.25rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700);appearance:none;cursor:pointer}.inspector-select:focus{outline:none;border-color:var(--color-primary-blue)}.inspector-input-with-unit{display:flex;align-items:center;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;font-size:.875rem;line-height:1.25rem;color:var(--color-ink-700)}.inspector-number-input:focus{outline:none}.inspector-unit{font-size:11px;color:var(--color-ink-400);padding-left:.25rem;padding-right:.25rem;background-color:var(--color-input-dark);height:2rem;display:flex;align-items:center;border-left:1px solid var(--color-border-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorTypographySectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inspector-typography-section', standalone: true, imports: [CommonModule, FormsModule, UiIconModule], template: `
+            args: [{ selector: 'inspector-typography-section', standalone: true, imports: [CommonModule, FormsModule, ColorPickerDirective, UiIconModule], template: `
     <div class="flex flex-col gap-3">
       <div class="grid grid-cols-[60px_1fr] gap-2 items-center">
         <label class="text-[12px] text-highlight-orange">Family</label>
@@ -11043,14 +11770,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
       <div class="grid grid-cols-[60px_1fr] gap-2 items-center">
         <label class="text-[12px] text-highlight-orange">Color</label>
         <div class="flex items-center bg-input-dark border border-border-dark rounded px-2 py-1">
-          <input
-            type="color"
-            [ngModel]="style()['color'] || '#1a1b1f'"
-            (ngModelChange)="updateStyle('color', $event)"
-            class="w-4 h-4 border border-gray-300 rounded-sm mr-2 cursor-pointer">
+          <button
+            type="button"
+            data-testid="typography-color-picker-trigger"
+            class="mr-2 h-4 w-4 cursor-pointer rounded-sm border border-gray-300"
+            [style.background]="colorValue()"
+            [colorPicker]="colorValue()"
+            [cpAlphaChannel]="'disabled'"
+            [cpOutputFormat]="'hex'"
+            [cpFallbackColor]="'#000000'"
+            (colorPickerChange)="updateStyle('color', $event)"
+            aria-label="Typography color picker">
+          </button>
           <input
             type="text"
-            [ngModel]="style()['color'] || '#1a1b1f'"
+            [ngModel]="colorValue()"
             (ngModelChange)="updateStyle('color', $event)"
             class="bg-transparent border-none p-0 text-sm text-gray-700 focus:ring-0 w-full">
         </div>
@@ -11413,12 +12147,19 @@ class InspectorBordersSectionComponent {
             <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
               <label class="section-label text-[12px]" for="inspector-border-color">Color</label>
               <div class="flex min-w-0 items-center gap-2 rounded-md border border-border-dark bg-input-dark px-2 py-1">
-                <input
+                <button
                   id="inspector-border-color"
-                  type="color"
-                  [ngModel]="getColorInputValue()"
-                  (ngModelChange)="updateStyle('borderColor', $event)"
-                  class="h-7 w-7 shrink-0 cursor-pointer rounded border border-border-dark bg-white">
+                  type="button"
+                  data-testid="border-color-picker-trigger"
+                  class="h-7 w-7 shrink-0 cursor-pointer rounded border border-border-dark bg-white"
+                  [style.background]="getColorInputValue()"
+                  [colorPicker]="getColorInputValue()"
+                  [cpAlphaChannel]="'disabled'"
+                  [cpOutputFormat]="'hex'"
+                  [cpFallbackColor]="'#000000'"
+                  (colorPickerChange)="updateStyle('borderColor', $event)"
+                  aria-label="Border color picker">
+                </button>
 
                 <input
                   data-testid="border-color-input"
@@ -11433,11 +12174,11 @@ class InspectorBordersSectionComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, styles: [".section-label{font-size:12px;color:var(--color-ink-400)}.inspector-input-with-unit{display:flex;align-items:center;min-width:0;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{width:100%;min-width:0;height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;color:var(--color-ink-700);font-size:.875rem;line-height:1.25rem}.inspector-number-input:focus{outline:none}.inspector-unit{display:flex;align-items:center;height:2rem;padding-left:.5rem;padding-right:.5rem;border-left:1px solid var(--color-border-dark);font-size:11px;color:var(--color-ink-400);background-color:var(--color-input-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, styles: [".section-label{font-size:12px;color:var(--color-ink-400)}.inspector-input-with-unit{display:flex;align-items:center;min-width:0;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);overflow:hidden}.inspector-number-input{width:100%;min-width:0;height:2rem;padding-left:.5rem;padding-right:.5rem;background-color:transparent;border:none;color:var(--color-ink-700);font-size:.875rem;line-height:1.25rem}.inspector-number-input:focus{outline:none}.inspector-unit{display:flex;align-items:center;height:2rem;padding-left:.5rem;padding-right:.5rem;border-left:1px solid var(--color-border-dark);font-size:11px;color:var(--color-ink-400);background-color:var(--color-input-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorBordersSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inspector-borders-section', standalone: true, imports: [CommonModule, FormsModule], template: `
+            args: [{ selector: 'inspector-borders-section', standalone: true, imports: [CommonModule, FormsModule, ColorPickerDirective], template: `
     <div class="flex flex-col gap-4">
       <div class="grid grid-cols-[56px_1fr] gap-3 items-start">
         <span class="section-label text-[12px] pt-2">Radius</span>
@@ -11530,12 +12271,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             <div class="grid grid-cols-[52px_1fr] gap-2 items-center">
               <label class="section-label text-[12px]" for="inspector-border-color">Color</label>
               <div class="flex min-w-0 items-center gap-2 rounded-md border border-border-dark bg-input-dark px-2 py-1">
-                <input
+                <button
                   id="inspector-border-color"
-                  type="color"
-                  [ngModel]="getColorInputValue()"
-                  (ngModelChange)="updateStyle('borderColor', $event)"
-                  class="h-7 w-7 shrink-0 cursor-pointer rounded border border-border-dark bg-white">
+                  type="button"
+                  data-testid="border-color-picker-trigger"
+                  class="h-7 w-7 shrink-0 cursor-pointer rounded border border-border-dark bg-white"
+                  [style.background]="getColorInputValue()"
+                  [colorPicker]="getColorInputValue()"
+                  [cpAlphaChannel]="'disabled'"
+                  [cpOutputFormat]="'hex'"
+                  [cpFallbackColor]="'#000000'"
+                  (colorPickerChange)="updateStyle('borderColor', $event)"
+                  aria-label="Border color picker">
+                </button>
 
                 <input
                   data-testid="border-color-input"
@@ -12066,19 +12814,57 @@ class InspectorBackgroundsSectionComponent {
         { label: 'Right', value: 'right' }
     ];
     showImageUrl = false;
+    backgroundColorValue() {
+        return this.normalizeBackgroundColor(this.style()['backgroundColor']);
+    }
     getBackgroundPreview() {
-        const bg = this.style()['backgroundColor'];
-        if (!bg || bg === 'transparent') {
-            return `linear-gradient(45deg, #ccc 25%, transparent 25%), 
-              linear-gradient(-45deg, #ccc 25%, transparent 25%), 
-              linear-gradient(45deg, transparent 75%, #ccc 75%), 
-              linear-gradient(-45deg, transparent 75%, #ccc 75%)`;
-        }
-        return bg;
+        return this.backgroundColorValue();
+    }
+    onBackgroundPickerChange(value) {
+        this.updateStyle('backgroundColor', this.normalizeBackgroundColor(value));
+    }
+    onBackgroundColorInputChange(value) {
+        this.updateStyle('backgroundColor', this.normalizeBackgroundColor(value));
     }
     updateStyle(key, value) {
         this.styleChange.emit({ ...this.style(), [key]: value });
     }
+    normalizeBackgroundColor(value) {
+        if (typeof value !== 'string')
+            return '#ffffff';
+        const trimmed = value.trim();
+        if (!trimmed)
+            return '#ffffff';
+        if (this.isTransparentColor(trimmed))
+            return '#ffffff';
+        return trimmed;
+    }
+    isTransparentColor(value) {
+        const compact = value.replace(/\s+/g, '').toLowerCase();
+        if (compact === 'transparent')
+            return true;
+        if (compact.startsWith('rgba(') && compact.endsWith(')')) {
+            const parts = compact.slice(5, -1).split(',');
+            if (parts.length === 4) {
+                const alpha = Number.parseFloat(parts[3]);
+                return Number.isFinite(alpha) && alpha === 0;
+            }
+        }
+        if (compact.startsWith('hsla(') && compact.endsWith(')')) {
+            const parts = compact.slice(5, -1).split(',');
+            if (parts.length === 4) {
+                const alpha = Number.parseFloat(parts[3]);
+                return Number.isFinite(alpha) && alpha === 0;
+            }
+        }
+        if (/^#[0-9a-f]{4}$/i.test(compact)) {
+            return compact[4] === '0';
+        }
+        if (/^#[0-9a-f]{8}$/i.test(compact)) {
+            return compact.endsWith('00');
+        }
+        return false;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorBackgroundsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: InspectorBackgroundsSectionComponent, isStandalone: true, selector: "inspector-backgrounds-section", inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { styleChange: "styleChange" }, ngImport: i0, template: `
     <div class="flex flex-col gap-3">
@@ -12092,13 +12878,22 @@ class InspectorBackgroundsSectionComponent {
       <div class="grid grid-cols-[60px_1fr] gap-2 items-center">
         <label class="text-[11px] text-gray-500">Color</label>
         <div class="flex items-center bg-input-dark border border-border-dark rounded px-2 py-1">
-          <div class="w-4 h-4 rounded-sm mr-2 border border-gray-300 overflow-hidden"
-               [style.background]="getBackgroundPreview()">
-          </div>
+          <button
+            type="button"
+            data-testid="background-color-picker-trigger"
+            class="mr-2 h-4 w-4 cursor-pointer rounded-sm border border-gray-300 overflow-hidden"
+            [style.background]="getBackgroundPreview()"
+            [colorPicker]="backgroundColorValue()"
+            [cpAlphaChannel]="'disabled'"
+            [cpOutputFormat]="'hex'"
+            [cpFallbackColor]="'#ffffff'"
+            (colorPickerChange)="onBackgroundPickerChange($event)"
+            aria-label="Background color picker">
+          </button>
           <input
             type="text"
-            [ngModel]="style()['backgroundColor'] || 'transparent'"
-            (ngModelChange)="updateStyle('backgroundColor', $event)"
+            [ngModel]="backgroundColorValue()"
+            (ngModelChange)="onBackgroundColorInputChange($event)"
             class="bg-transparent border-none p-0 text-xs text-gray-700 focus:ring-0 w-full">
         </div>
       </div>
@@ -12135,11 +12930,11 @@ class InspectorBackgroundsSectionComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".inspector-input{height:1.75rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700)}.inspector-input:focus{outline:none;border-color:var(--color-primary-blue)}.inspector-select{height:1.75rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700);appearance:none;cursor:pointer}.inspector-select:focus{outline:none;border-color:var(--color-primary-blue)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
+  `, isInline: true, styles: [".inspector-input{height:1.75rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700)}.inspector-input:focus{outline:none;border-color:var(--color-primary-blue)}.inspector-select{height:1.75rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;background-color:var(--color-input-dark);border:1px solid var(--color-border-dark);border-radius:var(--radius-md);color:var(--color-ink-700);appearance:none;cursor:pointer}.inspector-select:focus{outline:none;border-color:var(--color-primary-blue)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: InspectorBackgroundsSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inspector-backgrounds-section', standalone: true, imports: [CommonModule, FormsModule, UiIconModule], template: `
+            args: [{ selector: 'inspector-backgrounds-section', standalone: true, imports: [CommonModule, FormsModule, ColorPickerDirective, UiIconModule], template: `
     <div class="flex flex-col gap-3">
       <!-- Image & Gradient -->
       <div class="flex justify-between items-center group cursor-pointer py-1">
@@ -12151,13 +12946,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
       <div class="grid grid-cols-[60px_1fr] gap-2 items-center">
         <label class="text-[11px] text-gray-500">Color</label>
         <div class="flex items-center bg-input-dark border border-border-dark rounded px-2 py-1">
-          <div class="w-4 h-4 rounded-sm mr-2 border border-gray-300 overflow-hidden"
-               [style.background]="getBackgroundPreview()">
-          </div>
+          <button
+            type="button"
+            data-testid="background-color-picker-trigger"
+            class="mr-2 h-4 w-4 cursor-pointer rounded-sm border border-gray-300 overflow-hidden"
+            [style.background]="getBackgroundPreview()"
+            [colorPicker]="backgroundColorValue()"
+            [cpAlphaChannel]="'disabled'"
+            [cpOutputFormat]="'hex'"
+            [cpFallbackColor]="'#ffffff'"
+            (colorPickerChange)="onBackgroundPickerChange($event)"
+            aria-label="Background color picker">
+          </button>
           <input
             type="text"
-            [ngModel]="style()['backgroundColor'] || 'transparent'"
-            (ngModelChange)="updateStyle('backgroundColor', $event)"
+            [ngModel]="backgroundColorValue()"
+            (ngModelChange)="onBackgroundColorInputChange($event)"
             class="bg-transparent border-none p-0 text-xs text-gray-700 focus:ring-0 w-full">
         </div>
       </div>
@@ -18135,6 +18939,9 @@ class FormPreviewComponent {
     fieldDataAccessApi;
     formContentId;
     formContentVersion;
+    pages = [];
+    activePageId = null;
+    pageSelect = new EventEmitter();
     breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
     breakpoint = signal('xl');
     // Derived device type for renderer compatibility
@@ -18149,6 +18956,25 @@ class FormPreviewComponent {
     setBreakpoint(bp) {
         this.breakpoint.set(bp);
     }
+    hasJourneyPages() {
+        return this.pages.length > 1;
+    }
+    isPageActive(pageId) {
+        return this.resolveActivePageId() === pageId;
+    }
+    requestPageSelect(pageId) {
+        if (this.resolveActivePageId() === pageId)
+            return;
+        this.pageSelect.emit(pageId);
+    }
+    navigateToPage = async (pageId) => {
+        const targetPageId = pageId?.trim();
+        if (!targetPageId || !this.pages.some(page => page.id === targetPageId)) {
+            return { ok: false, reason: 'unknown-page' };
+        }
+        this.requestPageSelect(targetPageId);
+        return { ok: true };
+    };
     getContainerWidth() {
         const bp = this.breakpoint();
         switch (bp) {
@@ -18237,8 +19063,16 @@ class FormPreviewComponent {
             return false;
         return /^[A-Za-z0-9+/]+={0,2}$/.test(value);
     }
+    trackPageById(_, page) {
+        return page.id;
+    }
+    resolveActivePageId() {
+        if (this.activePageId)
+            return this.activePageId;
+        return this.pages[0]?.id ?? '';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormPreviewComponent, deps: [{ token: DesignerStateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormPreviewComponent, isStandalone: true, selector: "app-form-preview", inputs: { eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormPreviewComponent, isStandalone: true, selector: "app-form-preview", inputs: { eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", fieldDataAccessMap: "fieldDataAccessMap", fieldDataAccessApi: "fieldDataAccessApi", formContentId: "formContentId", formContentVersion: "formContentVersion", pages: "pages", activePageId: "activePageId" }, outputs: { pageSelect: "pageSelect" }, ngImport: i0, template: `
     <div class="fixed inset-0 bg-white z-[100] flex flex-col animate-in fade-in duration-200">
         <!-- Toolbar -->
         <div class="h-14 border-b border-gray-200 flex items-center justify-between px-4 bg-white shadow-sm shrink-0">
@@ -18269,6 +19103,28 @@ class FormPreviewComponent {
 
         <!-- Content Area -->
         <div class="flex-1 flex overflow-hidden bg-gray-50">
+            <aside *ngIf="hasJourneyPages()" class="w-64 shrink-0 border-r border-gray-200 bg-white flex flex-col">
+                <div class="px-4 py-3 border-b border-gray-200">
+                    <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Journey</div>
+                    <div class="mt-1 text-xs text-gray-500">Switch preview page</div>
+                </div>
+                <div class="flex-1 overflow-y-auto p-2">
+                    <button
+                        *ngFor="let page of pages; trackBy: trackPageById"
+                        type="button"
+                        class="mb-2 w-full rounded-md border px-3 py-2 text-left transition-colors"
+                        [class.border-blue-200]="isPageActive(page.id)"
+                        [class.bg-blue-50]="isPageActive(page.id)"
+                        [class.text-blue-700]="isPageActive(page.id)"
+                        [class.border-gray-200]="!isPageActive(page.id)"
+                        [class.bg-white]="!isPageActive(page.id)"
+                        [class.text-gray-700]="!isPageActive(page.id)"
+                        (click)="requestPageSelect(page.id)">
+                        <div class="text-xs font-semibold truncate">{{ page.name }}</div>
+                        <div class="mt-0.5 text-[10px] text-gray-500 truncate">{{ page.route }}</div>
+                    </button>
+                </div>
+            </aside>
             
             <!-- LEFT: Form Render Area -->
             <div class="flex-1 overflow-auto flex justify-center items-start p-8 relative">
@@ -18290,6 +19146,7 @@ class FormPreviewComponent {
                           [breakpoint]="breakpoint()"
                           [eventApis]="eventApis"
                           [eventApiExecutor]="eventApiExecutor"
+                          [navigateToPage]="navigateToPage"
                           [fieldDataAccessMap]="fieldDataAccessMap"
                           [fieldDataAccessApi]="fieldDataAccessApi"
                           [formContentId]="formContentId"
@@ -18318,7 +19175,7 @@ class FormPreviewComponent {
             </div>
         </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.JsonPipe, name: "json" }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: i3$1.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "initialFieldLabels", "mode", "device", "showLayoutGuides", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "navigateToPage", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormPreviewComponent, decorators: [{
             type: Component,
@@ -18357,6 +19214,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
 
         <!-- Content Area -->
         <div class="flex-1 flex overflow-hidden bg-gray-50">
+            <aside *ngIf="hasJourneyPages()" class="w-64 shrink-0 border-r border-gray-200 bg-white flex flex-col">
+                <div class="px-4 py-3 border-b border-gray-200">
+                    <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">Journey</div>
+                    <div class="mt-1 text-xs text-gray-500">Switch preview page</div>
+                </div>
+                <div class="flex-1 overflow-y-auto p-2">
+                    <button
+                        *ngFor="let page of pages; trackBy: trackPageById"
+                        type="button"
+                        class="mb-2 w-full rounded-md border px-3 py-2 text-left transition-colors"
+                        [class.border-blue-200]="isPageActive(page.id)"
+                        [class.bg-blue-50]="isPageActive(page.id)"
+                        [class.text-blue-700]="isPageActive(page.id)"
+                        [class.border-gray-200]="!isPageActive(page.id)"
+                        [class.bg-white]="!isPageActive(page.id)"
+                        [class.text-gray-700]="!isPageActive(page.id)"
+                        (click)="requestPageSelect(page.id)">
+                        <div class="text-xs font-semibold truncate">{{ page.name }}</div>
+                        <div class="mt-0.5 text-[10px] text-gray-500 truncate">{{ page.route }}</div>
+                    </button>
+                </div>
+            </aside>
             
             <!-- LEFT: Form Render Area -->
             <div class="flex-1 overflow-auto flex justify-center items-start p-8 relative">
@@ -18378,6 +19257,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                           [breakpoint]="breakpoint()"
                           [eventApis]="eventApis"
                           [eventApiExecutor]="eventApiExecutor"
+                          [navigateToPage]="navigateToPage"
                           [fieldDataAccessMap]="fieldDataAccessMap"
                           [fieldDataAccessApi]="fieldDataAccessApi"
                           [formContentId]="formContentId"
@@ -18420,6 +19300,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], formContentVersion: [{
                 type: Input
+            }], pages: [{
+                type: Input
+            }], activePageId: [{
+                type: Input
+            }], pageSelect: [{
+                type: Output
             }] } });
 
 class JsonFormDesignerComponent {
@@ -18427,6 +19313,14 @@ class JsonFormDesignerComponent {
     mode = 'edit';
     eventApis = [];
     eventApiExecutor;
+    pages = null;
+    activePageId = null;
+    canRemovePage = false;
+    pageAdd = new EventEmitter();
+    pageSelect = new EventEmitter();
+    pageRemove = new EventEmitter();
+    pageRename = new EventEmitter();
+    pageRouteChange = new EventEmitter();
     state = inject(DesignerStateService);
     ngOnInit() {
         this.state.setFlavor(this.flavor);
@@ -18446,7 +19340,7 @@ class JsonFormDesignerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: JsonFormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: JsonFormDesignerComponent, isStandalone: true, selector: "app-json-form-designer", inputs: { flavor: "flavor", mode: "mode", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor" }, host: { classAttribute: "fd-designer-host block h-full w-full" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: JsonFormDesignerComponent, isStandalone: true, selector: "app-json-form-designer", inputs: { flavor: "flavor", mode: "mode", eventApis: "eventApis", eventApiExecutor: "eventApiExecutor", pages: "pages", activePageId: "activePageId", canRemovePage: "canRemovePage" }, outputs: { pageAdd: "pageAdd", pageSelect: "pageSelect", pageRemove: "pageRemove", pageRename: "pageRename", pageRouteChange: "pageRouteChange" }, host: { classAttribute: "fd-designer-host block h-full w-full" }, usesOnChanges: true, ngImport: i0, template: `
     <div
       class="fd-designer flex h-full w-full overflow-hidden relative"
       data-fd="designer"
@@ -18459,7 +19353,16 @@ class JsonFormDesignerComponent {
             [style.opacity]="state.isLeftPanelCollapsed() ? '0' : '1'"
             [class.border-none]="state.isLeftPanelCollapsed()">
           <div class="h-full" [class.pointer-events-none]="state.isLeftPanelCollapsed()">
-            <app-field-palette></app-field-palette>
+            <app-field-palette
+              [pages]="pages"
+              [activePageId]="activePageId"
+              [canRemovePage]="canRemovePage"
+              (pageAdd)="pageAdd.emit()"
+              (pageSelect)="pageSelect.emit($event)"
+              (pageRemove)="pageRemove.emit($event)"
+              (pageRename)="pageRename.emit($event)"
+              (pageRouteChange)="pageRouteChange.emit($event)">
+            </app-field-palette>
           </div>
        </div>
 
@@ -18479,11 +19382,14 @@ class JsonFormDesignerComponent {
           class="fd-designer-preview"
           data-fd-region="preview"
           *ngIf="state.isPreviewMode()"
+          [pages]="pages ?? []"
+          [activePageId]="activePageId"
           [eventApis]="eventApis"
-          [eventApiExecutor]="eventApiExecutor">
+          [eventApiExecutor]="eventApiExecutor"
+          (pageSelect)="pageSelect.emit($event)">
        </app-form-preview>
     </div>
-  `, isInline: true, styles: [".custom-scrollbar::-webkit-scrollbar{width:4px;height:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: FieldPaletteComponent, selector: "app-field-palette", inputs: ["sectionLibrary", "pages", "activePageId", "canRemovePage", "savedSections", "bricks"], outputs: ["sectionInsert", "pageAdd", "pageSelect", "pageRemove", "pageRename", "pageRouteChange", "savedSectionInsert", "savedSectionRemove", "savedSectionCreateRequested"] }, { kind: "component", type: LayoutCanvasComponent, selector: "app-layout-canvas", inputs: ["previewMode"], outputs: ["previewRequested"] }, { kind: "component", type: PropertiesPanelComponent, selector: "app-properties-panel" }, { kind: "component", type: FormPreviewComponent, selector: "app-form-preview", inputs: ["eventApis", "eventApiExecutor", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"] }] });
+  `, isInline: true, styles: [".custom-scrollbar::-webkit-scrollbar{width:4px;height:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: FieldPaletteComponent, selector: "app-field-palette", inputs: ["sectionLibrary", "pages", "activePageId", "canRemovePage", "savedSections", "bricks"], outputs: ["sectionInsert", "pageAdd", "pageSelect", "pageRemove", "pageRename", "pageRouteChange", "savedSectionInsert", "savedSectionRemove", "savedSectionCreateRequested"] }, { kind: "component", type: LayoutCanvasComponent, selector: "app-layout-canvas", inputs: ["previewMode"], outputs: ["previewRequested"] }, { kind: "component", type: PropertiesPanelComponent, selector: "app-properties-panel" }, { kind: "component", type: FormPreviewComponent, selector: "app-form-preview", inputs: ["eventApis", "eventApiExecutor", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion", "pages", "activePageId"], outputs: ["pageSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: JsonFormDesignerComponent, decorators: [{
             type: Component,
@@ -18502,7 +19408,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [style.opacity]="state.isLeftPanelCollapsed() ? '0' : '1'"
             [class.border-none]="state.isLeftPanelCollapsed()">
           <div class="h-full" [class.pointer-events-none]="state.isLeftPanelCollapsed()">
-            <app-field-palette></app-field-palette>
+            <app-field-palette
+              [pages]="pages"
+              [activePageId]="activePageId"
+              [canRemovePage]="canRemovePage"
+              (pageAdd)="pageAdd.emit()"
+              (pageSelect)="pageSelect.emit($event)"
+              (pageRemove)="pageRemove.emit($event)"
+              (pageRename)="pageRename.emit($event)"
+              (pageRouteChange)="pageRouteChange.emit($event)">
+            </app-field-palette>
           </div>
        </div>
 
@@ -18522,8 +19437,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
           class="fd-designer-preview"
           data-fd-region="preview"
           *ngIf="state.isPreviewMode()"
+          [pages]="pages ?? []"
+          [activePageId]="activePageId"
           [eventApis]="eventApis"
-          [eventApiExecutor]="eventApiExecutor">
+          [eventApiExecutor]="eventApiExecutor"
+          (pageSelect)="pageSelect.emit($event)">
        </app-form-preview>
     </div>
   `, styles: [".custom-scrollbar::-webkit-scrollbar{width:4px;height:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background:transparent;border-radius:10px}.custom-scrollbar:hover::-webkit-scrollbar-thumb{background:#00000026}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:transparent transparent}.custom-scrollbar:hover{scrollbar-color:rgba(0,0,0,.15) transparent}\n"] }]
@@ -18535,6 +19453,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Input
             }], eventApiExecutor: [{
                 type: Input
+            }], pages: [{
+                type: Input
+            }], activePageId: [{
+                type: Input
+            }], canRemovePage: [{
+                type: Input
+            }], pageAdd: [{
+                type: Output
+            }], pageSelect: [{
+                type: Output
+            }], pageRemove: [{
+                type: Output
+            }], pageRename: [{
+                type: Output
+            }], pageRouteChange: [{
+                type: Output
             }] } });
 
 // ---------------------------------------------------------------------------
@@ -19734,115 +20668,80 @@ const FORM_DESIGNER_AI_TOOL_PLUGIN = {
     ],
 };
 
-class AiToolRegistryService {
-    state;
-    widgetDefs;
-    eventApis;
-    plugins;
-    toolByName;
-    constructor() {
-        this.state = inject(DesignerStateService);
-        const injectedWidgetDefs = inject(WIDGET_DEFINITIONS, { optional: true }) ?? [];
-        this.widgetDefs = injectedWidgetDefs.flat();
-        this.eventApis = [];
-        this.plugins = [FORM_DESIGNER_AI_TOOL_PLUGIN];
-        this.toolByName = this.buildToolIndex(this.plugins);
-    }
-    /**
-     * Create an instance directly for testing without Angular DI.
-     */
-    static forTest(state, eventApis, plugins, widgetDefs) {
-        const instance = Object.create(AiToolRegistryService.prototype);
-        instance.state = state;
-        instance.eventApis = eventApis ? [...eventApis] : [];
-        instance.widgetDefs = widgetDefs ? [...widgetDefs] : [];
-        instance.plugins = plugins?.length ? [...plugins] : [FORM_DESIGNER_AI_TOOL_PLUGIN];
-        instance.toolByName = instance.buildToolIndex(instance.plugins);
-        return instance;
-    }
-    describeTools() {
-        return this.plugins.flatMap((plugin) => plugin.tools.map((tool) => ({
-            name: tool.name,
-            description: tool.summary,
-            summary: tool.summary,
-            domain: tool.domain,
-            readOnly: tool.readOnly,
-            tags: tool.tags,
-            whenToUse: tool.whenToUse,
-            whenNotToUse: tool.whenNotToUse,
-            exampleIntents: tool.exampleIntents,
-            requiresSelection: tool.requiresSelection,
-            requiresCapabilities: tool.requiresCapabilities,
-            requiredAuthScopes: tool.requiredAuthScopes,
-            parametersSchema: tool.parametersSchema,
-        })));
+class FormDesignerAiFeatureStateService {
+    widgetDefinitions = (inject(WIDGET_DEFINITIONS, { optional: true }) ?? []).flat();
+    eventApisSignal = signal([]);
+    setEventApis(apis) {
+        this.eventApisSignal.set([...apis]);
     }
-    async execute(name, args) {
-        const tool = this.toolByName.get(name);
-        if (!tool) {
-            return {
-                ok: false,
-                result: null,
-                error: `Unknown tool: "${name}"`,
-            };
-        }
-        const context = this.createContext();
-        if (tool.isApplicable && !tool.isApplicable(context)) {
-            return {
-                ok: false,
-                result: null,
-                error: `Tool "${name}" is not applicable in current context.`,
-            };
-        }
-        const result = await tool.execute(context, args);
-        return result;
+    createToolContext(state) {
+        return {
+            state,
+            eventApis: this.eventApisSignal(),
+            widgetDefs: this.widgetDefinitions,
+        };
     }
-    getDiscoveryContext() {
+    createDiscoveryContext(state) {
         return {
             workspace: 'designer',
-            readOnly: this.state.isReadOnly(),
-            hasSelection: !!this.state.selectedNodeId(),
+            readOnly: state.isReadOnly(),
+            hasSelection: !!state.selectedNodeId(),
             capabilities: {
-                eventApis: this.eventApis.length > 0,
-                widgetCatalog: this.widgetDefs.length > 0,
+                eventApis: this.eventApisSignal().length > 0,
+                widgetCatalog: this.widgetDefinitions.length > 0,
             },
         };
     }
-    /** Allow host/shell to update available event APIs at runtime. */
-    setEventApis(apis) {
-        this.eventApis = [...apis];
-    }
-    /** Allow host/shell to update widget catalog at runtime. */
-    setWidgetDefinitions(widgetDefs) {
-        this.widgetDefs = [...widgetDefs];
-    }
-    /** Register additional plain TS plugins without requiring Angular DI contracts. */
-    registerPlugin(plugin) {
-        this.plugins = [...this.plugins, plugin];
-        this.toolByName = this.buildToolIndex(this.plugins);
-    }
-    createContext() {
-        return {
-            state: this.state,
-            eventApis: this.eventApis,
-            widgetDefs: this.widgetDefs,
-        };
-    }
-    buildToolIndex(plugins) {
-        const index = new Map();
-        for (const plugin of plugins) {
-            for (const tool of plugin.tools) {
-                index.set(tool.name, tool);
-            }
-        }
-        return index;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiToolRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiToolRegistryService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormDesignerAiFeatureStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormDesignerAiFeatureStateService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiToolRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormDesignerAiFeatureStateService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
+function bindFormDesignerTools(getContext) {
+    return FORM_DESIGNER_AI_TOOL_PLUGIN.tools.map((tool) => defineAiTool({
+        name: tool.name,
+        summary: tool.summary,
+        domain: tool.domain,
+        readOnly: tool.readOnly,
+        tags: tool.tags,
+        whenToUse: tool.whenToUse,
+        whenNotToUse: tool.whenNotToUse,
+        exampleIntents: tool.exampleIntents,
+        requiresSelection: tool.requiresSelection,
+        requiresCapabilities: tool.requiresCapabilities,
+        requiredAuthScopes: tool.requiredAuthScopes,
+        parametersSchema: tool.parametersSchema,
+        isApplicable: tool.isApplicable ? () => tool.isApplicable(getContext()) : undefined,
+        execute: async (args) => {
+            const result = await tool.execute(getContext(), args);
+            return result;
+        },
+    }));
+}
+function buildFormDesignerSystemPrompt(state) {
+    const mode = state.isReadOnly() ? 'read-only' : 'editable';
+    return [
+        'You are assisting with a JSON form designer workspace.',
+        `The current designer session is ${mode}.`,
+        'Prefer the registered tools for inspecting and editing the form schema instead of describing hypothetical changes.',
+        'Keep responses concise and grounded in the current schema state.',
+    ].join(' ');
+}
+function provideFormDesignerAngaiFeature() {
+    return [
+        FormDesignerAiFeatureStateService,
+        ...provideAngaiFeature(() => {
+            const state = inject(DesignerStateService);
+            const featureState = inject(FormDesignerAiFeatureStateService);
+            return {
+                tools: bindFormDesignerTools(() => featureState.createToolContext(state)),
+                discoveryContext: () => featureState.createDiscoveryContext(state),
+                systemPrompt: () => buildFormDesignerSystemPrompt(state),
+            };
+        }),
+    ];
+}
 
 const parseTemplateSchema = (schema) => {
     return parseSchema(JSON.stringify(schema));
@@ -21588,6 +22487,622 @@ const TRANSACTION_KYC_REVIEW_TEMPLATE = {
     }
 };
 const TRANSACTION_KYC_REVIEW_SCHEMA = parseTemplateSchema(TRANSACTION_KYC_REVIEW_TEMPLATE);
+const JOURNEY_BRANCHING_TEMPLATE_STEP_ONE = {
+    "id": "template-journey-branch-step-1",
+    "version": "1.0.0",
+    "schemaVersion": "1.0.0",
+    "flavor": "form",
+    "title": "Step 1 · Intake + Routing",
+    "metadata": {
+        "example": true,
+        "scenario": "journey-branching",
+        "page": "intake"
+    },
+    "fields": [
+        {
+            "id": "fld_search_country",
+            "widgetId": "core.form:search",
+            "name": "branchSearchTerm",
+            "type": "search",
+            "label": "Search Country",
+            "placeholder": "Type country code or name",
+            "dataConfig": {
+                "type": "source",
+                "datasourceId": "journey_branch_ds_country_search",
+                "labelKey": "label",
+                "valueKey": "value",
+                "searchColumns": ["label", "value", "region"],
+                "optionsLimit": 30
+            },
+            "events": [
+                {
+                    "id": "evt_search_country",
+                    "on": "change",
+                    "enabled": true,
+                    "actions": [
+                        {
+                            "type": "api",
+                            "apiId": "api.country.search",
+                            "datasourceId": "journey_branch_ds_country_search",
+                            "sourceFieldIds": ["fld_search_country"],
+                            "inputTransformScript": "const query = String(context.formValues.branchSearchTerm ?? \"\").trim(); return { query };",
+                            "outputTransformScript": "return Array.isArray(output?.items) ? output.items.map(item => ({ label: item.name, value: item.code, region: item.region })) : [];"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "fld_country",
+            "widgetId": "core.form:select",
+            "name": "countryCode",
+            "type": "select",
+            "label": "Country",
+            "placeholder": "Select a country",
+            "dataConfig": {
+                "type": "source",
+                "datasourceId": "journey_branch_ds_country_search",
+                "labelKey": "label",
+                "valueKey": "value",
+                "searchEnabled": false,
+                "optionsLimit": 30
+            },
+            "events": [
+                {
+                    "id": "evt_country_cities",
+                    "on": "change",
+                    "enabled": true,
+                    "actions": [
+                        {
+                            "type": "api",
+                            "apiId": "api.country.cities",
+                            "datasourceId": "journey_branch_ds_country_cities",
+                            "sourceFieldIds": ["fld_country"],
+                            "inputTransformScript": "const countryCode = String(context.formValues.countryCode ?? context.event.value ?? \"\"); return { countryCode };",
+                            "outputTransformScript": "return Array.isArray(output?.cities) ? output.cities.map(city => ({ cityCode: city.code, cityName: city.name, population: city.population, weather: city.weather })) : [];"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "fld_priority_route",
+            "widgetId": "core.form:checkbox",
+            "name": "priorityRoute",
+            "type": "checkbox",
+            "label": "High priority route (skip to page 3)"
+        },
+        {
+            "id": "btn_continue",
+            "widgetId": "core.form:form-button",
+            "name": "continueWithBranch",
+            "type": "form-button",
+            "label": "Continue",
+            "variant": "primary",
+            "buttonType": "button",
+            "events": [
+                {
+                    "id": "evt_continue_with_branch",
+                    "on": "click",
+                    "enabled": true,
+                    "actions": [
+                        {
+                            "type": "api",
+                            "apiId": "api.country.profile",
+                            "datasourceId": "journey_branch_ds_country_profile",
+                            "sourceFieldIds": ["fld_country"],
+                            "inputTransformScript": "const countryCode = String(context.formValues.countryCode ?? \"\"); return { countryCode };",
+                            "outputTransformScript": "if (!output || typeof output !== \"object\") return []; return [{ countryCode: output.code, currency: output.currency, timezone: output.timezone, nextHoliday: output.nextHoliday, supportTime: output.supportTime }];"
+                        },
+                        {
+                            "type": "navigate",
+                            "targetPageId": "page-details",
+                            "when": {
+                                "operator": "AND",
+                                "conditions": [
+                                    { "fieldId": "fld_country", "operator": "notEmpty" },
+                                    { "fieldId": "fld_priority_route", "operator": "truthy" }
+                                ]
+                            }
+                        },
+                        {
+                            "type": "navigate",
+                            "targetPageId": "page-preferences",
+                            "when": {
+                                "operator": "AND",
+                                "conditions": [
+                                    { "fieldId": "fld_country", "operator": "notEmpty" },
+                                    { "fieldId": "fld_priority_route", "operator": "eq", "value": false }
+                                ]
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "layout": {
+        "id": "layout_step_1_root",
+        "type": "col",
+        "responsive": { "xs": 12 },
+        "children": [
+            {
+                "id": "row_step_1_inputs",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_1_search",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_1_search", "type": "widget", "widgetKind": "field", "refId": "fld_search_country" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_1_country",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_1_country", "type": "widget", "widgetKind": "field", "refId": "fld_country" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_1_priority",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_1_priority",
+                        "type": "col",
+                        "responsive": { "xs": 12 },
+                        "children": [
+                            { "id": "w_step_1_priority", "type": "widget", "widgetKind": "field", "refId": "fld_priority_route" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_1_continue",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_1_continue",
+                        "type": "col",
+                        "responsive": { "xs": 12 },
+                        "children": [
+                            { "id": "w_step_1_continue", "type": "widget", "widgetKind": "button", "refId": "btn_continue" }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+};
+const JOURNEY_BRANCHING_TEMPLATE_STEP_TWO = {
+    "id": "template-journey-branch-step-2",
+    "version": "1.0.0",
+    "schemaVersion": "1.0.0",
+    "flavor": "form",
+    "title": "Step 2 · Preferences",
+    "metadata": {
+        "example": true,
+        "scenario": "journey-branching",
+        "page": "preferences"
+    },
+    "fields": [
+        {
+            "id": "fld_full_name",
+            "widgetId": "core.form:text",
+            "name": "fullName",
+            "type": "text",
+            "label": "Contact Name",
+            "placeholder": "Enter contact name"
+        },
+        {
+            "id": "fld_email",
+            "widgetId": "core.form:email",
+            "name": "email",
+            "type": "email",
+            "label": "Contact Email",
+            "placeholder": "Enter contact email"
+        },
+        {
+            "id": "fld_contact_method",
+            "widgetId": "core.form:radio",
+            "name": "contactMethod",
+            "type": "radio",
+            "label": "Preferred Contact Method",
+            "staticOptions": [
+                { "label": "Email", "value": "email" },
+                { "label": "Phone", "value": "phone" },
+                { "label": "SMS", "value": "sms" }
+            ]
+        },
+        {
+            "id": "fld_summary_country_code",
+            "widgetId": "core.form:text",
+            "name": "summaryCountryCode",
+            "type": "text",
+            "label": "Country Code",
+            "readonly": true,
+            "dataConfig": {
+                "type": "source",
+                "datasourceId": "journey_branch_ds_country_profile",
+                "valueKey": "countryCode"
+            }
+        },
+        {
+            "id": "tbl_city_snapshot",
+            "widgetId": "core.web:table",
+            "name": "summaryCityTable",
+            "type": "table",
+            "label": "Available Cities",
+            "compact": false,
+            "striped": true,
+            "columns": [
+                { "key": "cityName", "label": "City" },
+                { "key": "population", "label": "Population" },
+                { "key": "weather", "label": "Weather" }
+            ],
+            "dataConfig": {
+                "type": "source",
+                "datasourceId": "journey_branch_ds_country_cities",
+                "searchEnabled": false,
+                "pageSize": 5,
+                "sort": [{ "column": "cityName", "dir": "asc" }]
+            }
+        },
+        {
+            "id": "btn_back_intake",
+            "widgetId": "core.form:form-button",
+            "name": "backToIntake",
+            "type": "form-button",
+            "label": "Back to Intake",
+            "variant": "secondary",
+            "buttonType": "button",
+            "events": [
+                {
+                    "id": "evt_back_to_intake",
+                    "on": "click",
+                    "enabled": true,
+                    "actions": [
+                        { "type": "navigate", "targetPageId": "page-intake" }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "btn_continue_details",
+            "widgetId": "core.form:form-button",
+            "name": "continueToDetails",
+            "type": "form-button",
+            "label": "Continue to Details",
+            "variant": "primary",
+            "buttonType": "button",
+            "events": [
+                {
+                    "id": "evt_continue_to_details",
+                    "on": "click",
+                    "enabled": true,
+                    "actions": [
+                        {
+                            "type": "navigate",
+                            "targetPageId": "page-details",
+                            "when": {
+                                "operator": "AND",
+                                "conditions": [
+                                    { "fieldId": "fld_full_name", "operator": "notEmpty" },
+                                    { "fieldId": "fld_email", "operator": "notEmpty" }
+                                ]
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    ],
+    "layout": {
+        "id": "layout_step_2_root",
+        "type": "col",
+        "responsive": { "xs": 12 },
+        "children": [
+            {
+                "id": "row_step_2_inputs",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_2_name",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_2_name", "type": "widget", "widgetKind": "field", "refId": "fld_full_name" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_2_email",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_2_email", "type": "widget", "widgetKind": "field", "refId": "fld_email" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_2_summary",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_2_contact_method",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_2_contact_method", "type": "widget", "widgetKind": "field", "refId": "fld_contact_method" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_2_country_code",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_2_country_code", "type": "widget", "widgetKind": "field", "refId": "fld_summary_country_code" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_2_table",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_2_table",
+                        "type": "col",
+                        "responsive": { "xs": 12 },
+                        "children": [
+                            { "id": "w_step_2_table", "type": "widget", "widgetKind": "table", "refId": "tbl_city_snapshot" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_2_actions",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_2_back",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 4 },
+                        "children": [
+                            { "id": "w_step_2_back", "type": "widget", "widgetKind": "button", "refId": "btn_back_intake" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_2_continue",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 8 },
+                        "children": [
+                            { "id": "w_step_2_continue", "type": "widget", "widgetKind": "button", "refId": "btn_continue_details" }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+};
+const JOURNEY_BRANCHING_TEMPLATE_STEP_THREE = {
+    "id": "template-journey-branch-step-3",
+    "version": "1.0.0",
+    "schemaVersion": "1.0.0",
+    "flavor": "form",
+    "title": "Step 3 · Details",
+    "metadata": {
+        "example": true,
+        "scenario": "journey-branching",
+        "page": "details"
+    },
+    "fields": [
+        {
+            "id": "fld_follow_up_date",
+            "widgetId": "core.form:date",
+            "name": "followUpDate",
+            "type": "date",
+            "label": "Follow-up Date"
+        },
+        {
+            "id": "fld_follow_up_time",
+            "widgetId": "core.form:time",
+            "name": "followUpTime",
+            "type": "time",
+            "label": "Follow-up Time"
+        },
+        {
+            "id": "fld_notes",
+            "widgetId": "core.form:text",
+            "name": "notes",
+            "type": "text",
+            "label": "Notes",
+            "placeholder": "Add short notes for this request"
+        },
+        {
+            "id": "fld_summary_currency",
+            "widgetId": "core.form:text",
+            "name": "summaryCurrency",
+            "type": "text",
+            "label": "Currency",
+            "readonly": true,
+            "dataConfig": {
+                "type": "source",
+                "datasourceId": "journey_branch_ds_country_profile",
+                "valueKey": "currency"
+            }
+        },
+        {
+            "id": "fld_summary_timezone",
+            "widgetId": "core.form:text",
+            "name": "summaryTimezone",
+            "type": "text",
+            "label": "Timezone",
+            "readonly": true,
+            "dataConfig": {
+                "type": "source",
+                "datasourceId": "journey_branch_ds_country_profile",
+                "valueKey": "timezone"
+            }
+        },
+        {
+            "id": "btn_back_preferences",
+            "widgetId": "core.form:form-button",
+            "name": "backToPreferences",
+            "type": "form-button",
+            "label": "Back to Preferences",
+            "variant": "secondary",
+            "buttonType": "button",
+            "events": [
+                {
+                    "id": "evt_back_to_preferences",
+                    "on": "click",
+                    "enabled": true,
+                    "actions": [
+                        { "type": "navigate", "targetPageId": "page-preferences" }
+                    ]
+                }
+            ]
+        },
+        {
+            "id": "btn_jump_intake",
+            "widgetId": "core.form:form-button",
+            "name": "jumpToIntake",
+            "type": "form-button",
+            "label": "Jump to Intake",
+            "variant": "secondary",
+            "buttonType": "button",
+            "events": [
+                {
+                    "id": "evt_jump_to_intake",
+                    "on": "click",
+                    "enabled": true,
+                    "actions": [
+                        { "type": "navigate", "targetPageId": "page-intake" }
+                    ]
+                }
+            ]
+        }
+    ],
+    "layout": {
+        "id": "layout_step_3_root",
+        "type": "col",
+        "responsive": { "xs": 12 },
+        "children": [
+            {
+                "id": "row_step_3_inputs",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_3_date",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 4 },
+                        "children": [
+                            { "id": "w_step_3_date", "type": "widget", "widgetKind": "field", "refId": "fld_follow_up_date" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_3_time",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 4 },
+                        "children": [
+                            { "id": "w_step_3_time", "type": "widget", "widgetKind": "field", "refId": "fld_follow_up_time" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_3_notes",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 4 },
+                        "children": [
+                            { "id": "w_step_3_notes", "type": "widget", "widgetKind": "field", "refId": "fld_notes" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_3_summary",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_3_currency",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_3_currency", "type": "widget", "widgetKind": "field", "refId": "fld_summary_currency" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_3_timezone",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_3_timezone", "type": "widget", "widgetKind": "field", "refId": "fld_summary_timezone" }
+                        ]
+                    }
+                ]
+            },
+            {
+                "id": "row_step_3_actions",
+                "type": "row",
+                "children": [
+                    {
+                        "id": "col_step_3_back",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_3_back", "type": "widget", "widgetKind": "button", "refId": "btn_back_preferences" }
+                        ]
+                    },
+                    {
+                        "id": "col_step_3_jump",
+                        "type": "col",
+                        "responsive": { "xs": 12, "md": 6 },
+                        "children": [
+                            { "id": "w_step_3_jump", "type": "widget", "widgetKind": "button", "refId": "btn_jump_intake" }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+};
+const JOURNEY_BRANCHING_STEP_ONE_SCHEMA = parseTemplateSchema(JOURNEY_BRANCHING_TEMPLATE_STEP_ONE);
+const JOURNEY_BRANCHING_STEP_TWO_SCHEMA = parseTemplateSchema(JOURNEY_BRANCHING_TEMPLATE_STEP_TWO);
+const JOURNEY_BRANCHING_STEP_THREE_SCHEMA = parseTemplateSchema(JOURNEY_BRANCHING_TEMPLATE_STEP_THREE);
+const JOURNEY_BRANCHING_TEMPLATE_PROJECT = {
+    id: 'template-journey-branching',
+    title: 'Journey Branching + Editable Pages',
+    startPageId: 'page-intake',
+    pages: [
+        {
+            id: 'page-intake',
+            name: 'Step 1: Intake + Routing',
+            route: '/journey-intake',
+            schema: JOURNEY_BRANCHING_STEP_ONE_SCHEMA
+        },
+        {
+            id: 'page-preferences',
+            name: 'Step 2: Preferences',
+            route: '/journey-preferences',
+            schema: JOURNEY_BRANCHING_STEP_TWO_SCHEMA
+        },
+        {
+            id: 'page-details',
+            name: 'Step 3: Details',
+            route: '/journey-details',
+            schema: JOURNEY_BRANCHING_STEP_THREE_SCHEMA
+        }
+    ],
+    metadata: {
+        example: true,
+        scenario: 'journey-branching'
+    }
+};
 const DEFAULT_TEMPLATE_LIBRARY = [
     {
         id: 'basic-contact',
@@ -21616,6 +23131,14 @@ const DEFAULT_TEMPLATE_LIBRARY = [
         description: 'KYC transfer starter with request-channel routing, client lookup, and conditional beneficiary verification.',
         tags: ['operations', 'kyc', 'review', 'dense'],
         schema: TRANSACTION_KYC_REVIEW_SCHEMA
+    },
+    {
+        id: 'journey-branching-3-step',
+        name: 'Journey Branching (3 Steps)',
+        description: 'Three-page journey template with datasource events, conditional page navigation, and editable details step.',
+        tags: ['journey', 'events', 'datasource', 'navigation'],
+        schema: JOURNEY_BRANCHING_STEP_ONE_SCHEMA,
+        journey: JOURNEY_BRANCHING_TEMPLATE_PROJECT
     }
 ];
 
@@ -21631,6 +23154,7 @@ class EventsWorkspaceComponent {
     readOnly = input(false);
     eventApis = input([]);
     eventApiBrowser = input();
+    pages = input([]);
     schemaChange = output();
     eventsSave = output();
     draftSchema = signal(null);
@@ -21647,6 +23171,20 @@ class EventsWorkspaceComponent {
         { label: 'Field', value: 'field' },
         { label: 'Event Payload', value: 'event' }
     ];
+    conditionOperatorOptions = [
+        { label: 'Equals', value: 'eq' },
+        { label: 'Not Equals', value: 'neq' },
+        { label: 'Greater Than', value: 'gt' },
+        { label: 'Less Than', value: 'lt' },
+        { label: 'Greater Or Equals', value: 'gte' },
+        { label: 'Less Or Equals', value: 'lte' },
+        { label: 'Contains', value: 'contains' },
+        { label: 'Starts With', value: 'startsWith' },
+        { label: 'Ends With', value: 'endsWith' },
+        { label: 'Is Empty', value: 'empty' },
+        { label: 'Is Not Empty', value: 'notEmpty' },
+        { label: 'Is Truthy', value: 'truthy' }
+    ];
     currentSchema = computed(() => this.draftSchema() ?? this.schema());
     fields = computed(() => this.flattenFields(this.currentSchema()));
     filteredFields = computed(() => {
@@ -21755,6 +23293,7 @@ class EventsWorkspaceComponent {
         return [
             { label: 'Set Value', value: 'setValue' },
             { label: 'Log', value: 'log' },
+            { label: 'Navigate', value: 'navigate' },
             { label: 'API', value: 'api', disabled: !this.canSelectApiAction(binding, actionIndex) }
         ];
     }
@@ -21834,6 +23373,14 @@ class EventsWorkspaceComponent {
                 binding.actions[actionIndex] = nextAction;
                 return;
             }
+            if (currentAction.type === 'navigate') {
+                const nextAction = {
+                    ...currentAction,
+                    ...patch
+                };
+                binding.actions[actionIndex] = nextAction;
+                return;
+            }
             const nextAction = {
                 ...currentAction,
                 ...patch,
@@ -22039,6 +23586,91 @@ class EventsWorkspaceComponent {
     asApi(action) {
         return action;
     }
+    asNavigate(action) {
+        return action;
+    }
+    updateNavigateTarget(bindingIndex, actionIndex, targetPageId) {
+        this.patchAction(bindingIndex, actionIndex, { targetPageId });
+    }
+    hasNavigateCondition(action) {
+        return !!action.when;
+    }
+    toggleNavigateCondition(bindingIndex, actionIndex, enabled) {
+        if (!enabled) {
+            this.updateNavigateConditionGroup(bindingIndex, actionIndex, undefined);
+            return;
+        }
+        this.updateNavigateConditionGroup(bindingIndex, actionIndex, {
+            operator: 'AND',
+            conditions: []
+        });
+    }
+    updateNavigateConditionGroup(bindingIndex, actionIndex, group) {
+        this.patchAction(bindingIndex, actionIndex, { when: group ? this.clone(group) : undefined });
+    }
+    navigateConditionFieldId(action) {
+        const condition = this.firstNavigateCondition(action);
+        return condition?.fieldId ?? '';
+    }
+    navigateConditionOperator(action) {
+        const condition = this.firstNavigateCondition(action);
+        return condition?.operator ?? 'notEmpty';
+    }
+    navigateConditionValue(action) {
+        const condition = this.firstNavigateCondition(action);
+        if (!condition || condition.value === null || condition.value === undefined)
+            return '';
+        return String(condition.value);
+    }
+    updateNavigateConditionField(bindingIndex, actionIndex, fieldId) {
+        if (!fieldId) {
+            this.updateNavigateConditionGroup(bindingIndex, actionIndex, undefined);
+            return;
+        }
+        const action = this.selectedFieldEvents()[bindingIndex]?.actions[actionIndex];
+        const operator = action && action.type === 'navigate'
+            ? this.navigateConditionOperator(action)
+            : 'notEmpty';
+        const nextCondition = { fieldId, operator };
+        this.updateNavigateConditionGroup(bindingIndex, actionIndex, this.toNavigateLogicGroup(nextCondition));
+    }
+    updateNavigateConditionOperator(bindingIndex, actionIndex, operator) {
+        const action = this.selectedFieldEvents()[bindingIndex]?.actions[actionIndex];
+        if (!action || action.type !== 'navigate')
+            return;
+        const current = this.firstNavigateCondition(action);
+        if (!current?.fieldId)
+            return;
+        const next = { ...current, operator };
+        if (!this.navigateOperatorNeedsValue(operator)) {
+            delete next.value;
+        }
+        this.updateNavigateConditionGroup(bindingIndex, actionIndex, this.toNavigateLogicGroup(next));
+    }
+    updateNavigateConditionValue(bindingIndex, actionIndex, value) {
+        const action = this.selectedFieldEvents()[bindingIndex]?.actions[actionIndex];
+        if (!action || action.type !== 'navigate')
+            return;
+        const current = this.firstNavigateCondition(action);
+        if (!current?.fieldId)
+            return;
+        const next = {
+            ...current,
+            value
+        };
+        this.updateNavigateConditionGroup(bindingIndex, actionIndex, this.toNavigateLogicGroup(next));
+    }
+    navigateOperatorNeedsValue(operator) {
+        return !['empty', 'notEmpty', 'truthy'].includes(operator);
+    }
+    navigateConditionFields() {
+        return this.fields().map(field => ({
+            id: field.id,
+            name: field.name,
+            label: field.label,
+            type: field.type
+        }));
+    }
     trackFieldById(_, field) {
         return field.id;
     }
@@ -22070,6 +23702,22 @@ class EventsWorkspaceComponent {
         const selectedId = this.selectedFieldId();
         return this.fields().filter(field => field.id !== selectedId);
     }
+    firstNavigateCondition(action) {
+        const when = action.when;
+        if (!when?.conditions?.length)
+            return null;
+        const first = when.conditions[0];
+        return this.isLogicCondition(first) ? first : null;
+    }
+    isLogicCondition(value) {
+        return 'fieldId' in value;
+    }
+    toNavigateLogicGroup(condition) {
+        return {
+            operator: 'AND',
+            conditions: [condition]
+        };
+    }
     updateSelectedEvents(mutator) {
         if (this.readOnly())
             return;
@@ -22104,6 +23752,13 @@ class EventsWorkspaceComponent {
                 outputTransformScript: 'return output;'
             };
         }
+        if (type === 'navigate') {
+            return {
+                type: 'navigate',
+                targetPageId: '',
+                when: undefined
+            };
+        }
         return {
             type: 'log',
             message: DEFAULT_LOG_ACTION_MESSAGE
@@ -22458,7 +24113,7 @@ class EventsWorkspaceComponent {
         return `evt_ds_${v4().replace(/-/g, '')}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EventsWorkspaceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: EventsWorkspaceComponent, isStandalone: true, selector: "app-events-workspace", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, eventApis: { classPropertyName: "eventApis", publicName: "eventApis", isSignal: true, isRequired: false, transformFunction: null }, eventApiBrowser: { classPropertyName: "eventApiBrowser", publicName: "eventApiBrowser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange", eventsSave: "eventsSave" }, host: { classAttribute: "fd-events-workspace-host block h-full w-full" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.17", type: EventsWorkspaceComponent, isStandalone: true, selector: "app-events-workspace", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, eventApis: { classPropertyName: "eventApis", publicName: "eventApis", isSignal: true, isRequired: false, transformFunction: null }, eventApiBrowser: { classPropertyName: "eventApiBrowser", publicName: "eventApiBrowser", isSignal: true, isRequired: false, transformFunction: null }, pages: { classPropertyName: "pages", publicName: "pages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange", eventsSave: "eventsSave" }, host: { classAttribute: "fd-events-workspace-host block h-full w-full" }, ngImport: i0, template: `
     <div class="fd-events-workspace flex h-full w-full overflow-hidden bg-white font-sans text-sm text-gray-700" data-fd="events-workspace">
       <aside class="fd-events-fields w-72 shrink-0 border-r border-gray-200 bg-gray-50 flex flex-col" data-fd-region="fields">
         <div class="px-4 py-3 border-b border-gray-200 bg-white">
@@ -22637,6 +24292,43 @@ class EventsWorkspaceComponent {
                       placeholder="Enter log message">
                   </ng-container>
 
+                  <ng-container *ngIf="action.type === 'navigate'">
+                    <div>
+                      <label class="mb-1 block text-[11px] font-medium text-gray-600">Target Page</label>
+                      <select
+                        class="h-8 w-full rounded-md border border-gray-300 px-2 text-xs focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        [disabled]="readOnly()"
+                        [ngModel]="asNavigate(action).targetPageId"
+                        (ngModelChange)="updateNavigateTarget(bindingIndex, actionIndex, $event)">
+                        <option value="">Select page</option>
+                        <option *ngFor="let page of pages()" [value]="page.id">{{ page.name }}</option>
+                      </select>
+                    </div>
+
+                    <div class="rounded-md border border-gray-200 bg-white p-3">
+                      <label class="inline-flex items-center gap-2 text-[11px] font-medium text-gray-600">
+                        <input
+                          type="checkbox"
+                          class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          [disabled]="readOnly()"
+                          [ngModel]="hasNavigateCondition(asNavigate(action))"
+                          (ngModelChange)="toggleNavigateCondition(bindingIndex, actionIndex, $event)">
+                        <span>Use condition</span>
+                      </label>
+                      <p class="mt-1 text-[10px] text-gray-500">
+                        Reuses the same rules query builder used by widget rules.
+                      </p>
+
+                      <div *ngIf="hasNavigateCondition(asNavigate(action))" class="mt-3">
+                        <app-query-builder
+                          [group]="asNavigate(action).when!"
+                          [allFields]="navigateConditionFields()"
+                          (groupChange)="updateNavigateConditionGroup(bindingIndex, actionIndex, $event)">
+                        </app-query-builder>
+                      </div>
+                    </div>
+                  </ng-container>
+
                   <ng-container *ngIf="action.type === 'api'">
                     <label class="mb-1 block text-[11px] font-medium text-gray-600">API</label>
                     <div class="rounded-md border border-gray-200 bg-white">
@@ -22791,7 +24483,7 @@ class EventsWorkspaceComponent {
         </ng-template>
       </section>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: QueryBuilderComponent, selector: "app-query-builder", inputs: ["group", "allFields", "level"], outputs: ["groupChange", "remove"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EventsWorkspaceComponent, decorators: [{
             type: Component,
@@ -22801,7 +24493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     host: {
                         class: 'fd-events-workspace-host block h-full w-full'
                     },
-                    imports: [CommonModule, FormsModule],
+                    imports: [CommonModule, FormsModule, QueryBuilderComponent],
                     template: `
     <div class="fd-events-workspace flex h-full w-full overflow-hidden bg-white font-sans text-sm text-gray-700" data-fd="events-workspace">
       <aside class="fd-events-fields w-72 shrink-0 border-r border-gray-200 bg-gray-50 flex flex-col" data-fd-region="fields">
@@ -22981,6 +24673,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                       placeholder="Enter log message">
                   </ng-container>
 
+                  <ng-container *ngIf="action.type === 'navigate'">
+                    <div>
+                      <label class="mb-1 block text-[11px] font-medium text-gray-600">Target Page</label>
+                      <select
+                        class="h-8 w-full rounded-md border border-gray-300 px-2 text-xs focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+                        [disabled]="readOnly()"
+                        [ngModel]="asNavigate(action).targetPageId"
+                        (ngModelChange)="updateNavigateTarget(bindingIndex, actionIndex, $event)">
+                        <option value="">Select page</option>
+                        <option *ngFor="let page of pages()" [value]="page.id">{{ page.name }}</option>
+                      </select>
+                    </div>
+
+                    <div class="rounded-md border border-gray-200 bg-white p-3">
+                      <label class="inline-flex items-center gap-2 text-[11px] font-medium text-gray-600">
+                        <input
+                          type="checkbox"
+                          class="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          [disabled]="readOnly()"
+                          [ngModel]="hasNavigateCondition(asNavigate(action))"
+                          (ngModelChange)="toggleNavigateCondition(bindingIndex, actionIndex, $event)">
+                        <span>Use condition</span>
+                      </label>
+                      <p class="mt-1 text-[10px] text-gray-500">
+                        Reuses the same rules query builder used by widget rules.
+                      </p>
+
+                      <div *ngIf="hasNavigateCondition(asNavigate(action))" class="mt-3">
+                        <app-query-builder
+                          [group]="asNavigate(action).when!"
+                          [allFields]="navigateConditionFields()"
+                          (groupChange)="updateNavigateConditionGroup(bindingIndex, actionIndex, $event)">
+                        </app-query-builder>
+                      </div>
+                    </div>
+                  </ng-container>
+
                   <ng-container *ngIf="action.type === 'api'">
                     <label class="mb-1 block text-[11px] font-medium text-gray-600">API</label>
                     <div class="rounded-md border border-gray-200 bg-white">
@@ -23139,6 +24868,158 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class FormJourneyStateService {
+    documentSignal = signal(normalizeToJourney(createEmptySchema('form')));
+    sourceWasPlainSchema = signal(true);
+    document = computed(() => this.documentSignal());
+    pages = computed(() => this.documentSignal().pages);
+    activePageId = signal(this.documentSignal().startPageId);
+    activePage = computed(() => this.pages().find(page => page.id === this.activePageId()) ?? null);
+    canRemovePage = computed(() => this.pages().length > 1);
+    isJourneyMode = computed(() => this.pages().length > 1);
+    setDocument(input) {
+        const fromSchema = !this.isJourneyInput(input);
+        const normalized = normalizeToJourney(input);
+        this.documentSignal.set(normalized);
+        this.sourceWasPlainSchema.set(fromSchema);
+        this.activePageId.set(normalized.startPageId);
+    }
+    setActivePage(id) {
+        if (this.pages().some(page => page.id === id)) {
+            this.activePageId.set(id);
+        }
+    }
+    addPage() {
+        const current = this.documentSignal();
+        const name = this.nextPageName();
+        const route = this.ensureUniqueRoute(`/${name.toLowerCase().replace(/\s+/g, '-')}`);
+        const page = createFormJourneyPage({
+            name,
+            route,
+            schema: createEmptySchema('form', { title: name })
+        });
+        this.documentSignal.set({
+            ...current,
+            pages: [...current.pages, page]
+        });
+        this.activePageId.set(page.id);
+        return page;
+    }
+    removePage(id) {
+        if (!this.canRemovePage())
+            return;
+        const current = this.documentSignal();
+        const pages = current.pages.filter(page => page.id !== id);
+        if (pages.length === current.pages.length || pages.length === 0)
+            return;
+        const startPageId = pages.some(page => page.id === current.startPageId)
+            ? current.startPageId
+            : pages[0].id;
+        this.documentSignal.set({
+            ...current,
+            pages,
+            startPageId
+        });
+        if (this.activePageId() === id) {
+            this.activePageId.set(startPageId);
+        }
+    }
+    renamePage(id, name) {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return;
+        const current = this.documentSignal();
+        const pages = current.pages.map(page => {
+            if (page.id !== id)
+                return page;
+            return {
+                ...page,
+                name: trimmed,
+                schema: {
+                    ...page.schema,
+                    title: trimmed
+                }
+            };
+        });
+        this.documentSignal.set({ ...current, pages });
+    }
+    updateRoute(id, route) {
+        const current = this.documentSignal();
+        const pages = current.pages.map(page => {
+            if (page.id !== id)
+                return page;
+            return {
+                ...page,
+                route: this.ensureUniqueRoute(route, id)
+            };
+        });
+        this.documentSignal.set({ ...current, pages });
+    }
+    updateActivePageSchema(schema) {
+        const activeId = this.activePageId();
+        if (!activeId)
+            return;
+        this.updatePageSchema(activeId, schema);
+    }
+    updatePageSchema(id, schema) {
+        const current = this.documentSignal();
+        const pages = current.pages.map(page => {
+            if (page.id !== id)
+                return page;
+            return {
+                ...page,
+                schema: { ...schema }
+            };
+        });
+        this.documentSignal.set({ ...current, pages });
+    }
+    compatibleOutput() {
+        const current = this.documentSignal();
+        if (current.pages.length === 1 && this.sourceWasPlainSchema()) {
+            return unwrapSinglePageJourney(current);
+        }
+        return current;
+    }
+    isJourneyInput(input) {
+        return 'pages' in input;
+    }
+    nextPageName() {
+        const names = new Set(this.pages().map(page => page.name.toLowerCase()));
+        let i = this.pages().length + 1;
+        while (names.has(`step ${i}`.toLowerCase())) {
+            i += 1;
+        }
+        return `Step ${i}`;
+    }
+    ensureUniqueRoute(route, excludeId) {
+        const normalized = this.normalizeRoute(route);
+        const existing = new Set(this.pages()
+            .filter(page => page.id !== excludeId)
+            .map(page => page.route));
+        if (!existing.has(normalized))
+            return normalized;
+        const base = normalized.replace(/-\d+$/, '');
+        let index = 2;
+        let candidate = `${base}-${index}`;
+        while (existing.has(candidate)) {
+            index += 1;
+            candidate = `${base}-${index}`;
+        }
+        return candidate;
+    }
+    normalizeRoute(route) {
+        const trimmed = route.trim().toLowerCase();
+        if (!trimmed)
+            return '/step';
+        return trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormJourneyStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormJourneyStateService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormJourneyStateService, decorators: [{
+            type: Injectable
+        }] });
+
 function parseExternalDsProperties(value) {
     if (!value)
         return {};
@@ -23185,9 +25066,11 @@ function normalizeDataSourceType(type) {
 }
 class FormDesignerShellComponent {
     state = inject(DesignerStateService);
+    journeyState = inject(FormJourneyStateService);
     aiAvailable = inject(AI_BACKEND_CLIENT, { optional: true }) !== null;
-    aiToolRegistry = inject(AiToolRegistryService, { optional: true });
+    aiFeatureState = inject(FormDesignerAiFeatureStateService);
     schema;
+    journey;
     schemaMetadata;
     flavor = 'form';
     flavors = ['form', 'email'];
@@ -23210,6 +25093,9 @@ class FormDesignerShellComponent {
     save = new EventEmitter();
     push = new EventEmitter();
     eventsSave = new EventEmitter();
+    saveDocument = new EventEmitter();
+    pushDocument = new EventEmitter();
+    editDocument = new EventEmitter();
     catalog = inject(DataCatalog, { optional: true });
     managedSourceIds = new Set();
     managedEventSourceIds = new Set();
@@ -23220,6 +25106,18 @@ class FormDesignerShellComponent {
     selectedTemplateId = null;
     pendingTemplate = null;
     lastSavedSchemaSnapshot = this.serializeSchema(this.state.schema());
+    designerPages = computed(() => this.journeyState.pages().map(page => ({
+        id: page.id,
+        name: page.name,
+        route: page.route
+    })));
+    journeySyncEnabled = signal(false);
+    schemaSync = effect(() => {
+        if (!this.journeySyncEnabled())
+            return;
+        const schema = this.state.schema();
+        untracked(() => this.journeyState.updateActivePageSchema(schema));
+    });
     get engine() {
         return new FormEngine(this.state.schema());
     }
@@ -23229,12 +25127,16 @@ class FormDesignerShellComponent {
     get selectedTemplate() {
         return this.filteredTemplates.find(template => template.id === this.selectedTemplateId) ?? null;
     }
+    constructor() {
+        this.journeyState.setDocument(this.state.schema());
+        this.journeySyncEnabled.set(true);
+    }
     get resolvedHeaderLabel() {
         const explicitLabel = this.headerLabel?.trim();
         if (explicitLabel) {
             return explicitLabel;
         }
-        const activeSchema = this.getResolvedExternalSchema() ?? this.state.schema();
+        const activeSchema = this.journeyState.activePage()?.schema ?? this.getResolvedExternalSchema() ?? this.state.schema();
         const schemaTitle = activeSchema?.title?.trim() || 'Untitled Form';
         const schemaVersion = activeSchema?.version?.trim();
         return schemaVersion ? `${schemaTitle} [${schemaVersion}]` : schemaTitle;
@@ -23246,19 +25148,14 @@ class FormDesignerShellComponent {
         if (changes['isReadOnly']) {
             this.state.setIsReadOnly(this.isReadOnly);
         }
-        if (changes['schema'] || changes['schemaMetadata']) {
-            const resolvedSchema = this.getResolvedExternalSchema();
-            if (resolvedSchema) {
-                this.state.updateSchema(resolvedSchema);
-                this.syncEventDataSources(resolvedSchema);
-                this.lastSavedSchemaSnapshot = this.serializeSchema(resolvedSchema);
-            }
+        if (changes['schema'] || changes['journey'] || changes['schemaMetadata']) {
+            this.loadExternalDocument();
         }
         if (changes['dataSources']) {
             this.syncDataSources();
         }
         if (changes['eventApis']) {
-            this.aiToolRegistry?.setEventApis(this.eventApis ?? []);
+            this.aiFeatureState.setEventApis(this.eventApis ?? []);
         }
     }
     syncDataSources() {
@@ -23412,6 +25309,37 @@ class FormDesignerShellComponent {
     closeAiWorkspace() {
         this.activeWorkspace = 'designer';
     }
+    addPage() {
+        this.persistActivePage();
+        this.journeyState.addPage();
+        this.loadActivePage();
+    }
+    selectPage(id) {
+        if (this.journeyState.activePageId() === id)
+            return;
+        this.persistActivePage();
+        this.journeyState.setActivePage(id);
+        this.loadActivePage();
+    }
+    removePage(id) {
+        if (!this.journeyState.canRemovePage())
+            return;
+        this.persistActivePage();
+        this.journeyState.removePage(id);
+        this.loadActivePage();
+    }
+    renamePage(id, name) {
+        this.journeyState.renamePage(id, name);
+        if (this.journeyState.activePageId() === id) {
+            const current = this.state.schema();
+            if (current.title !== name) {
+                this.state.updateSchema({ ...current, title: name });
+            }
+        }
+    }
+    updatePageRoute(id, route) {
+        this.journeyState.updateRoute(id, route);
+    }
     onEventsSchemaChange(schema) {
         if (this.state.isReadOnly())
             return;
@@ -23449,16 +25377,24 @@ class FormDesignerShellComponent {
         this.pendingTemplate = null;
     }
     onEdit() {
+        this.persistActivePage();
+        const output = this.journeyState.compatibleOutput();
         this.state.setIsReadOnly(false);
-        this.edit.emit(this.state.schema());
+        this.edit.emit(output);
+        this.editDocument.emit(output);
     }
     onSave() {
+        this.persistActivePage();
         const schema = this.state.schema();
+        const output = this.journeyState.compatibleOutput();
         this.lastSavedSchemaSnapshot = this.serializeSchema(schema);
-        this.save.emit(schema);
+        this.save.emit(output);
+        this.saveDocument.emit(output);
     }
     onPush() {
+        this.persistActivePage();
         const schema = this.state.schema();
+        const output = this.journeyState.compatibleOutput();
         if (this.hasUnsavedChanges(schema)) {
             const confirmed = typeof confirm === 'function'
                 ? confirm('You have unsaved changes. Push without saving may publish the previously saved form. Continue?')
@@ -23466,7 +25402,8 @@ class FormDesignerShellComponent {
             if (!confirmed)
                 return;
         }
-        this.push.emit(schema);
+        this.push.emit(output);
+        this.pushDocument.emit(output);
     }
     trackByTemplateId(_index, template) {
         return template.id;
@@ -23484,6 +25421,18 @@ class FormDesignerShellComponent {
         return JSON.stringify(schema);
     }
     applyTemplate(template) {
+        if (template.journey) {
+            const journey = this.parseTemplateJourney(template.journey);
+            this.journeyState.setDocument(journey);
+            this.loadActivePage();
+            this.selectedTemplateId = template.id;
+            this.closeLibrary();
+            const activeSchema = this.journeyState.activePage()?.schema;
+            if (activeSchema?.flavor && activeSchema.flavor !== this.flavor) {
+                this.switchFlavor(activeSchema.flavor);
+            }
+            return;
+        }
         const schema = parseSchema(JSON.stringify(template.schema));
         schema.id = this.createSchemaId();
         schema.flavor = schema.flavor ?? this.flavor;
@@ -23496,6 +25445,20 @@ class FormDesignerShellComponent {
             this.switchFlavor(resolvedSchema.flavor);
         }
     }
+    parseTemplateJourney(template) {
+        const pages = template.pages.map(page => ({
+            ...page,
+            schema: parseSchema(JSON.stringify(page.schema))
+        }));
+        const startPageId = pages.some(page => page.id === template.startPageId)
+            ? template.startPageId
+            : pages[0]?.id ?? '';
+        return {
+            ...template,
+            pages,
+            startPageId
+        };
+    }
     syncTemplateSelection() {
         const templates = this.filteredTemplates;
         if (!templates.length) {
@@ -23512,7 +25475,31 @@ class FormDesignerShellComponent {
         }
         return `schema-${Date.now()}-${Math.random().toString(16).slice(2)}`;
     }
-    getResolvedExternalSchema() {
+    loadExternalDocument() {
+        const resolved = this.getResolvedExternalDocument();
+        if (!resolved)
+            return;
+        this.journeySyncEnabled.set(false);
+        this.journeyState.setDocument(resolved);
+        this.loadActivePage();
+        this.lastSavedSchemaSnapshot = this.serializeSchema(this.state.schema());
+        this.journeySyncEnabled.set(true);
+    }
+    loadActivePage() {
+        const active = this.journeyState.activePage();
+        if (!active)
+            return;
+        this.state.updateSchema(active.schema);
+        this.syncEventDataSources(active.schema);
+    }
+    persistActivePage() {
+        const currentSchema = this.state.schema();
+        this.journeyState.updateActivePageSchema(currentSchema);
+    }
+    getResolvedExternalDocument() {
+        if (this.journey) {
+            return this.journey;
+        }
         if (this.schema) {
             return this.applySchemaMetadata(this.schema);
         }
@@ -23521,6 +25508,17 @@ class FormDesignerShellComponent {
         }
         return undefined;
     }
+    getResolvedExternalSchema() {
+        const external = this.getResolvedExternalDocument();
+        if (!external)
+            return undefined;
+        if (isFormJourneyProject(external)) {
+            return external.pages.find(page => page.id === external.startPageId)?.schema
+                ?? external.pages[0]?.schema
+                ?? undefined;
+        }
+        return external;
+    }
     applySchemaMetadata(schema) {
         const metadata = this.schemaMetadata;
         if (!metadata) {
@@ -23548,7 +25546,7 @@ class FormDesignerShellComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormDesignerShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormDesignerShellComponent, isStandalone: true, selector: "app-form-designer-shell", inputs: { schema: "schema", schemaMetadata: "schemaMetadata", flavor: "flavor", flavors: "flavors", templates: "templates", headerLabel: "headerLabel", enableTemplateLibrary: "enableTemplateLibrary", enableGlobalDataManager: "enableGlobalDataManager", enableAiAssistant: "enableAiAssistant", showEditButton: "showEditButton", showSaveButton: "showSaveButton", showPushButton: "showPushButton", showEmailPreview: "showEmailPreview", isReadOnly: "isReadOnly", dataSources: "dataSources", eventApis: "eventApis", eventApiBrowser: "eventApiBrowser", eventApiExecutor: "eventApiExecutor" }, outputs: { flavorChange: "flavorChange", edit: "edit", save: "save", push: "push", eventsSave: "eventsSave" }, host: { classAttribute: "fd-shell-host block h-full w-full" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: FormDesignerShellComponent, isStandalone: true, selector: "app-form-designer-shell", inputs: { schema: "schema", journey: "journey", schemaMetadata: "schemaMetadata", flavor: "flavor", flavors: "flavors", templates: "templates", headerLabel: "headerLabel", enableTemplateLibrary: "enableTemplateLibrary", enableGlobalDataManager: "enableGlobalDataManager", enableAiAssistant: "enableAiAssistant", showEditButton: "showEditButton", showSaveButton: "showSaveButton", showPushButton: "showPushButton", showEmailPreview: "showEmailPreview", isReadOnly: "isReadOnly", dataSources: "dataSources", eventApis: "eventApis", eventApiBrowser: "eventApiBrowser", eventApiExecutor: "eventApiExecutor" }, outputs: { flavorChange: "flavorChange", edit: "edit", save: "save", push: "push", eventsSave: "eventsSave", saveDocument: "saveDocument", pushDocument: "pushDocument", editDocument: "editDocument" }, host: { classAttribute: "fd-shell-host block h-full w-full" }, providers: [FormJourneyStateService, ...provideFormDesignerAngaiFeature()], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="fd-shell flex flex-col h-screen bg-white font-sans"
       data-fd="shell"
@@ -23669,6 +25667,7 @@ class FormDesignerShellComponent {
           data-fd-slot="events-workspace"
           *ngIf="activeWorkspace === 'events'; else designerWorkspace"
           [schema]="state.schema()"
+          [pages]="designerPages()"
           [readOnly]="state.isReadOnly()"
           [eventApis]="eventApis"
           [eventApiBrowser]="eventApiBrowser"
@@ -23683,7 +25682,15 @@ class FormDesignerShellComponent {
             [flavor]="flavor"
             [mode]="state.isReadOnly() ? 'view' : 'edit'"
             [eventApis]="eventApis"
-            [eventApiExecutor]="eventApiExecutor">
+            [eventApiExecutor]="eventApiExecutor"
+            [pages]="designerPages()"
+            [activePageId]="journeyState.activePageId()"
+            [canRemovePage]="journeyState.canRemovePage()"
+            (pageAdd)="addPage()"
+            (pageSelect)="selectPage($event)"
+            (pageRemove)="removePage($event)"
+            (pageRename)="renamePage($event.id, $event.name)"
+            (pageRouteChange)="updatePageRoute($event.id, $event.route)">
           </app-json-form-designer>
         </ng-template>
 
@@ -23823,13 +25830,13 @@ class FormDesignerShellComponent {
         </div>
       </section>
     </div>
-  `, isInline: true, styles: ["@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.animate-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "component", type: JsonFormDesignerComponent, selector: "app-json-form-designer", inputs: ["flavor", "mode", "eventApis", "eventApiExecutor"] }, { kind: "component", type: EventsWorkspaceComponent, selector: "app-events-workspace", inputs: ["schema", "readOnly", "eventApis", "eventApiBrowser"], outputs: ["schemaChange", "eventsSave"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "component", type: EmailRendererComponent, selector: "app-email-renderer", inputs: ["schema", "engine"] }, { kind: "component", type: GlobalDataManagerComponent, selector: "app-global-data-manager", outputs: ["close"] }, { kind: "component", type: AiChatDrawerComponent, selector: "app-ai-chat-drawer", outputs: ["close", "expand"] }, { kind: "component", type: AiWorkspaceComponent, selector: "app-ai-workspace", outputs: ["close"] }] });
+  `, isInline: true, styles: ["@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.animate-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }, { kind: "component", type: JsonFormDesignerComponent, selector: "app-json-form-designer", inputs: ["flavor", "mode", "eventApis", "eventApiExecutor", "pages", "activePageId", "canRemovePage"], outputs: ["pageAdd", "pageSelect", "pageRemove", "pageRename", "pageRouteChange"] }, { kind: "component", type: EventsWorkspaceComponent, selector: "app-events-workspace", inputs: ["schema", "readOnly", "eventApis", "eventApiBrowser", "pages"], outputs: ["schemaChange", "eventsSave"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "initialFieldLabels", "mode", "device", "showLayoutGuides", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "navigateToPage", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }, { kind: "component", type: EmailRendererComponent, selector: "app-email-renderer", inputs: ["schema", "engine"] }, { kind: "component", type: GlobalDataManagerComponent, selector: "app-global-data-manager", outputs: ["close"] }, { kind: "component", type: AiChatDrawerComponent, selector: "app-ai-chat-drawer", outputs: ["close", "expand"] }, { kind: "component", type: AiWorkspaceComponent, selector: "app-ai-workspace", outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: FormDesignerShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-form-designer-shell', standalone: true, host: {
                         class: 'fd-shell-host block h-full w-full'
-                    }, imports: [
+                    }, providers: [FormJourneyStateService, ...provideFormDesignerAngaiFeature()], imports: [
                         CommonModule,
                         JsonFormDesignerComponent,
                         EventsWorkspaceComponent,
@@ -23959,6 +25966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
           data-fd-slot="events-workspace"
           *ngIf="activeWorkspace === 'events'; else designerWorkspace"
           [schema]="state.schema()"
+          [pages]="designerPages()"
           [readOnly]="state.isReadOnly()"
           [eventApis]="eventApis"
           [eventApiBrowser]="eventApiBrowser"
@@ -23973,7 +25981,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [flavor]="flavor"
             [mode]="state.isReadOnly() ? 'view' : 'edit'"
             [eventApis]="eventApis"
-            [eventApiExecutor]="eventApiExecutor">
+            [eventApiExecutor]="eventApiExecutor"
+            [pages]="designerPages()"
+            [activePageId]="journeyState.activePageId()"
+            [canRemovePage]="journeyState.canRemovePage()"
+            (pageAdd)="addPage()"
+            (pageSelect)="selectPage($event)"
+            (pageRemove)="removePage($event)"
+            (pageRename)="renamePage($event.id, $event.name)"
+            (pageRouteChange)="updatePageRoute($event.id, $event.route)">
           </app-json-form-designer>
         </ng-template>
 
@@ -24114,7 +26130,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
       </section>
     </div>
   `, styles: ["@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.animate-slide-in-right{animation:slideInRight .3s cubic-bezier(.16,1,.3,1)}\n"] }]
-        }], propDecorators: { schema: [{
+        }], ctorParameters: () => [], propDecorators: { schema: [{
+                type: Input
+            }], journey: [{
                 type: Input
             }], schemaMetadata: [{
                 type: Input
@@ -24160,6 +26178,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 type: Output
             }], eventsSave: [{
                 type: Output
+            }], saveDocument: [{
+                type: Output
+            }], pushDocument: [{
+                type: Output
+            }], editDocument: [{
+                type: Output
             }] } });
 
 class EventsPanelComponent {
@@ -27171,7 +29195,7 @@ class WebsiteDesignerShellComponent {
 
       <input type="file" #projectFileInput accept=".json" (change)="onProjectFileSelected($event)" class="hidden">
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: FieldPaletteComponent, selector: "app-field-palette", inputs: ["sectionLibrary", "pages", "activePageId", "canRemovePage", "savedSections", "bricks"], outputs: ["sectionInsert", "pageAdd", "pageSelect", "pageRemove", "pageRename", "pageRouteChange", "savedSectionInsert", "savedSectionRemove", "savedSectionCreateRequested"] }, { kind: "component", type: LayoutCanvasComponent, selector: "app-layout-canvas", inputs: ["previewMode"], outputs: ["previewRequested"] }, { kind: "component", type: PropertiesPanelComponent, selector: "app-properties-panel" }, { kind: "component", type: FormPreviewComponent, selector: "app-form-preview", inputs: ["eventApis", "eventApiExecutor", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "ngmodule", type: UiIconModule }, { kind: "component", type: FieldPaletteComponent, selector: "app-field-palette", inputs: ["sectionLibrary", "pages", "activePageId", "canRemovePage", "savedSections", "bricks"], outputs: ["sectionInsert", "pageAdd", "pageSelect", "pageRemove", "pageRename", "pageRouteChange", "savedSectionInsert", "savedSectionRemove", "savedSectionCreateRequested"] }, { kind: "component", type: LayoutCanvasComponent, selector: "app-layout-canvas", inputs: ["previewMode"], outputs: ["previewRequested"] }, { kind: "component", type: PropertiesPanelComponent, selector: "app-properties-panel" }, { kind: "component", type: FormPreviewComponent, selector: "app-form-preview", inputs: ["eventApis", "eventApiExecutor", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion", "pages", "activePageId"], outputs: ["pageSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WebsiteDesignerShellComponent, decorators: [{
             type: Component,
@@ -29060,7 +31084,7 @@ class WebsitePreviewShellComponent {
         }
       </main>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "mode", "device", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: JsonFormRendererComponent, selector: "app-json-form-renderer", inputs: ["schema", "initialValues", "initialFieldLabels", "mode", "device", "showLayoutGuides", "breakpoint", "eventLogger", "eventApis", "eventApiExecutor", "navigateToPage", "uploadOnSubmit", "fieldDataAccessMap", "fieldDataAccessApi", "formContentId", "formContentVersion"], outputs: ["valueChange", "groupedValueChange", "combinedValueChange", "validationChange", "uploadedFilesChange", "formSubmit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: WebsitePreviewShellComponent, decorators: [{
             type: Component,
@@ -29701,7 +31725,7 @@ function getTextControlClass(options) {
             : 'border-transparent focus:border-transparent focus:ring-0'
         : options?.invalid
             ? TEXT_CONTROL_INVALID_CLASS
-            : TEXT_CONTROL_VALID_CLASS, 'h-full min-h-0', multiline ? 'min-h-[96px] py-2 leading-6 resize-y' : compact ? 'min-h-[20px] py-0.5' : 'min-h-[20px] py-0.5', options?.leadingInset && 'pl-10', options?.trailingInset && 'pr-10');
+            : TEXT_CONTROL_VALID_CLASS, 'h-full min-h-0', multiline ? 'min-h-[96px] py-2 leading-6 resize-y' : compact ? 'min-h-[30px] py-0.5' : 'min-h-[30px] py-0.5', options?.leadingInset && 'pl-10', options?.trailingInset && 'pr-10');
 }
 function getChoiceControlClass(options) {
     return joinClasses('mt-0.5 h-[18px] w-[18px] border-2 bg-[#FFFFFF] text-[#7FB2FF] transition focus:ring-2 focus:ring-[#7FB2FF] focus:ring-offset-0', options?.radio ? 'rounded-full' : 'rounded-[2px]', options?.invalid ? 'border-red-500 focus:ring-red-200' : 'border-[#3F8CFF] checked:border-[#7FB2FF]');
@@ -29791,6 +31815,9 @@ class TextFieldWidgetComponent {
     isTextarea() {
         return this.config?.type === 'textarea';
     }
+    isColorField() {
+        return this.config?.type === 'color';
+    }
     getControlClass(multiline = false) {
         return getTextControlClass({
             invalid: !!this.error,
@@ -29896,6 +31923,23 @@ class TextFieldWidgetComponent {
     onMouseLeave() {
         this.isControlHovered = false;
     }
+    getColorPickerValue() {
+        const currentValue = this.control.value;
+        if (typeof currentValue === 'string' && currentValue.trim().length > 0) {
+            return currentValue;
+        }
+        const defaultValue = this.config?.defaultValue;
+        if (typeof defaultValue === 'string' && defaultValue.trim().length > 0) {
+            return defaultValue;
+        }
+        return '#000000';
+    }
+    onColorPickerChange(color) {
+        if (this.control.pristine) {
+            this.control.markAsDirty();
+        }
+        this.control.setValue(color);
+    }
     ngOnDestroy() {
         // Cleanup handled by takeUntilDestroyed
     }
@@ -30074,6 +32118,31 @@ class TextFieldWidgetComponent {
             [class]="getControlClass(true)"
             [ngStyle]="getControlStyles()"
             data-fd="field-control"></textarea>
+        } @else if (isColorField()) {
+          <input
+            [id]="fieldId"
+            type="text"
+            [placeholder]="config.placeholder || ''"
+            [formControl]="control"
+            (click)="onClick()"
+            (focus)="onFocus()"
+            (blur)="onBlur()"
+            (mouseenter)="onMouseEnter()"
+            (mouseleave)="onMouseLeave()"
+            [readonly]="config.readonly"
+            [attr.aria-required]="required"
+            [attr.aria-invalid]="!!error"
+            [attr.aria-describedby]="getAriaDescribedBy()"
+            [attr.aria-label]="getAccessibleLabel()"
+            [class]="getControlClass()"
+            [ngStyle]="getControlStyles()"
+            data-fd="field-control"
+            [colorPicker]="getColorPickerValue()"
+            [cpAlphaChannel]="'disabled'"
+            [cpOutputFormat]="'hex'"
+            [cpFallbackColor]="'#000000'"
+            [cpDisabled]="config.readonly || !enabled"
+            (colorPickerChange)="onColorPickerChange($event)">
         } @else {
           <input
             [id]="fieldId"
@@ -30107,14 +32176,14 @@ class TextFieldWidgetComponent {
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextFieldWidgetComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'app-text-field-widget',
                     standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule],
+                    imports: [CommonModule, ReactiveFormsModule, ColorPickerDirective],
                     template: `
     <div [class]="fieldContainerClass"
          [class.hidden]="!visible"
@@ -30153,6 +32222,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [class]="getControlClass(true)"
             [ngStyle]="getControlStyles()"
             data-fd="field-control"></textarea>
+        } @else if (isColorField()) {
+          <input
+            [id]="fieldId"
+            type="text"
+            [placeholder]="config.placeholder || ''"
+            [formControl]="control"
+            (click)="onClick()"
+            (focus)="onFocus()"
+            (blur)="onBlur()"
+            (mouseenter)="onMouseEnter()"
+            (mouseleave)="onMouseLeave()"
+            [readonly]="config.readonly"
+            [attr.aria-required]="required"
+            [attr.aria-invalid]="!!error"
+            [attr.aria-describedby]="getAriaDescribedBy()"
+            [attr.aria-label]="getAccessibleLabel()"
+            [class]="getControlClass()"
+            [ngStyle]="getControlStyles()"
+            data-fd="field-control"
+            [colorPicker]="getColorPickerValue()"
+            [cpAlphaChannel]="'disabled'"
+            [cpOutputFormat]="'hex'"
+            [cpFallbackColor]="'#000000'"
+            [cpDisabled]="config.readonly || !enabled"
+            (colorPickerChange)="onColorPickerChange($event)">
         } @else {
           <input
             [id]="fieldId"
@@ -30606,6 +32700,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                 args: ['fileInput']
             }] } });
 
+function resolveOptionFieldLabel(value, options, existingLabel) {
+    if (value === undefined || value === null || value === '') {
+        return undefined;
+    }
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return undefined;
+        }
+        const labels = value.map((entry, index) => resolveOptionLabel(entry, options, getExistingLabelEntry(existingLabel, index)));
+        return labels.some(label => label !== undefined)
+            ? labels.map((label, index) => label ?? String(value[index] ?? ''))
+            : undefined;
+    }
+    return resolveOptionLabel(value, options, typeof existingLabel === 'string' ? existingLabel : undefined);
+}
+function buildFallbackOptions(value, label) {
+    if (value === undefined || value === null || value === '') {
+        return [];
+    }
+    if (Array.isArray(value)) {
+        return value
+            .filter(entry => entry !== undefined && entry !== null && String(entry).length > 0)
+            .map((entry, index) => ({
+            label: getExistingLabelEntry(label, index) ?? String(entry),
+            value: toOptionValue(entry)
+        }));
+    }
+    return [{
+            label: typeof label === 'string' && label.length > 0 ? label : String(value),
+            value: toOptionValue(value)
+        }];
+}
+function resolveOptionLabel(value, options, existingLabel) {
+    const match = options.find(option => Object.is(option.value, value) || String(option.value) === String(value));
+    if (match?.label) {
+        return match.label;
+    }
+    return existingLabel;
+}
+function getExistingLabelEntry(label, index) {
+    if (Array.isArray(label)) {
+        const entry = label[index];
+        return typeof entry === 'string' && entry.length > 0 ? entry : undefined;
+    }
+    if (typeof label === 'string' && index === 0 && label.length > 0) {
+        return label;
+    }
+    return undefined;
+}
+function toOptionValue(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    return String(value ?? '');
+}
+
 const SELECT_CONTROL_STYLE_KEYS = [
     'height',
     'minHeight',
@@ -30723,6 +32873,7 @@ class SelectWidgetComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(val => {
             if (this.engine) {
+                this.syncStoredFieldLabel(val);
                 this.engine.setValue(this.config.name, val);
                 this.runtimeFieldDataAccessRegistry.invalidateFieldAndDescendants(this.engine, this.config.id);
                 this.engine.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'change', value: val });
@@ -30734,13 +32885,24 @@ class SelectWidgetComponent {
         this.syncEnabledState();
         this.runtimeManagedField = this.runtimeFieldDataAccessRegistry.hasFieldAccess(this.config, this.engine);
         if (!this.runtimeManagedField) {
-            void this.loadOptions(this.currentSearchTerm);
+            if (this.areApiCallsSuppressed() && this.hasSelectedValue()) {
+                this.options = this.withSelectedValueFallbackOptions([]);
+            }
+            else {
+                void this.loadOptions(this.currentSearchTerm);
+            }
             this.runtimeOptionsLoaded = true;
         }
         else if (this.hasSelectedValue()) {
-            void this.loadOptions(this.currentSearchTerm).then(() => {
-                this.runtimeOptionsLoaded = !this.loadError;
-            });
+            if (this.areApiCallsSuppressed()) {
+                this.options = this.withSelectedValueFallbackOptions([]);
+                this.runtimeOptionsLoaded = true;
+            }
+            else {
+                void this.loadOptions(this.currentSearchTerm).then(() => {
+                    this.runtimeOptionsLoaded = !this.loadError;
+                });
+            }
         }
         const dependencyIds = this.getDependencyFieldIds();
         if (this.engine) {
@@ -30750,6 +32912,10 @@ class SelectWidgetComponent {
                 .pipe(takeUntilDestroyed(this.destroyRef))
                 .subscribe(values => {
                 this.syncEnabledState();
+                if (this.areApiCallsSuppressed()) {
+                    this.options = this.withSelectedValueFallbackOptions(this.options);
+                    this.cdr.markForCheck();
+                }
                 if (dependencyIds.length === 0)
                     return;
                 const schema = this.engine.getSchema();
@@ -30974,7 +33140,8 @@ class SelectWidgetComponent {
                 opts = await this.dataProvider.getOptions(this.config, this.engine);
             }
             if (this.requestId === reqId) {
-                this.options = opts;
+                this.options = this.withSelectedValueFallbackOptions(opts);
+                this.syncStoredFieldLabel(this.control.value);
                 this.loading = false;
                 this.loadError = null;
                 this.cdr.markForCheck();
@@ -30985,7 +33152,7 @@ class SelectWidgetComponent {
                 this.loading = false;
                 this.loadError = 'Failed to load options.';
                 if (!isSearch) {
-                    this.options = this.config.staticOptions || [];
+                    this.options = this.withSelectedValueFallbackOptions(this.config.staticOptions || []);
                 }
                 this.cdr.markForCheck();
             }
@@ -31005,6 +33172,11 @@ class SelectWidgetComponent {
             return;
         if (this.runtimeOptionsLoaded && this.options.length > 0)
             return;
+        if (this.areApiCallsSuppressed()) {
+            this.options = this.withSelectedValueFallbackOptions(this.options);
+            this.runtimeOptionsLoaded = true;
+            return;
+        }
         await this.loadOptions(this.currentSearchTerm);
         if (!this.loadError) {
             this.runtimeOptionsLoaded = true;
@@ -31034,14 +33206,7 @@ class SelectWidgetComponent {
         return changed;
     }
     hasSelectedValue() {
-        const value = this.control.value;
-        if (value === undefined || value === null)
-            return false;
-        if (typeof value === 'string')
-            return value.length > 0;
-        if (Array.isArray(value))
-            return value.length > 0;
-        return true;
+        return this.hasMeaningfulValue(this.resolveSelectedValueForFallback());
     }
     handleConfigChange() {
         this.syncEnabledState();
@@ -31051,6 +33216,10 @@ class SelectWidgetComponent {
         this.loadError = null;
         this.currentSearchTerm = '';
         if (!this.runtimeManagedField) {
+            if (this.areApiCallsSuppressed() && this.hasSelectedValue()) {
+                this.options = this.withSelectedValueFallbackOptions([]);
+                return;
+            }
             void this.loadOptions(this.currentSearchTerm);
             return;
         }
@@ -31140,6 +33309,72 @@ class SelectWidgetComponent {
         }
         return fallback;
     }
+    areApiCallsSuppressed() {
+        return areEngineApiCallsSuppressed(this.engine);
+    }
+    withSelectedValueFallbackOptions(options) {
+        const selected = this.getSelectedFallbackOptions();
+        if (selected.length === 0) {
+            return options;
+        }
+        const merged = [...options];
+        for (const option of selected) {
+            if (this.hasOptionValue(merged, option.value))
+                continue;
+            merged.unshift(option);
+        }
+        return merged;
+    }
+    getSelectedFallbackOptions() {
+        const rawValue = this.resolveSelectedValueForFallback();
+        if (!this.hasMeaningfulValue(rawValue)) {
+            return [];
+        }
+        return buildFallbackOptions(rawValue, this.getStoredFieldLabel());
+    }
+    hasOptionValue(options, value) {
+        return options.some(option => Object.is(option.value, value) || String(option.value) === String(value));
+    }
+    resolveSelectedValueForFallback() {
+        const controlValue = this.control.value;
+        if (this.hasMeaningfulValue(controlValue)) {
+            return controlValue;
+        }
+        if (!this.engine
+            || !this.config?.name
+            || typeof this.engine.getValue !== 'function') {
+            return controlValue;
+        }
+        return this.engine.getValue(this.config.name);
+    }
+    hasMeaningfulValue(value) {
+        if (value === undefined || value === null)
+            return false;
+        if (typeof value === 'string')
+            return value.length > 0;
+        if (Array.isArray(value))
+            return value.length > 0;
+        return true;
+    }
+    syncStoredFieldLabel(value) {
+        if (!this.engine || !this.config?.name) {
+            return;
+        }
+        const label = resolveOptionFieldLabel(value, this.options, this.getStoredFieldLabel());
+        this.setStoredFieldLabel(label);
+    }
+    getStoredFieldLabel() {
+        if (!this.engine || typeof this.engine.getFieldLabel !== 'function') {
+            return undefined;
+        }
+        return this.engine.getFieldLabel(this.config.name);
+    }
+    setStoredFieldLabel(label) {
+        if (!this.engine || typeof this.engine.setFieldLabel !== 'function') {
+            return;
+        }
+        this.engine.setFieldLabel(this.config.name, label);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SelectWidgetComponent, isStandalone: true, selector: "app-select-widget", inputs: { config: "config", engine: "engine", control: "control" }, viewQueries: [{ propertyName: "ngSelectComponent", first: true, predicate: NgSelectComponent, descendants: true }], ngImport: i0, template: `
     <div [class]="fieldContainerClass"
@@ -31217,7 +33452,7 @@ class SelectWidgetComponent {
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0;color:var(--fd-select-text-color, #1C2431)}.fd-select-composite{display:flex;width:100%;min-width:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1.5px);border-color:var(--fd-select-border-color, #3F8CFF);border-top-style:var(--fd-select-border-top-style, var(--fd-select-border-style, solid));border-right-style:var(--fd-select-border-right-style, var(--fd-select-border-style, solid));border-bottom-style:var(--fd-select-border-bottom-style, var(--fd-select-border-style, solid));border-left-style:var(--fd-select-border-left-style, var(--fd-select-border-style, solid));border-top-width:var(--fd-select-border-top-width, var(--fd-select-border-width, 1.5px));border-right-width:var(--fd-select-border-right-width, var(--fd-select-border-width, 1.5px));border-bottom-width:var(--fd-select-border-bottom-width, var(--fd-select-border-width, 1.5px));border-left-width:var(--fd-select-border-left-width, var(--fd-select-border-width, 1.5px));border-top-color:var(--fd-select-border-top-color, var(--fd-select-border-color, #3F8CFF));border-right-color:var(--fd-select-border-right-color, var(--fd-select-border-color, #3F8CFF));border-bottom-color:var(--fd-select-border-bottom-color, var(--fd-select-border-color, #3F8CFF));border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-radius:var(--fd-select-border-radius, 4px);border-top-left-radius:var(--fd-select-border-top-left-radius, var(--fd-select-border-radius, 4px));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-bottom-left-radius:var(--fd-select-border-bottom-left-radius, var(--fd-select-border-radius, 4px));background:var(--fd-select-background-color, #FFFFFF);box-shadow:var(--fd-select-box-shadow, none);transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select:hover .ng-select-container{border-color:var(--fd-select-hover-border-color, var(--fd-select-border-color, #3F8CFF))}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:var(--fd-select-interactive-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-interactive-border-color, #7FB2FF)}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:var(--fd-select-invalid-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-invalid-border-color, #EF4444)}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding-top:var(--fd-select-padding-top, 2px);padding-right:var(--fd-select-padding-right, 12px);padding-bottom:var(--fd-select-padding-bottom, 2px);padding-left:var(--fd-select-padding-left, 12px);gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px)}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:var(--fd-select-arrow-padding-right, 12px)}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-arrow-wrapper,:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-clear-wrapper{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:var(--fd-select-icon-color, rgba(28, 36, 49, .6)) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:var(--fd-select-icon-color, rgba(28, 36, 49, .6))}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}.fd-select-pill{display:inline-flex;align-items:center;gap:8px;height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);padding:0 12px;border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1px);border-color:var(--fd-select-border-color, #3F8CFF);border-left-width:var(--fd-select-border-left-width, 1px);border-left-style:var(--fd-select-border-left-style, solid);border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fd-select-background-color, #FFFFFF);color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px);box-shadow:var(--fd-select-box-shadow, none);white-space:nowrap;cursor:pointer}.fd-select-pill:disabled{cursor:default;opacity:.7}.fd-select-pill__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fd-select-icon-color, rgba(28, 36, 49, .6))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
+  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0;color:var(--fd-select-text-color, #1C2431)}.fd-select-composite{display:flex;width:100%;min-width:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 30px);border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1.5px);border-color:var(--fd-select-border-color, #3F8CFF);border-top-style:var(--fd-select-border-top-style, var(--fd-select-border-style, solid));border-right-style:var(--fd-select-border-right-style, var(--fd-select-border-style, solid));border-bottom-style:var(--fd-select-border-bottom-style, var(--fd-select-border-style, solid));border-left-style:var(--fd-select-border-left-style, var(--fd-select-border-style, solid));border-top-width:var(--fd-select-border-top-width, var(--fd-select-border-width, 1.5px));border-right-width:var(--fd-select-border-right-width, var(--fd-select-border-width, 1.5px));border-bottom-width:var(--fd-select-border-bottom-width, var(--fd-select-border-width, 1.5px));border-left-width:var(--fd-select-border-left-width, var(--fd-select-border-width, 1.5px));border-top-color:var(--fd-select-border-top-color, var(--fd-select-border-color, #3F8CFF));border-right-color:var(--fd-select-border-right-color, var(--fd-select-border-color, #3F8CFF));border-bottom-color:var(--fd-select-border-bottom-color, var(--fd-select-border-color, #3F8CFF));border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-radius:var(--fd-select-border-radius, 4px);border-top-left-radius:var(--fd-select-border-top-left-radius, var(--fd-select-border-radius, 4px));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-bottom-left-radius:var(--fd-select-border-bottom-left-radius, var(--fd-select-border-radius, 4px));background:var(--fd-select-background-color, #FFFFFF);box-shadow:var(--fd-select-box-shadow, none);transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select:hover .ng-select-container{border-color:var(--fd-select-hover-border-color, var(--fd-select-border-color, #3F8CFF))}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:var(--fd-select-interactive-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-interactive-border-color, #7FB2FF)}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:var(--fd-select-invalid-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-invalid-border-color, #EF4444)}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding-top:var(--fd-select-padding-top, 2px);padding-right:var(--fd-select-padding-right, 12px);padding-bottom:var(--fd-select-padding-bottom, 2px);padding-left:var(--fd-select-padding-left, 12px);gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px)}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:var(--fd-select-arrow-padding-right, 12px)}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-arrow-wrapper,:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-clear-wrapper{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:var(--fd-select-icon-color, rgba(28, 36, 49, .6)) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:var(--fd-select-icon-color, rgba(28, 36, 49, .6))}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}.fd-select-pill{display:inline-flex;align-items:center;gap:8px;height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 30px);padding:0 12px;border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1px);border-color:var(--fd-select-border-color, #3F8CFF);border-left-width:var(--fd-select-border-left-width, 1px);border-left-style:var(--fd-select-border-left-style, solid);border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fd-select-background-color, #FFFFFF);color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px);box-shadow:var(--fd-select-box-shadow, none);white-space:nowrap;cursor:pointer}.fd-select-pill:disabled{cursor:default;opacity:.7}.fd-select-pill__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fd-select-icon-color, rgba(28, 36, 49, .6))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
@@ -31297,7 +33532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0;color:var(--fd-select-text-color, #1C2431)}.fd-select-composite{display:flex;width:100%;min-width:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1.5px);border-color:var(--fd-select-border-color, #3F8CFF);border-top-style:var(--fd-select-border-top-style, var(--fd-select-border-style, solid));border-right-style:var(--fd-select-border-right-style, var(--fd-select-border-style, solid));border-bottom-style:var(--fd-select-border-bottom-style, var(--fd-select-border-style, solid));border-left-style:var(--fd-select-border-left-style, var(--fd-select-border-style, solid));border-top-width:var(--fd-select-border-top-width, var(--fd-select-border-width, 1.5px));border-right-width:var(--fd-select-border-right-width, var(--fd-select-border-width, 1.5px));border-bottom-width:var(--fd-select-border-bottom-width, var(--fd-select-border-width, 1.5px));border-left-width:var(--fd-select-border-left-width, var(--fd-select-border-width, 1.5px));border-top-color:var(--fd-select-border-top-color, var(--fd-select-border-color, #3F8CFF));border-right-color:var(--fd-select-border-right-color, var(--fd-select-border-color, #3F8CFF));border-bottom-color:var(--fd-select-border-bottom-color, var(--fd-select-border-color, #3F8CFF));border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-radius:var(--fd-select-border-radius, 4px);border-top-left-radius:var(--fd-select-border-top-left-radius, var(--fd-select-border-radius, 4px));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-bottom-left-radius:var(--fd-select-border-bottom-left-radius, var(--fd-select-border-radius, 4px));background:var(--fd-select-background-color, #FFFFFF);box-shadow:var(--fd-select-box-shadow, none);transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select:hover .ng-select-container{border-color:var(--fd-select-hover-border-color, var(--fd-select-border-color, #3F8CFF))}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:var(--fd-select-interactive-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-interactive-border-color, #7FB2FF)}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:var(--fd-select-invalid-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-invalid-border-color, #EF4444)}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding-top:var(--fd-select-padding-top, 2px);padding-right:var(--fd-select-padding-right, 12px);padding-bottom:var(--fd-select-padding-bottom, 2px);padding-left:var(--fd-select-padding-left, 12px);gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px)}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:var(--fd-select-arrow-padding-right, 12px)}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-arrow-wrapper,:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-clear-wrapper{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:var(--fd-select-icon-color, rgba(28, 36, 49, .6)) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:var(--fd-select-icon-color, rgba(28, 36, 49, .6))}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}.fd-select-pill{display:inline-flex;align-items:center;gap:8px;height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 20px);padding:0 12px;border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1px);border-color:var(--fd-select-border-color, #3F8CFF);border-left-width:var(--fd-select-border-left-width, 1px);border-left-style:var(--fd-select-border-left-style, solid);border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fd-select-background-color, #FFFFFF);color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px);box-shadow:var(--fd-select-box-shadow, none);white-space:nowrap;cursor:pointer}.fd-select-pill:disabled{cursor:default;opacity:.7}.fd-select-pill__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fd-select-icon-color, rgba(28, 36, 49, .6))}\n"] }]
+  `, styles: [":host ::ng-deep ng-select.fd-select{display:block;min-height:0;color:var(--fd-select-text-color, #1C2431)}.fd-select-composite{display:flex;width:100%;min-width:0}:host ::ng-deep ng-select.fd-select .ng-select-container{height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 30px);border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1.5px);border-color:var(--fd-select-border-color, #3F8CFF);border-top-style:var(--fd-select-border-top-style, var(--fd-select-border-style, solid));border-right-style:var(--fd-select-border-right-style, var(--fd-select-border-style, solid));border-bottom-style:var(--fd-select-border-bottom-style, var(--fd-select-border-style, solid));border-left-style:var(--fd-select-border-left-style, var(--fd-select-border-style, solid));border-top-width:var(--fd-select-border-top-width, var(--fd-select-border-width, 1.5px));border-right-width:var(--fd-select-border-right-width, var(--fd-select-border-width, 1.5px));border-bottom-width:var(--fd-select-border-bottom-width, var(--fd-select-border-width, 1.5px));border-left-width:var(--fd-select-border-left-width, var(--fd-select-border-width, 1.5px));border-top-color:var(--fd-select-border-top-color, var(--fd-select-border-color, #3F8CFF));border-right-color:var(--fd-select-border-right-color, var(--fd-select-border-color, #3F8CFF));border-bottom-color:var(--fd-select-border-bottom-color, var(--fd-select-border-color, #3F8CFF));border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-radius:var(--fd-select-border-radius, 4px);border-top-left-radius:var(--fd-select-border-top-left-radius, var(--fd-select-border-radius, 4px));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-bottom-left-radius:var(--fd-select-border-bottom-left-radius, var(--fd-select-border-radius, 4px));background:var(--fd-select-background-color, #FFFFFF);box-shadow:var(--fd-select-box-shadow, none);transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select:hover .ng-select-container{border-color:var(--fd-select-hover-border-color, var(--fd-select-border-color, #3F8CFF))}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:var(--fd-select-interactive-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-interactive-border-color, #7FB2FF)}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:var(--fd-select-invalid-border-width, var(--fd-select-border-width, 1.5px));border-color:var(--fd-select-invalid-border-color, #EF4444)}:host ::ng-deep ng-select.fd-select .ng-value-container{align-items:center;min-height:100%;padding-top:var(--fd-select-padding-top, 2px);padding-right:var(--fd-select-padding-right, 12px);padding-bottom:var(--fd-select-padding-bottom, 2px);padding-left:var(--fd-select-padding-left, 12px);gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px)}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:var(--fd-select-arrow-padding-right, 12px)}:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-arrow-wrapper,:host ::ng-deep ng-select.fd-select.fd-select--with-pill .ng-clear-wrapper{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:var(--fd-select-icon-color, rgba(28, 36, 49, .6)) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:var(--fd-select-icon-color, rgba(28, 36, 49, .6))}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}.fd-select-pill{display:inline-flex;align-items:center;gap:8px;height:var(--fd-select-height, 100%);min-height:var(--fd-select-min-height, 30px);padding:0 12px;border-style:var(--fd-select-border-style, solid);border-width:var(--fd-select-border-width, 1px);border-color:var(--fd-select-border-color, #3F8CFF);border-left-width:var(--fd-select-border-left-width, 1px);border-left-style:var(--fd-select-border-left-style, solid);border-left-color:var(--fd-select-border-left-color, var(--fd-select-border-color, #3F8CFF));border-top-right-radius:var(--fd-select-border-top-right-radius, var(--fd-select-border-radius, 4px));border-bottom-right-radius:var(--fd-select-border-bottom-right-radius, var(--fd-select-border-radius, 4px));border-top-left-radius:0;border-bottom-left-radius:0;background:var(--fd-select-background-color, #FFFFFF);color:var(--fd-select-text-color, #1C2431);font-size:var(--fd-select-font-size, 14px);font-weight:var(--fd-select-font-weight, 400);line-height:var(--fd-select-line-height, 20px);box-shadow:var(--fd-select-box-shadow, none);white-space:nowrap;cursor:pointer}.fd-select-pill:disabled{cursor:default;opacity:.7}.fd-select-pill__arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--fd-select-icon-color, rgba(28, 36, 49, .6))}\n"] }]
         }], propDecorators: { ngSelectComponent: [{
                 type: ViewChild,
                 args: [NgSelectComponent]
@@ -31332,6 +33567,7 @@ class SearchWidgetComponent {
     requestId = 0;
     syncingFromQuery = false;
     selectingOption = false;
+    pendingSelectedLabel;
     focused = false;
     hovered = false;
     blurCloseTimeout = null;
@@ -31388,7 +33624,7 @@ class SearchWidgetComponent {
     }
     ngOnInit() {
         this.syncEnabledState();
-        this.queryControl.setValue(this.asQueryString(this.control.value), { emitEvent: false });
+        this.queryControl.setValue(this.getDisplayValue(this.control.value), { emitEvent: false });
         this.queryControl.valueChanges
             .pipe(debounceTime(this.getDebounceMs()), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(query => {
@@ -31398,6 +33634,16 @@ class SearchWidgetComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(value => {
             if (this.engine) {
+                if (this.pendingSelectedLabel !== undefined) {
+                    this.setStoredFieldLabel(this.pendingSelectedLabel);
+                    this.pendingSelectedLabel = undefined;
+                }
+                else if (this.syncingFromQuery) {
+                    this.setStoredFieldLabel(undefined);
+                }
+                else {
+                    this.setStoredFieldLabel(resolveOptionFieldLabel(value, this.options, this.getStoredFieldLabel()));
+                }
                 this.engine.setValue(this.config.name, value);
                 this.runtimeFieldDataAccessRegistry.invalidateFieldAndDescendants(this.engine, this.config.id);
                 this.engine.emitUiEvent({
@@ -31413,7 +33659,7 @@ class SearchWidgetComponent {
             if (this.syncingFromQuery || this.selectingOption) {
                 return;
             }
-            this.queryControl.setValue(this.asQueryString(value), { emitEvent: false });
+            this.queryControl.setValue(this.getDisplayValue(value), { emitEvent: false });
         });
         if (this.engine) {
             const dataSourceUpdates$ = this.engine.dataSourceUpdates$;
@@ -31529,6 +33775,7 @@ class SearchWidgetComponent {
     }
     selectOption(option) {
         this.selectingOption = true;
+        this.pendingSelectedLabel = String(option.label ?? '');
         this.queryControl.setValue(String(option.label ?? ''), { emitEvent: false });
         this.options = [];
         this.activeOptionIndex = -1;
@@ -31666,6 +33913,25 @@ class SearchWidgetComponent {
             return '';
         return String(value);
     }
+    getDisplayValue(value) {
+        const fieldLabel = this.getStoredFieldLabel();
+        if (typeof fieldLabel === 'string' && fieldLabel.length > 0) {
+            return fieldLabel;
+        }
+        return this.asQueryString(value);
+    }
+    getStoredFieldLabel() {
+        if (!this.engine || typeof this.engine.getFieldLabel !== 'function') {
+            return undefined;
+        }
+        return this.engine.getFieldLabel(this.config.name);
+    }
+    setStoredFieldLabel(label) {
+        if (!this.engine || typeof this.engine.setFieldLabel !== 'function') {
+            return;
+        }
+        this.engine.setFieldLabel(this.config.name, label);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SearchWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SearchWidgetComponent, isStandalone: true, selector: "app-search-widget", inputs: { config: "config", engine: "engine", control: "control" }, ngImport: i0, template: `
     <div [class]="fieldContainerClass"
@@ -32428,6 +34694,7 @@ class RadioWidgetComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(val => {
             if (this.engine) {
+                this.setStoredFieldLabel(resolveOptionFieldLabel(val, this.options, this.getStoredFieldLabel()));
                 this.engine.setValue(this.config.name, val);
                 this.engine.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'change', value: val });
                 if (this.control.dirty) {
@@ -32436,7 +34703,12 @@ class RadioWidgetComponent {
             }
         });
         this.syncEnabledState();
-        await this.loadOptions();
+        if (this.areApiCallsSuppressed() && this.hasSelectedValue()) {
+            this.options = this.withSelectedValueFallbackOptions([]);
+        }
+        else {
+            await this.loadOptions();
+        }
         // Dependencies
         const dependencyIds = this.getDependencyFieldIds();
         if (this.engine) {
@@ -32492,7 +34764,10 @@ class RadioWidgetComponent {
             // Radio doesn't typically support search, so just get options
             opts = await this.dataProvider.getOptions(this.config, this.engine);
             if (this.requestId === reqId) {
-                this.options = opts;
+                this.options = this.withSelectedValueFallbackOptions(opts);
+                if (this.engine) {
+                    this.setStoredFieldLabel(resolveOptionFieldLabel(this.control.value, this.options, this.getStoredFieldLabel()));
+                }
                 this.loading = false;
                 this.loadError = null;
                 this.cdr.markForCheck();
@@ -32502,7 +34777,7 @@ class RadioWidgetComponent {
             if (this.requestId === reqId) {
                 this.loading = false;
                 this.loadError = 'Failed to load options.';
-                this.options = this.config.staticOptions || [];
+                this.options = this.withSelectedValueFallbackOptions(this.config.staticOptions || []);
                 this.cdr.markForCheck();
             }
         }
@@ -32551,6 +34826,38 @@ class RadioWidgetComponent {
             this.control.disable({ emitEvent: false });
         }
     }
+    areApiCallsSuppressed() {
+        return areEngineApiCallsSuppressed(this.engine);
+    }
+    hasSelectedValue() {
+        return this.control.value !== undefined && this.control.value !== null && this.control.value !== '';
+    }
+    withSelectedValueFallbackOptions(options) {
+        const fallback = buildFallbackOptions(this.control.value, this.getStoredFieldLabel());
+        if (fallback.length === 0) {
+            return options;
+        }
+        const merged = [...options];
+        for (const option of fallback) {
+            if (merged.some(existing => Object.is(existing.value, option.value) || String(existing.value) === String(option.value))) {
+                continue;
+            }
+            merged.unshift(option);
+        }
+        return merged;
+    }
+    getStoredFieldLabel() {
+        if (!this.engine || typeof this.engine.getFieldLabel !== 'function') {
+            return undefined;
+        }
+        return this.engine.getFieldLabel(this.config.name);
+    }
+    setStoredFieldLabel(label) {
+        if (!this.engine || typeof this.engine.setFieldLabel !== 'function') {
+            return;
+        }
+        this.engine.setFieldLabel(this.config.name, label);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RadioWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: RadioWidgetComponent, isStandalone: true, selector: "app-radio-widget", inputs: { config: "config", engine: "engine", control: "control" }, usesOnChanges: true, ngImport: i0, template: `
     <div [class]="fieldContainerClass"
@@ -32679,6 +34986,7 @@ class CheckboxGroupWidgetComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(val => {
             if (this.engine) {
+                this.setStoredFieldLabel(resolveOptionFieldLabel(val, this.options, this.getStoredFieldLabel()));
                 this.engine.setValue(this.config.name, val);
                 this.engine.emitUiEvent({ fieldId: this.config.id, fieldName: this.config.name, type: 'change', value: val });
                 if (this.control.dirty) {
@@ -32687,7 +34995,12 @@ class CheckboxGroupWidgetComponent {
             }
         });
         // this.syncEnabledState(); // Checkboxes individually disabled via [disabled] binding
-        await this.loadOptions();
+        if (this.areApiCallsSuppressed() && this.hasSelectedValue()) {
+            this.options = this.withSelectedValueFallbackOptions([]);
+        }
+        else {
+            await this.loadOptions();
+        }
         // Dependencies
         const dependencyIds = this.getDependencyFieldIds();
         if (this.engine) {
@@ -32742,7 +35055,10 @@ class CheckboxGroupWidgetComponent {
             let opts = [];
             opts = await this.dataProvider.getOptions(this.config, this.engine);
             if (this.requestId === reqId) {
-                this.options = opts;
+                this.options = this.withSelectedValueFallbackOptions(opts);
+                if (this.engine) {
+                    this.setStoredFieldLabel(resolveOptionFieldLabel(this.control.value, this.options, this.getStoredFieldLabel()));
+                }
                 this.loading = false;
                 this.loadError = null;
                 this.cdr.markForCheck();
@@ -32752,7 +35068,7 @@ class CheckboxGroupWidgetComponent {
             if (this.requestId === reqId) {
                 this.loading = false;
                 this.loadError = 'Failed to load options.';
-                this.options = this.config.staticOptions || [];
+                this.options = this.withSelectedValueFallbackOptions(this.config.staticOptions || []);
                 this.cdr.markForCheck();
             }
         }
@@ -32820,6 +35136,38 @@ class CheckboxGroupWidgetComponent {
             }
         }
     }
+    areApiCallsSuppressed() {
+        return areEngineApiCallsSuppressed(this.engine);
+    }
+    hasSelectedValue() {
+        return Array.isArray(this.control.value) && this.control.value.length > 0;
+    }
+    withSelectedValueFallbackOptions(options) {
+        const fallback = buildFallbackOptions(this.control.value, this.getStoredFieldLabel());
+        if (fallback.length === 0) {
+            return options;
+        }
+        const merged = [...options];
+        for (const option of fallback) {
+            if (merged.some(existing => Object.is(existing.value, option.value) || String(existing.value) === String(option.value))) {
+                continue;
+            }
+            merged.unshift(option);
+        }
+        return merged;
+    }
+    getStoredFieldLabel() {
+        if (!this.engine || typeof this.engine.getFieldLabel !== 'function') {
+            return undefined;
+        }
+        return this.engine.getFieldLabel(this.config.name);
+    }
+    setStoredFieldLabel(label) {
+        if (!this.engine || typeof this.engine.setFieldLabel !== 'function') {
+            return;
+        }
+        this.engine.setFieldLabel(this.config.name, label);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: CheckboxGroupWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: CheckboxGroupWidgetComponent, isStandalone: true, selector: "app-checkbox-group-widget", inputs: { config: "config", engine: "engine", control: "control" }, usesOnChanges: true, ngImport: i0, template: `
     <div [class]="fieldContainerClass"
@@ -33485,7 +35833,7 @@ class RepeatableGroupWidgetComponent {
         </div>
       </ng-template>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LayoutNodeComponent, selector: "app-layout-node", inputs: ["node", "engine", "fields", "designMode", "showLayoutGuides", "readOnlyMode", "scopePath", "device", "breakpoint", "connectedDropLists"], outputs: ["nodeDrop", "nodeSelect"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RepeatableGroupWidgetComponent, decorators: [{
             type: Component,
@@ -37799,6 +40147,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                     args: [DOCUMENT]
                 }] }] });
 
+class AiToolRegistryService {
+    state;
+    widgetDefs;
+    eventApis;
+    plugins;
+    toolByName;
+    constructor() {
+        this.state = inject(DesignerStateService);
+        const injectedWidgetDefs = inject(WIDGET_DEFINITIONS, { optional: true }) ?? [];
+        this.widgetDefs = injectedWidgetDefs.flat();
+        this.eventApis = [];
+        this.plugins = [FORM_DESIGNER_AI_TOOL_PLUGIN];
+        this.toolByName = this.buildToolIndex(this.plugins);
+    }
+    /**
+     * Create an instance directly for testing without Angular DI.
+     */
+    static forTest(state, eventApis, plugins, widgetDefs) {
+        const instance = Object.create(AiToolRegistryService.prototype);
+        instance.state = state;
+        instance.eventApis = eventApis ? [...eventApis] : [];
+        instance.widgetDefs = widgetDefs ? [...widgetDefs] : [];
+        instance.plugins = plugins?.length ? [...plugins] : [FORM_DESIGNER_AI_TOOL_PLUGIN];
+        instance.toolByName = instance.buildToolIndex(instance.plugins);
+        return instance;
+    }
+    describeTools() {
+        return this.plugins.flatMap((plugin) => plugin.tools.map((tool) => ({
+            name: tool.name,
+            description: tool.summary,
+            summary: tool.summary,
+            domain: tool.domain,
+            readOnly: tool.readOnly,
+            tags: tool.tags,
+            whenToUse: tool.whenToUse,
+            whenNotToUse: tool.whenNotToUse,
+            exampleIntents: tool.exampleIntents,
+            requiresSelection: tool.requiresSelection,
+            requiresCapabilities: tool.requiresCapabilities,
+            requiredAuthScopes: tool.requiredAuthScopes,
+            parametersSchema: tool.parametersSchema,
+        })));
+    }
+    async execute(name, args) {
+        const tool = this.toolByName.get(name);
+        if (!tool) {
+            return {
+                ok: false,
+                result: null,
+                error: `Unknown tool: "${name}"`,
+            };
+        }
+        const context = this.createContext();
+        if (tool.isApplicable && !tool.isApplicable(context)) {
+            return {
+                ok: false,
+                result: null,
+                error: `Tool "${name}" is not applicable in current context.`,
+            };
+        }
+        const result = await tool.execute(context, args);
+        return result;
+    }
+    getDiscoveryContext() {
+        return {
+            workspace: 'designer',
+            readOnly: this.state.isReadOnly(),
+            hasSelection: !!this.state.selectedNodeId(),
+            capabilities: {
+                eventApis: this.eventApis.length > 0,
+                widgetCatalog: this.widgetDefs.length > 0,
+            },
+        };
+    }
+    /** Allow host/shell to update available event APIs at runtime. */
+    setEventApis(apis) {
+        this.eventApis = [...apis];
+    }
+    /** Allow host/shell to update widget catalog at runtime. */
+    setWidgetDefinitions(widgetDefs) {
+        this.widgetDefs = [...widgetDefs];
+    }
+    /** Register additional plain TS plugins without requiring Angular DI contracts. */
+    registerPlugin(plugin) {
+        this.plugins = [...this.plugins, plugin];
+        this.toolByName = this.buildToolIndex(this.plugins);
+    }
+    createContext() {
+        return {
+            state: this.state,
+            eventApis: this.eventApis,
+            widgetDefs: this.widgetDefs,
+        };
+    }
+    buildToolIndex(plugins) {
+        const index = new Map();
+        for (const plugin of plugins) {
+            for (const tool of plugin.tools) {
+                index.set(tool.name, tool);
+            }
+        }
+        return index;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiToolRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiToolRegistryService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: AiToolRegistryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
 class InMemoryDataCatalogService extends DataCatalog {
     sources = [];
     listSources() {
@@ -37971,5 +40429,5 @@ function provideHttpDataSourceClient(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { APPEARANCE_FIELDS, AiToolRegistryService, CONTENT_TEXT_CLASS, CONTENT_TEXT_MUTED_CLASS, CORE_DESIGNER_PLUGINS, CURRENT_SCHEMA_VERSION, DATA_PROVIDER, DATA_SOURCE_CLIENT, DEFAULT_TEMPLATE_LIBRARY, DEFAULT_WEBSITE_SECTIONS, DEFAULT_WIDGET_PACKS, DESIGNER_PLUGINS, DESIGNER_SECTIONS, DataCatalog, DataPanelComponent, DataProvider, DefaultDataProvider, DefaultDataSourceClient, DefaultFileUploadClient, DesignerContext, DesignerStateService, DynamicPropertiesComponent, EFFECTS_FIELDS, EMAIL_SAFE_STYLE_SECTIONS, EMAIL_WIDGETS, EmailRendererComponent, EventsPanelComponent, EventsWorkspaceComponent, FIELD_CHOICE_LABEL_CLASS, FIELD_CHOICE_SURFACE_CLASS, FIELD_CONTAINER_CLASS, FIELD_ERROR_CLASS, FIELD_HELP_CLASS, FIELD_LABEL_CLASS, FIELD_OPTION_CLASS, FIELD_REQUIRED_CLASS, FIELD_RESULTS_PANEL_CLASS, FIELD_WIDGETS, FILE_UPLOAD_CARD_CLASS, FILE_UPLOAD_CLIENT, FORM_DESIGNER_AI_TOOL_PLUGIN, FULL_WEB_STYLE_SECTIONS, FieldPaletteComponent, FormDesignerShellComponent, FormEngine, FormViewerComponent, GlobalDataManagerComponent, HTTP_DATA_SOURCE_CLIENT_CONFIG, HttpDataSourceClient, InMemoryDataCatalogService, InspectorAdvancedSectionComponent, InspectorBackgroundsSectionComponent, InspectorBordersSectionComponent, InspectorEffectsSectionComponent, InspectorLayoutSectionComponent, InspectorPositionSectionComponent, InspectorSizeSectionComponent, InspectorSpacingSectionComponent, InspectorSpinInputComponent, InspectorTypographySectionComponent, JsonFormDesignerComponent, JsonFormRendererComponent, LAYOUT_FIELDS, LayoutCanvasComponent, LayoutNodeComponent, OUTLINED_FIELD_BORDER_WIDTH, OUTLINED_FIELD_IDLE_BORDER_COLOR, OUTLINED_FIELD_INTERACTIVE_BORDER_COLOR, OUTLINED_FIELD_INVALID_BORDER_COLOR, PAGE_WIDGETS, PropertiesPanelComponent, RulesPanelComponent, RuntimeFieldDataAccessRegistryService, SELECT_THEME_HOOKS, SELECT_THEME_TOKENS, SPACING_BOX_MODEL_FIELD, SPACING_MARGIN_FIELDS, SPACING_PADDING_FIELDS, STANDARD_FORM_STYLE_SECTIONS, STYLE_APPEARANCE_SECTION, STYLE_EFFECTS_SECTION, STYLE_LAYOUT_SECTION, STYLE_SECTIONS, STYLE_SPACING_SECTION, STYLE_TRANSFORM_SECTION, STYLE_TYPOGRAPHY_SECTION, TABLE_CELL_CLASS, TABLE_EMPTY_CLASS, TABLE_GRID_CLASS, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_ICON_BUTTON_CLASS, TABLE_ROOT_CLASS, TABLE_ROW_CLASS, TABLE_TOOLBAR_CLASS, TRANSFORM_FIELDS, TYPOGRAPHY_FIELDS, ThemeService, UiAccordionComponent, UiBoxModelComponent, UiColorSwatchComponent, UiDimensionComponent, UiEdgeBoxComponent, UiFieldWrapperComponent, UiInputComponent, UiRangeNumberComponent, UiSelectIconComponent, UiTabComponent, UiTabsComponent, WIDGET_DEFINITIONS, WIDGET_ID_SEPARATOR, WebsiteBrickStudioComponent, WebsiteDesignerShellComponent, WebsitePreviewShellComponent, WebsiteProjectService, WidgetDefinitionResolverService, WidgetInspectorComponent, appendSectionToSchema, buildWidgetId, checkSchemaForApiOnlySources, createDefaultWebsiteBrick, createDefaultWebsiteBricks, createDefaultWebsiteTheme, createEmptySchema, createFormEngine, createPluginContext, createWebsiteBrick, createWebsitePage, createWebsiteProject, defineWidget, flattenPluginWidgets, getButtonClass, getChoiceControlClass, getEffectiveDataConfig, getFileInputClass, getFileUploadShellClass, getHeadingClass, getOutlinedFieldInlineStyle, getTextControlClass, getWidgetsForFlavor, hasWrapperSurfaceStyles, inferSchema, isWidgetVisibleInPalette, mergeAndNormalize, normalizeRuntimeOptions, normalizeStyle$1 as normalizeStyle, parseCsv, parseJsonArray, parseSchema, provideDesignerPlugins, provideHttpDataSourceClient, serializeSchema, slugifyId, splitControlSurfaceStyles, stripEmbeddedSourceData };
+export { APPEARANCE_FIELDS, AiToolRegistryService, CONTENT_TEXT_CLASS, CONTENT_TEXT_MUTED_CLASS, CORE_DESIGNER_PLUGINS, CURRENT_SCHEMA_VERSION, DATA_PROVIDER, DATA_SOURCE_CLIENT, DEFAULT_TEMPLATE_LIBRARY, DEFAULT_WEBSITE_SECTIONS, DEFAULT_WIDGET_PACKS, DESIGNER_PLUGINS, DESIGNER_SECTIONS, DataCatalog, DataPanelComponent, DataProvider, DefaultDataProvider, DefaultDataSourceClient, DefaultFileUploadClient, DesignerContext, DesignerStateService, DynamicPropertiesComponent, EFFECTS_FIELDS, EMAIL_SAFE_STYLE_SECTIONS, EMAIL_WIDGETS, EmailRendererComponent, EventsPanelComponent, EventsWorkspaceComponent, FIELD_CHOICE_LABEL_CLASS, FIELD_CHOICE_SURFACE_CLASS, FIELD_CONTAINER_CLASS, FIELD_ERROR_CLASS, FIELD_HELP_CLASS, FIELD_LABEL_CLASS, FIELD_OPTION_CLASS, FIELD_REQUIRED_CLASS, FIELD_RESULTS_PANEL_CLASS, FIELD_WIDGETS, FILE_UPLOAD_CARD_CLASS, FILE_UPLOAD_CLIENT, FORM_DESIGNER_AI_TOOL_PLUGIN, FULL_WEB_STYLE_SECTIONS, FieldPaletteComponent, FormDesignerAiFeatureStateService, FormDesignerShellComponent, FormEngine, FormJourneyStateService, FormJourneyViewerComponent, FormViewerComponent, GlobalDataManagerComponent, HTTP_DATA_SOURCE_CLIENT_CONFIG, HttpDataSourceClient, InMemoryDataCatalogService, InspectorAdvancedSectionComponent, InspectorBackgroundsSectionComponent, InspectorBordersSectionComponent, InspectorEffectsSectionComponent, InspectorLayoutSectionComponent, InspectorPositionSectionComponent, InspectorSizeSectionComponent, InspectorSpacingSectionComponent, InspectorSpinInputComponent, InspectorTypographySectionComponent, JsonFormDesignerComponent, JsonFormRendererComponent, LAYOUT_FIELDS, LayoutCanvasComponent, LayoutNodeComponent, OUTLINED_FIELD_BORDER_WIDTH, OUTLINED_FIELD_IDLE_BORDER_COLOR, OUTLINED_FIELD_INTERACTIVE_BORDER_COLOR, OUTLINED_FIELD_INVALID_BORDER_COLOR, PAGE_WIDGETS, PropertiesPanelComponent, RulesPanelComponent, RuntimeFieldDataAccessRegistryService, SELECT_THEME_HOOKS, SELECT_THEME_TOKENS, SPACING_BOX_MODEL_FIELD, SPACING_MARGIN_FIELDS, SPACING_PADDING_FIELDS, STANDARD_FORM_STYLE_SECTIONS, STYLE_APPEARANCE_SECTION, STYLE_EFFECTS_SECTION, STYLE_LAYOUT_SECTION, STYLE_SECTIONS, STYLE_SPACING_SECTION, STYLE_TRANSFORM_SECTION, STYLE_TYPOGRAPHY_SECTION, TABLE_CELL_CLASS, TABLE_EMPTY_CLASS, TABLE_GRID_CLASS, TABLE_HEAD_CELL_CLASS, TABLE_HEAD_CLASS, TABLE_ICON_BUTTON_CLASS, TABLE_ROOT_CLASS, TABLE_ROW_CLASS, TABLE_TOOLBAR_CLASS, TRANSFORM_FIELDS, TYPOGRAPHY_FIELDS, ThemeService, UiAccordionComponent, UiBoxModelComponent, UiColorSwatchComponent, UiDimensionComponent, UiEdgeBoxComponent, UiFieldWrapperComponent, UiInputComponent, UiRangeNumberComponent, UiSelectIconComponent, UiTabComponent, UiTabsComponent, WIDGET_DEFINITIONS, WIDGET_ID_SEPARATOR, WebsiteBrickStudioComponent, WebsiteDesignerShellComponent, WebsitePreviewShellComponent, WebsiteProjectService, WidgetDefinitionResolverService, WidgetInspectorComponent, appendSectionToSchema, buildWidgetId, checkSchemaForApiOnlySources, createDefaultWebsiteBrick, createDefaultWebsiteBricks, createDefaultWebsiteTheme, createEmptySchema, createFormEngine, createFormJourneyPage, createFormJourneyProject, createPluginContext, createWebsiteBrick, createWebsitePage, createWebsiteProject, defineWidget, flattenPluginWidgets, getButtonClass, getChoiceControlClass, getEffectiveDataConfig, getFileInputClass, getFileUploadShellClass, getHeadingClass, getOutlinedFieldInlineStyle, getTextControlClass, getWidgetsForFlavor, hasWrapperSurfaceStyles, inferSchema, isFormJourneyProject, isWidgetVisibleInPalette, mergeAndNormalize, normalizeRuntimeOptions, normalizeStyle$1 as normalizeStyle, normalizeToJourney, parseCsv, parseJsonArray, parseSchema, provideDesignerPlugins, provideFormDesignerAngaiFeature, provideHttpDataSourceClient, serializeSchema, slugifyId, splitControlSurfaceStyles, stripEmbeddedSourceData, unwrapSinglePageJourney };
 //# sourceMappingURL=uch-web-ngx-form-designer.mjs.map