@praxisui/manual-form 10.0.0-rc.33 → 10.0.0-rc.35

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-10-18T21:58:32.782Z",
+  "generatedAt": "2026-10-21T13:10:38.195Z",
   "packageName": "@praxisui/manual-form",
-  "packageVersion": "10.0.0-rc.33",
+  "packageVersion": "10.0.0-rc.35",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-manual-form.mjs

@@ -3655,10 +3655,26 @@ class ManualFormConfigEditorComponent {
     hintsModel = createDefaultHints();
     hooksText = createDefaultHooksText();
     hooksErrors = {};
+    baselineHooks = {};
     formRulesText = '';
     formRulesStateText = '';
     formRulesError = '';
     formRulesStateError = '';
+    hookErrorMatchers = {
+        beforeInit: { isErrorState: () => !!this.hooksErrors.beforeInit },
+        afterInit: { isErrorState: () => !!this.hooksErrors.afterInit },
+        beforeValidate: { isErrorState: () => !!this.hooksErrors.beforeValidate },
+        afterValidate: { isErrorState: () => !!this.hooksErrors.afterValidate },
+        beforeSubmit: { isErrorState: () => !!this.hooksErrors.beforeSubmit },
+        afterSubmit: { isErrorState: () => !!this.hooksErrors.afterSubmit },
+        onError: { isErrorState: () => !!this.hooksErrors.onError },
+    };
+    formRulesErrorMatcher = {
+        isErrorState: () => !!this.formRulesError,
+    };
+    formRulesStateErrorMatcher = {
+        isErrorState: () => !!this.formRulesStateError,
+    };
     hookStages = [
         'beforeInit',
         'afterInit',
@@ -3694,6 +3710,7 @@ class ManualFormConfigEditorComponent {
         return this.tx('editor.rules.formRulesPlaceholder', '[{"id":"rule-1","name":"Required rule","targetType":"field","targets":["field"],"effect":{"condition":{"!==":[{"var":"field"},null]},"properties":{"required":true}}}]');
     }
     ngOnInit() {
+        this.baselineHooks = deepClone(this.instance.currentConfig.hooks || {});
         this.refresh();
     }
     close() { this.ref.close('cancel'); }
@@ -3851,11 +3868,44 @@ class ManualFormConfigEditorComponent {
         return map[stage] || stage;
     }
     onHookTextChange(stage, value) {
-        this.hooksText = { ...this.hooksText, [stage]: value };
+        this.hooksText = { ...this.hooksText, [stage]: value ?? '' };
+        const nextErrors = { ...this.hooksErrors };
+        const raw = (this.hooksText[stage] || '').trim();
+        const currentHooks = deepClone(this.instance.currentConfig.hooks || {});
+        if (!raw) {
+            delete nextErrors[stage];
+            delete currentHooks[stage];
+            this.hooksErrors = nextErrors;
+            this.applySilentConfigPatch({ hooks: currentHooks });
+        }
+        else {
+            try {
+                const parsed = JSON.parse(raw);
+                if (!Array.isArray(parsed)) {
+                    nextErrors[stage] = this.tx('editor.validation.jsonArray', 'Must be a JSON array.');
+                    this.hooksErrors = nextErrors;
+                }
+                else {
+                    delete nextErrors[stage];
+                    currentHooks[stage] = parsed;
+                    this.hooksErrors = nextErrors;
+                    this.applySilentConfigPatch({ hooks: currentHooks });
+                }
+            }
+            catch {
+                nextErrors[stage] = this.tx('editor.validation.invalidJson', 'Invalid JSON.');
+                this.hooksErrors = nextErrors;
+            }
+        }
+        this.isDirty$.next(true);
+        this.syncValidationState();
     }
     resetHooks() {
-        this.hooksText = buildHooksText(this.instance.currentConfig.hooks);
+        const restored = deepClone(this.baselineHooks);
+        this.hooksText = buildHooksText(restored);
         this.hooksErrors = {};
+        this.applySilentConfigPatch({ hooks: restored });
+        this.syncValidationState();
     }
     applyHooks() {
         const next = {};
@@ -3877,16 +3927,57 @@ class ManualFormConfigEditorComponent {
             }
         }
         this.hooksErrors = errors;
+        this.syncValidationState();
         if (Object.keys(errors).length > 0) {
             return;
         }
+        this.baselineHooks = deepClone(next);
         this.applyConfigPatch({ hooks: next });
     }
     onRulesTextChange(value) {
-        this.formRulesText = value;
+        this.formRulesText = value ?? '';
+        const rulesRaw = this.formRulesText.trim();
+        if (!rulesRaw) {
+            this.formRulesError = '';
+            this.applySilentConfigPatch({ formRules: undefined });
+        }
+        else {
+            try {
+                const parsed = JSON.parse(rulesRaw);
+                if (!Array.isArray(parsed)) {
+                    this.formRulesError = this.tx('editor.validation.formRulesArray', 'formRules must be a JSON array.');
+                }
+                else {
+                    this.formRulesError = '';
+                    this.applySilentConfigPatch({ formRules: parsed });
+                }
+            }
+            catch {
+                this.formRulesError = this.tx('editor.validation.formRulesInvalid', 'Invalid JSON in formRules.');
+            }
+        }
+        this.isDirty$.next(true);
+        this.syncValidationState();
     }
     onRulesStateTextChange(value) {
-        this.formRulesStateText = value;
+        this.formRulesStateText = value ?? '';
+        const stateRaw = this.formRulesStateText.trim();
+        if (!stateRaw) {
+            this.formRulesStateError = '';
+            this.applySilentConfigPatch({ formRulesState: undefined });
+        }
+        else {
+            try {
+                const parsed = JSON.parse(stateRaw);
+                this.formRulesStateError = '';
+                this.applySilentConfigPatch({ formRulesState: parsed });
+            }
+            catch {
+                this.formRulesStateError = this.tx('editor.validation.formRulesStateInvalid', 'Invalid JSON in formRulesState.');
+            }
+        }
+        this.isDirty$.next(true);
+        this.syncValidationState();
     }
     applyRules() {
         this.formRulesError = '';
@@ -3899,12 +3990,14 @@ class ManualFormConfigEditorComponent {
                 const parsed = JSON.parse(rulesRaw);
                 if (!Array.isArray(parsed)) {
                     this.formRulesError = this.tx('editor.validation.formRulesArray', 'formRules must be a JSON array.');
+                    this.syncValidationState();
                     return;
                 }
                 rules = parsed;
             }
             catch {
                 this.formRulesError = this.tx('editor.validation.formRulesInvalid', 'Invalid JSON in formRules.');
+                this.syncValidationState();
                 return;
             }
         }
@@ -3915,9 +4008,11 @@ class ManualFormConfigEditorComponent {
             }
             catch {
                 this.formRulesStateError = this.tx('editor.validation.formRulesStateInvalid', 'Invalid JSON in formRulesState.');
+                this.syncValidationState();
                 return;
             }
         }
+        this.syncValidationState();
         this.applyConfigPatch({ formRules: rules, formRulesState: rulesState });
     }
     applyCascadePatch(patch) {
@@ -3965,15 +4060,29 @@ class ManualFormConfigEditorComponent {
         this.isDirty$.next(false);
         return value;
     }
+    syncValidationState() {
+        const hasHookError = Object.values(this.hooksErrors).some((msg) => !!msg);
+        const valid = !hasHookError && !this.formRulesError && !this.formRulesStateError;
+        this.isValid$.next(valid);
+    }
     refresh() {
         this.all = (this.instance.currentConfig.fieldMetadata || []).map(f => ({ ...f }));
         this.actionsModel = this.normalizeActions(this.instance.currentConfig.actions);
         this.messagesModel = deepClone(this.instance.currentConfig.messages || {});
         this.behaviorModel = deepClone(this.instance.currentConfig.behavior || {});
         this.hintsModel = createHints(this.instance.currentConfig.hints);
-        this.hooksText = buildHooksText(this.instance.currentConfig.hooks);
-        this.formRulesText = stringifyJson(this.instance.currentConfig.formRules, true);
-        this.formRulesStateText = stringifyJson(this.instance.currentConfig.formRulesState, false);
+        const nextHooksText = buildHooksText(this.instance.currentConfig.hooks);
+        for (const stage of this.hookStages) {
+            if (!this.hooksErrors[stage]) {
+                this.hooksText = { ...this.hooksText, [stage]: nextHooksText[stage] };
+            }
+        }
+        if (!this.formRulesError) {
+            this.formRulesText = stringifyJson(this.instance.currentConfig.formRules, true);
+        }
+        if (!this.formRulesStateError) {
+            this.formRulesStateText = stringifyJson(this.instance.currentConfig.formRulesState, false);
+        }
         this.applyFilter();
     }
     normalizeActions(source) {
@@ -4003,6 +4112,15 @@ class ManualFormConfigEditorComponent {
             resetButtonLabel: source.resetButtonLabel ?? base.resetButtonLabel,
         };
     }
+    applySilentConfigPatch(patch) {
+        try {
+            const config = deepClone(this.instance.currentConfig);
+            const next = { ...config, ...patch };
+            this.instance.replaceConfig(next);
+            this.instance.saveDraft();
+        }
+        catch { }
+    }
     applyConfigPatch(patch) {
         try {
             const config = deepClone(this.instance.currentConfig);
@@ -4027,15 +4145,6 @@ class ManualFormConfigEditorComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ManualFormConfigEditorComponent, deps: [{ token: SETTINGS_PANEL_DATA }, { token: SETTINGS_PANEL_REF }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: ManualFormConfigEditorComponent, isStandalone: true, selector: "praxis-manual-form-config-editor", providers: [providePraxisManualFormI18n()], ngImport: i0, template: `
     <div class="mf-editor">
-      <div class="mf-editor__toolbar">
-        <div class="mf-editor__title">
-          <span>{{ tx('editor.title', 'Form settings') }}</span>
-          <small class="mf-editor__subtitle">{{ tx('editor.subtitle', 'Fields, actions, messages and behavior') }}</small>
-        </div>
-        <div class="spacer"></div>
-        <button type="button" class="mf-btn" (click)="close()">{{ tx('editor.close', 'Close') }}</button>
-      </div>
-
       <mat-tab-group class="mf-tabs">
         <mat-tab [label]="tx('editor.tabs.fields', 'Fields')">
           <div class="mf-tab">
@@ -4059,27 +4168,47 @@ class ManualFormConfigEditorComponent {
                   <div class="col col--name"><code>{{ f.name }}</code></div>
                   <div class="col col--label">{{ f.label || f.name }}</div>
                   <div class="col col--type">{{ f.controlType }}</div>
-                  <div class="col col--vis">
+                  <div class="col col--vis" [attr.data-label]="tx('editor.fields.visible', 'Visible')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!f.hidden" (change)="toggleVisibility(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!f.hidden"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.visible', 'Visible')"
+                        (change)="toggleVisibility(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.hidden ? tx('editor.fields.hiddenState', 'Hidden') : tx('editor.fields.visibleState', 'Visible') }}</span>
                     </label>
                   </div>
-                  <div class="col col--req">
+                  <div class="col col--req" [attr.data-label]="tx('editor.fields.required', 'Required')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!!f.required" (change)="toggleRequired(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!!f.required"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.required', 'Required')"
+                        (change)="toggleRequired(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.required ? tx('editor.shared.yes', 'Yes') : tx('editor.shared.no', 'No') }}</span>
                     </label>
                   </div>
-                  <div class="col col--ro">
+                  <div class="col col--ro" [attr.data-label]="tx('editor.fields.readOnly', 'Read-only')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!!f.readOnly" (change)="toggleReadOnly(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!!f.readOnly"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.readOnly', 'Read-only')"
+                        (change)="toggleReadOnly(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.readOnly ? tx('editor.shared.yes', 'Yes') : tx('editor.shared.no', 'No') }}</span>
                     </label>
                   </div>
-                  <div class="col col--dis">
+                  <div class="col col--dis" [attr.data-label]="tx('editor.fields.disabled', 'Disabled')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!!f.disabled" (change)="toggleDisabled(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!!f.disabled"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.disabled', 'Disabled')"
+                        (change)="toggleDisabled(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.disabled ? tx('editor.shared.yes', 'Yes') : tx('editor.shared.no', 'No') }}</span>
                     </label>
                   </div>
@@ -4128,6 +4257,7 @@ class ManualFormConfigEditorComponent {
                       <mat-label>{{ tx('editor.actions.field.variant', 'Variant') }}</mat-label>
                       <mat-select
                         [value]="actionsModel[block.key].variant || null"
+                        [placeholder]="tx('editor.actions.variant.default', 'Default')"
                         (selectionChange)="updateActionField(block.key, 'variant', $event.value)"
                       >
                         <mat-option [value]="null">{{ tx('editor.actions.variant.default', 'Default') }}</mat-option>
@@ -4141,6 +4271,7 @@ class ManualFormConfigEditorComponent {
                       <mat-label>{{ tx('editor.actions.field.color', 'Color') }}</mat-label>
                       <mat-select
                         [value]="actionsModel[block.key].color || null"
+                        [placeholder]="tx('editor.actions.color.default', 'Default')"
                         (selectionChange)="updateActionField(block.key, 'color', $event.value)"
                       >
                         <mat-option [value]="null">{{ tx('editor.actions.color.default', 'Default') }}</mat-option>
@@ -4293,6 +4424,7 @@ class ManualFormConfigEditorComponent {
                           <mat-label>{{ tx('editor.actions.field.variant', 'Variant') }}</mat-label>
                           <mat-select
                             [value]="action.variant || null"
+                            [placeholder]="tx('editor.actions.variant.default', 'Default')"
                             (selectionChange)="updateCustomActionField(action, 'variant', $event.value)"
                           >
                             <mat-option [value]="null">{{ tx('editor.actions.variant.default', 'Default') }}</mat-option>
@@ -4306,6 +4438,7 @@ class ManualFormConfigEditorComponent {
                           <mat-label>{{ tx('editor.actions.field.color', 'Color') }}</mat-label>
                           <mat-select
                             [value]="action.color || null"
+                            [placeholder]="tx('editor.actions.color.default', 'Default')"
                             (selectionChange)="updateCustomActionField(action, 'color', $event.value)"
                           >
                             <mat-option [value]="null">{{ tx('editor.actions.color.default', 'Default') }}</mat-option>
@@ -4695,10 +4828,12 @@ class ManualFormConfigEditorComponent {
                   <textarea
                     matInput
                     rows="4"
-                  [value]="hooksText[stage]"
-                  (input)="onHookTextChange(stage, $any($event.target).value)"
-                  [placeholder]="hookPlaceholder()"
-                ></textarea>
+                    [ngModel]="hooksText[stage]"
+                    [ngModelOptions]="{ standalone: true }"
+                    [errorStateMatcher]="hookErrorMatchers[stage]"
+                    (ngModelChange)="onHookTextChange(stage, $event)"
+                    [placeholder]="hookPlaceholder()"
+                  ></textarea>
                   <button
                     praxisIconButton="help_outline"
                     size="dense"
@@ -4738,8 +4873,10 @@ class ManualFormConfigEditorComponent {
                 <textarea
                   matInput
                   rows="6"
-                  [value]="formRulesText"
-                  (input)="onRulesTextChange($any($event.target).value)"
+                  [ngModel]="formRulesText"
+                  [ngModelOptions]="{ standalone: true }"
+                  [errorStateMatcher]="formRulesErrorMatcher"
+                  (ngModelChange)="onRulesTextChange($event)"
                   [placeholder]="formRulesPlaceholder()"
                 ></textarea>
                 <button
@@ -4760,10 +4897,12 @@ class ManualFormConfigEditorComponent {
                 <textarea
                   matInput
                   rows="6"
-                  [value]="formRulesStateText"
+                  [ngModel]="formRulesStateText"
+                  [ngModelOptions]="{ standalone: true }"
+                  [errorStateMatcher]="formRulesStateErrorMatcher"
                   readonly
                   aria-readonly="true"
-                  (input)="onRulesStateTextChange($any($event.target).value)"
+                  (ngModelChange)="onRulesStateTextChange($event)"
                   placeholder='{"nodes":[],"edges":[]}'
                 ></textarea>
                 <mat-hint>{{ tx('editor.rules.formRulesStateReadonlyHint', 'Generated by the visual editor for round-trip; edit formRules instead.') }}</mat-hint>
@@ -4808,7 +4947,7 @@ class ManualFormConfigEditorComponent {
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, isInline: true, styles: [".mf-editor{display:grid;gap:16px;padding:16px;color:var(--md-sys-color-on-surface)}.mf-editor__toolbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container)}.mf-editor__title{display:flex;flex-direction:column;gap:2px;font-weight:600}.mf-editor__subtitle{font-weight:400;color:var(--md-sys-color-on-surface-variant)}.mf-editor__toolbar .spacer{flex:1}.mf-tabs{min-height:420px}.mf-tab{display:grid;gap:16px;padding:14px 6px 0}.mf-editor__list{display:grid;gap:8px;overflow-x:auto}.mf-editor__row{display:grid;grid-template-columns:2.2fr 2fr 1fr repeat(4,minmax(90px,.8fr));align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);min-width:720px}.mf-editor__row--head{font-weight:600;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface-container)}.mf-editor__filter{display:inline-flex;align-items:center;gap:8px;font-weight:500}.mf-editor__filter input{accent-color:var(--md-sys-color-primary)}.col code{display:inline-block;font-family:inherit;font-size:.85rem;padding:2px 8px;border-radius:6px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.mf-btn{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--md-sys-color-outline);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.mf-btn:hover{background:var(--md-sys-color-surface-container)}.mf-btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.toggle{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant)}.mf-section{display:grid;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.mf-section--full{padding:10px}.mf-section__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.mf-section__header h3{margin:0;font-size:1.05rem;font-weight:600}.mf-help{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.mf-note{padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:.9rem}.mf-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-action-card,.mf-custom-card,.mf-custom-message-card{display:grid;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high)}.mf-action-card__title,.mf-custom-card__title{font-weight:600;color:var(--md-sys-color-on-surface)}.mf-actions-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}.mf-hooks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.mf-hook-field textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem}.mf-actions-row{display:inline-flex;gap:8px;align-items:center}.mf-actions-row--end{justify-content:flex-end;width:100%}.mf-custom-actions,.mf-custom-messages{display:grid;gap:12px}.mf-custom-card__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.mf-custom-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-messages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-empty{margin:0;color:var(--md-sys-color-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "component", type: CascadeManagerTabComponent, selector: "praxis-cascade-manager-tab", inputs: ["fields", "connections"], outputs: ["apply", "cancel"] }] });
+  `, isInline: true, styles: [":host{display:block;container-type:inline-size}.mf-editor{display:grid;gap:16px;padding:4px 0;color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface))}.mf-tabs{min-height:420px}.mf-tab{display:grid;gap:16px;padding:14px 2px 0}.mf-editor__list{display:grid;gap:8px;overflow-x:auto}.mf-editor__row{display:grid;grid-template-columns:2.2fr 2fr 1fr repeat(4,minmax(90px,.8fr));align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:10px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface));min-width:720px}.mf-editor__row--head{font-weight:600;color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface));background:var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container))}@container (max-width: 680px){.mf-editor__list{overflow-x:visible}.mf-editor__row--head{display:none}.mf-editor__row{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mf-editor__row .col--name,.mf-editor__row .col--label{grid-column:span 1}.mf-editor__row .col--type{grid-column:1 / -1;font-size:.8rem;color:var(--pfx-settings-panel-muted, var(--md-sys-color-on-surface-variant))}.mf-editor__row .col[data-label]{display:flex;align-items:center;gap:6px}.mf-editor__row .col[data-label]:before{content:attr(data-label) \":\";font-size:.78rem;font-weight:600;color:var(--pfx-settings-panel-muted, var(--md-sys-color-on-surface-variant))}}.mf-editor__filter{display:inline-flex;align-items:center;gap:8px;font-weight:500}.mf-editor__filter input,.toggle input{accent-color:var(--md-sys-color-primary)}.col code{display:inline-block;font-family:inherit;font-size:.85rem;padding:2px 8px;border-radius:6px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.toggle{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant)}.mf-section{display:grid;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.mf-section--full{padding:10px}.mf-section__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.mf-section__header h3{margin:0;font-size:1.05rem;font-weight:600}.mf-help{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.mf-note{padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:.9rem}.mf-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-action-card,.mf-custom-card,.mf-custom-message-card{display:grid;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high)}.mf-action-card__title,.mf-custom-card__title{font-weight:600;color:var(--md-sys-color-on-surface)}.mf-actions-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}.mf-hooks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.mf-hook-field textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem}.mf-actions-row{display:inline-flex;gap:8px;align-items:center}.mf-actions-row--end{justify-content:flex-end;width:100%}.mf-custom-actions,.mf-custom-messages{display:grid;gap:12px}.mf-custom-card__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.mf-custom-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-messages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-empty{margin:0;color:var(--md-sys-color-on-surface-variant)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: PraxisIconButtonComponent, selector: "button[praxisIconButton]", inputs: ["praxisIconButton", "size", "appearance", "presentation", "pressed", "busy"] }, { kind: "component", type: CascadeManagerTabComponent, selector: "praxis-cascade-manager-tab", inputs: ["fields", "connections"], outputs: ["apply", "cancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: ManualFormConfigEditorComponent, decorators: [{
             type: Component,
@@ -4826,15 +4965,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                         CascadeManagerTabComponent
                     ], providers: [providePraxisManualFormI18n()], template: `
     <div class="mf-editor">
-      <div class="mf-editor__toolbar">
-        <div class="mf-editor__title">
-          <span>{{ tx('editor.title', 'Form settings') }}</span>
-          <small class="mf-editor__subtitle">{{ tx('editor.subtitle', 'Fields, actions, messages and behavior') }}</small>
-        </div>
-        <div class="spacer"></div>
-        <button type="button" class="mf-btn" (click)="close()">{{ tx('editor.close', 'Close') }}</button>
-      </div>
-
       <mat-tab-group class="mf-tabs">
         <mat-tab [label]="tx('editor.tabs.fields', 'Fields')">
           <div class="mf-tab">
@@ -4858,27 +4988,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   <div class="col col--name"><code>{{ f.name }}</code></div>
                   <div class="col col--label">{{ f.label || f.name }}</div>
                   <div class="col col--type">{{ f.controlType }}</div>
-                  <div class="col col--vis">
+                  <div class="col col--vis" [attr.data-label]="tx('editor.fields.visible', 'Visible')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!f.hidden" (change)="toggleVisibility(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!f.hidden"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.visible', 'Visible')"
+                        (change)="toggleVisibility(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.hidden ? tx('editor.fields.hiddenState', 'Hidden') : tx('editor.fields.visibleState', 'Visible') }}</span>
                     </label>
                   </div>
-                  <div class="col col--req">
+                  <div class="col col--req" [attr.data-label]="tx('editor.fields.required', 'Required')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!!f.required" (change)="toggleRequired(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!!f.required"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.required', 'Required')"
+                        (change)="toggleRequired(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.required ? tx('editor.shared.yes', 'Yes') : tx('editor.shared.no', 'No') }}</span>
                     </label>
                   </div>
-                  <div class="col col--ro">
+                  <div class="col col--ro" [attr.data-label]="tx('editor.fields.readOnly', 'Read-only')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!!f.readOnly" (change)="toggleReadOnly(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!!f.readOnly"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.readOnly', 'Read-only')"
+                        (change)="toggleReadOnly(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.readOnly ? tx('editor.shared.yes', 'Yes') : tx('editor.shared.no', 'No') }}</span>
                     </label>
                   </div>
-                  <div class="col col--dis">
+                  <div class="col col--dis" [attr.data-label]="tx('editor.fields.disabled', 'Disabled')">
                     <label class="toggle">
-                      <input type="checkbox" [checked]="!!f.disabled" (change)="toggleDisabled(f, $any($event.target).checked)" />
+                      <input
+                        type="checkbox"
+                        [checked]="!!f.disabled"
+                        [attr.aria-label]="(f.label || f.name) + ' - ' + tx('editor.fields.disabled', 'Disabled')"
+                        (change)="toggleDisabled(f, $any($event.target).checked)"
+                      />
                       <span>{{ f.disabled ? tx('editor.shared.yes', 'Yes') : tx('editor.shared.no', 'No') }}</span>
                     </label>
                   </div>
@@ -4927,6 +5077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <mat-label>{{ tx('editor.actions.field.variant', 'Variant') }}</mat-label>
                       <mat-select
                         [value]="actionsModel[block.key].variant || null"
+                        [placeholder]="tx('editor.actions.variant.default', 'Default')"
                         (selectionChange)="updateActionField(block.key, 'variant', $event.value)"
                       >
                         <mat-option [value]="null">{{ tx('editor.actions.variant.default', 'Default') }}</mat-option>
@@ -4940,6 +5091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                       <mat-label>{{ tx('editor.actions.field.color', 'Color') }}</mat-label>
                       <mat-select
                         [value]="actionsModel[block.key].color || null"
+                        [placeholder]="tx('editor.actions.color.default', 'Default')"
                         (selectionChange)="updateActionField(block.key, 'color', $event.value)"
                       >
                         <mat-option [value]="null">{{ tx('editor.actions.color.default', 'Default') }}</mat-option>
@@ -5092,6 +5244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <mat-label>{{ tx('editor.actions.field.variant', 'Variant') }}</mat-label>
                           <mat-select
                             [value]="action.variant || null"
+                            [placeholder]="tx('editor.actions.variant.default', 'Default')"
                             (selectionChange)="updateCustomActionField(action, 'variant', $event.value)"
                           >
                             <mat-option [value]="null">{{ tx('editor.actions.variant.default', 'Default') }}</mat-option>
@@ -5105,6 +5258,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                           <mat-label>{{ tx('editor.actions.field.color', 'Color') }}</mat-label>
                           <mat-select
                             [value]="action.color || null"
+                            [placeholder]="tx('editor.actions.color.default', 'Default')"
                             (selectionChange)="updateCustomActionField(action, 'color', $event.value)"
                           >
                             <mat-option [value]="null">{{ tx('editor.actions.color.default', 'Default') }}</mat-option>
@@ -5494,10 +5648,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                   <textarea
                     matInput
                     rows="4"
-                  [value]="hooksText[stage]"
-                  (input)="onHookTextChange(stage, $any($event.target).value)"
-                  [placeholder]="hookPlaceholder()"
-                ></textarea>
+                    [ngModel]="hooksText[stage]"
+                    [ngModelOptions]="{ standalone: true }"
+                    [errorStateMatcher]="hookErrorMatchers[stage]"
+                    (ngModelChange)="onHookTextChange(stage, $event)"
+                    [placeholder]="hookPlaceholder()"
+                  ></textarea>
                   <button
                     praxisIconButton="help_outline"
                     size="dense"
@@ -5537,8 +5693,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <textarea
                   matInput
                   rows="6"
-                  [value]="formRulesText"
-                  (input)="onRulesTextChange($any($event.target).value)"
+                  [ngModel]="formRulesText"
+                  [ngModelOptions]="{ standalone: true }"
+                  [errorStateMatcher]="formRulesErrorMatcher"
+                  (ngModelChange)="onRulesTextChange($event)"
                   [placeholder]="formRulesPlaceholder()"
                 ></textarea>
                 <button
@@ -5559,10 +5717,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
                 <textarea
                   matInput
                   rows="6"
-                  [value]="formRulesStateText"
+                  [ngModel]="formRulesStateText"
+                  [ngModelOptions]="{ standalone: true }"
+                  [errorStateMatcher]="formRulesStateErrorMatcher"
                   readonly
                   aria-readonly="true"
-                  (input)="onRulesStateTextChange($any($event.target).value)"
+                  (ngModelChange)="onRulesStateTextChange($event)"
                   placeholder='{"nodes":[],"edges":[]}'
                 ></textarea>
                 <mat-hint>{{ tx('editor.rules.formRulesStateReadonlyHint', 'Generated by the visual editor for round-trip; edit formRules instead.') }}</mat-hint>
@@ -5607,7 +5767,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
         </mat-tab>
       </mat-tab-group>
     </div>
-  `, styles: [".mf-editor{display:grid;gap:16px;padding:16px;color:var(--md-sys-color-on-surface)}.mf-editor__toolbar{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--md-sys-color-outline-variant);border-radius:12px;background:var(--md-sys-color-surface-container)}.mf-editor__title{display:flex;flex-direction:column;gap:2px;font-weight:600}.mf-editor__subtitle{font-weight:400;color:var(--md-sys-color-on-surface-variant)}.mf-editor__toolbar .spacer{flex:1}.mf-tabs{min-height:420px}.mf-tab{display:grid;gap:16px;padding:14px 6px 0}.mf-editor__list{display:grid;gap:8px;overflow-x:auto}.mf-editor__row{display:grid;grid-template-columns:2.2fr 2fr 1fr repeat(4,minmax(90px,.8fr));align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--md-sys-color-outline-variant);border-radius:10px;background:var(--md-sys-color-surface);min-width:720px}.mf-editor__row--head{font-weight:600;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface-container)}.mf-editor__filter{display:inline-flex;align-items:center;gap:8px;font-weight:500}.mf-editor__filter input{accent-color:var(--md-sys-color-primary)}.col code{display:inline-block;font-family:inherit;font-size:.85rem;padding:2px 8px;border-radius:6px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.mf-btn{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--md-sys-color-outline);background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.mf-btn:hover{background:var(--md-sys-color-surface-container)}.mf-btn:focus-visible{outline:2px solid var(--md-sys-color-primary);outline-offset:2px}.toggle{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant)}.mf-section{display:grid;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.mf-section--full{padding:10px}.mf-section__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.mf-section__header h3{margin:0;font-size:1.05rem;font-weight:600}.mf-help{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.mf-note{padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:.9rem}.mf-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-action-card,.mf-custom-card,.mf-custom-message-card{display:grid;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high)}.mf-action-card__title,.mf-custom-card__title{font-weight:600;color:var(--md-sys-color-on-surface)}.mf-actions-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}.mf-hooks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.mf-hook-field textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem}.mf-actions-row{display:inline-flex;gap:8px;align-items:center}.mf-actions-row--end{justify-content:flex-end;width:100%}.mf-custom-actions,.mf-custom-messages{display:grid;gap:12px}.mf-custom-card__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.mf-custom-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-messages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-empty{margin:0;color:var(--md-sys-color-on-surface-variant)}\n"] }]
+  `, styles: [":host{display:block;container-type:inline-size}.mf-editor{display:grid;gap:16px;padding:4px 0;color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface))}.mf-tabs{min-height:420px}.mf-tab{display:grid;gap:16px;padding:14px 2px 0}.mf-editor__list{display:grid;gap:8px;overflow-x:auto}.mf-editor__row{display:grid;grid-template-columns:2.2fr 2fr 1fr repeat(4,minmax(90px,.8fr));align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--pfx-settings-panel-border, var(--md-sys-color-outline-variant));border-radius:10px;background:var(--pfx-settings-panel-surface, var(--md-sys-color-surface));min-width:720px}.mf-editor__row--head{font-weight:600;color:var(--pfx-settings-panel-fg, var(--md-sys-color-on-surface));background:var(--pfx-settings-panel-surface-elevated, var(--md-sys-color-surface-container))}@container (max-width: 680px){.mf-editor__list{overflow-x:visible}.mf-editor__row--head{display:none}.mf-editor__row{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.mf-editor__row .col--name,.mf-editor__row .col--label{grid-column:span 1}.mf-editor__row .col--type{grid-column:1 / -1;font-size:.8rem;color:var(--pfx-settings-panel-muted, var(--md-sys-color-on-surface-variant))}.mf-editor__row .col[data-label]{display:flex;align-items:center;gap:6px}.mf-editor__row .col[data-label]:before{content:attr(data-label) \":\";font-size:.78rem;font-weight:600;color:var(--pfx-settings-panel-muted, var(--md-sys-color-on-surface-variant))}}.mf-editor__filter{display:inline-flex;align-items:center;gap:8px;font-weight:500}.mf-editor__filter input,.toggle input{accent-color:var(--md-sys-color-primary)}.col code{display:inline-block;font-family:inherit;font-size:.85rem;padding:2px 8px;border-radius:6px;background:var(--md-sys-color-surface-container-high);color:var(--md-sys-color-on-surface-variant)}.toggle{display:inline-flex;align-items:center;gap:6px;color:var(--md-sys-color-on-surface-variant)}.mf-section{display:grid;gap:12px;padding:16px;border-radius:12px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface)}.mf-section--full{padding:10px}.mf-section__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.mf-section__header h3{margin:0;font-size:1.05rem;font-weight:600}.mf-help{margin:6px 0 0;font-size:.9rem;color:var(--md-sys-color-on-surface-variant)}.mf-note{padding:10px 12px;border-radius:10px;border:1px dashed var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container);color:var(--md-sys-color-on-surface-variant);font-size:.9rem}.mf-actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-action-card,.mf-custom-card,.mf-custom-message-card{display:grid;gap:10px;padding:14px;border-radius:10px;border:1px solid var(--md-sys-color-outline-variant);background:var(--md-sys-color-surface-container-high)}.mf-action-card__title,.mf-custom-card__title{font-weight:600;color:var(--md-sys-color-on-surface)}.mf-actions-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;align-items:start}.mf-hooks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.mf-hook-field textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.85rem}.mf-actions-row{display:inline-flex;gap:8px;align-items:center}.mf-actions-row--end{justify-content:flex-end;width:100%}.mf-custom-actions,.mf-custom-messages{display:grid;gap:12px}.mf-custom-card__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.mf-custom-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:center}.mf-messages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}.mf-empty{margin:0;color:var(--md-sys-color-on-surface-variant)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SETTINGS_PANEL_DATA]

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@praxisui/manual-form",
-  "version": "10.0.0-rc.33",
+  "version": "10.0.0-rc.35",
   "description": "Manual form toolkit for Praxis UI: container, instance factory and editor bridge for @praxisui/* fields.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
-    "@praxisui/core": "^10.0.0-rc.33",
-    "@praxisui/dynamic-fields": "^10.0.0-rc.33",
-    "@praxisui/settings-panel": "^10.0.0-rc.33",
-    "@praxisui/metadata-editor": "^10.0.0-rc.33",
+    "@praxisui/core": "^10.0.0-rc.35",
+    "@praxisui/dynamic-fields": "^10.0.0-rc.35",
+    "@praxisui/settings-panel": "^10.0.0-rc.35",
+    "@praxisui/metadata-editor": "^10.0.0-rc.35",
     "@angular/cdk": "^21.0.0",
     "@angular/forms": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^10.0.0-rc.33",
+    "@praxisui/ai": "^10.0.0-rc.35",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-manual-form.d.ts

@@ -4,6 +4,7 @@ import { Observable, BehaviorSubject } from 'rxjs';
 import * as _angular_core from '@angular/core';
 import { AfterContentInit, OnDestroy, OnInit, OnChanges, TemplateRef, ViewContainerRef, SimpleChanges, InjectionToken, Provider } from '@angular/core';
 import { BaseAiAdapter, PatchResult, PraxisAssistantTurnViewState, PraxisAssistantShellLayout, PraxisAssistantShellLabels, PraxisAssistantSessionSnapshot, PraxisAssistantShellQuickReply, PraxisAssistantShellMessage } from '@praxisui/ai';
+import { ErrorStateMatcher } from '@angular/material/core';
 import { SettingsPanelRef } from '@praxisui/settings-panel';
 
 type ManualFormId = string;
@@ -343,10 +344,14 @@ declare class ManualFormConfigEditorComponent implements OnInit {
     hintsModel: FormHints;
     hooksText: Record<FormHookStage, string>;
     hooksErrors: Partial<Record<FormHookStage, string>>;
+    private baselineHooks;
     formRulesText: string;
     formRulesStateText: string;
     formRulesError: string;
     formRulesStateError: string;
+    readonly hookErrorMatchers: Record<FormHookStage, ErrorStateMatcher>;
+    readonly formRulesErrorMatcher: ErrorStateMatcher;
+    readonly formRulesStateErrorMatcher: ErrorStateMatcher;
     readonly hookStages: FormHookStage[];
     readonly actionBlocks: Array<{
         key: 'submit' | 'cancel' | 'reset';
@@ -389,8 +394,10 @@ declare class ManualFormConfigEditorComponent implements OnInit {
     get cascadeFields(): Array<FieldDefinition | FieldMetadata>;
     getSettingsValue(): any;
     onSave(): any;
+    private syncValidationState;
     private refresh;
     private normalizeActions;
+    private applySilentConfigPatch;
     private applyConfigPatch;
     private generateCustomId;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ManualFormConfigEditorComponent, never>;