@webiny/app-admin 0.0.0-unstable.7be00a75a9 → 0.0.0-unstable.7c2def32a7

package/features/formModel/FormModel.test.js

@@ -2,9 +2,11 @@ import { describe, expect, it, vi } from "vitest";
 import { z } from "zod";
 import { Container } from "@webiny/di";
 import { FormModelFeature } from "./feature.js";
+import { IdentityContextFeature } from "../security/IdentityContext/feature.js";
 import { FormModelFactory } from "./abstractions.js";
 function createForm(config) {
     const container = new Container();
+    IdentityContextFeature.register(container);
     FormModelFeature.register(container);
     return container.resolve(FormModelFactory).create(config);
 }
@@ -177,6 +179,63 @@ describe("FormModel", ()=>{
             expect(valid).toBe(false);
             expect(form.errors[0].message).toBe("Email is required");
         });
+        it("should skip zod validation for non-required field with null value", async ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        description: fields.text().label("Description").schema(z.string())
+                    })
+            });
+            const valid = await form.validate();
+            expect(valid).toBe(true);
+            expect(form.errors).toHaveLength(0);
+            expect(form.field("description").vm.validation.isValid).toBeNull();
+        });
+        it("should skip zod validation for non-required field with undefined value", async ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        description: fields.text().label("Description").schema(z.string())
+                    })
+            });
+            form.field("description").setValue(void 0);
+            const valid = await form.validate();
+            expect(valid).toBe(true);
+            expect(form.errors).toHaveLength(0);
+            expect(form.field("description").vm.validation.isValid).toBeNull();
+        });
+        it("should run zod validation for non-required field with empty string value", async ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        description: fields.text().label("Description").schema(z.string().min(3, "Too short"))
+                    })
+            });
+            form.field("description").setValue("");
+            const valid = await form.validate();
+            expect(valid).toBe(false);
+            expect(form.field("description").vm.validation.isValid).toBe(false);
+            expect(form.field("description").vm.validation.message).toBe("Too short");
+        });
+        it("should fail required validation for required field with null value even when schema is set", async ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        description: fields.text().label("Description").required("Description is required").schema(z.string().min(3, "Too short"))
+                    })
+            });
+            const valid = await form.validate();
+            expect(valid).toBe(false);
+            expect(form.field("description").vm.validation.isValid).toBe(false);
+            expect(form.field("description").vm.validation.message).toBe("Description is required");
+        });
+        it("should run and pass zod validation for non-required field with valid value", async ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        description: fields.text().label("Description").schema(z.string().min(3, "Too short"))
+                    })
+            });
+            form.field("description").setValue("Hello world");
+            const valid = await form.validate();
+            expect(valid).toBe(true);
+            expect(form.field("description").vm.validation.isValid).toBe(true);
+        });
         it("should expose field-level validation in field.vm", async ()=>{
             const form = createBasicForm();
             await form.validate();
@@ -184,6 +243,23 @@ describe("FormModel", ()=>{
             expect(titleVm.validation.isValid).toBe(false);
             expect(titleVm.validation.message).toBe("Title is required");
         });
+        it("setValidationWithCache should populate the validation cache", async ()=>{
+            const schema = z.string().min(3, "Too short");
+            const spy = vi.spyOn(schema, "safeParseAsync");
+            const form = createForm({
+                fields: (fields)=>({
+                        description: fields.text().label("Description").schema(schema)
+                    })
+            });
+            const valid1 = await form.validate();
+            expect(valid1).toBe(true);
+            expect(spy).not.toHaveBeenCalled();
+            const valid2 = await form.validate();
+            expect(valid2).toBe(true);
+            expect(spy).not.toHaveBeenCalled();
+            expect(form.field("description").vm.validation.isValid).toBeNull();
+            spy.mockRestore();
+        });
         it("isValid should be null before first validation", ()=>{
             const form = createBasicForm();
             expect(form.isValid).toBeNull();
@@ -364,9 +440,9 @@ describe("FormModel", ()=>{
         it("should support cross-field afterChange triggering target field pipeline", ()=>{
             const form = createForm({
                 fields: (fields)=>({
-                        title: fields.text().label("Title").afterChange((value, f)=>{
+                        title: fields.text().label("Title").afterChange((value, { form })=>{
                             const path = "/" + String(value).toLowerCase().replace(/\s+/g, "-");
-                            f.field("path").setValue(path);
+                            form.field("path").setValue(path);
                         }),
                         path: fields.text().label("Path").beforeChange((value)=>{
                             const str = String(value);
@@ -401,10 +477,10 @@ describe("FormModel", ()=>{
         it("should demonstrate title→path with path-dirty tracking", ()=>{
             const form = createForm({
                 fields: (fields)=>({
-                        title: fields.text().label("Title").required("Title is required").afterChange((value, f)=>{
-                            if (f.field("path").getValue()) return;
+                        title: fields.text().label("Title").required("Title is required").afterChange((value, { form })=>{
+                            if (form.field("path").getValue()) return;
                             const slug = String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
-                            f.field("path").setValue("/" + slug);
+                            form.field("path").setValue("/" + slug);
                         }),
                         path: fields.text().label("Path").required("Path is required").beforeChange((value)=>{
                             const str = String(value);
@@ -606,9 +682,9 @@ describe("FormModel", ()=>{
                             path: fields.text().label("Path")
                         })
                 });
-                form.field("title").addAfterChange((value, f)=>{
+                form.field("title").addAfterChange((value, { form })=>{
                     received.push(value);
-                    f.field("path").setValue("/" + String(value).toLowerCase());
+                    form.field("path").setValue("/" + String(value).toLowerCase());
                 });
                 form.field("title").setValue("Hello");
                 expect(received).toEqual([
@@ -751,11 +827,11 @@ describe("FormModel", ()=>{
                                         label: "German",
                                         value: "de"
                                     }
-                                ]).afterChange((value, f)=>{
-                                    const current = String(f.field("path").getValue() || "");
+                                ]).afterChange((value, { form })=>{
+                                    const current = String(form.field("path").getValue() || "");
                                     const stripped = current.replace(/^\/[a-z]{2}\//, "/");
-                                    if (value && "en" !== value) f.field("path").setValue("/" + value + stripped);
-                                    else f.field("path").setValue(stripped);
+                                    if (value && "en" !== value) form.field("path").setValue("/" + value + stripped);
+                                    else form.field("path").setValue(stripped);
                                 })
                             }));
                         form.layout((layout)=>[
@@ -1246,7 +1322,9 @@ describe("FormModel", ()=>{
                 const valid = await form.validate();
                 expect(valid).toBe(false);
                 expect(form.errors.length).toBeGreaterThan(0);
-                expect(form.errors.some((e)=>"address" === e.path)).toBe(true);
+                expect(form.errors.some((e)=>"address" === e.path)).toBe(false);
+                expect(form.errors.some((e)=>"address.street" === e.path)).toBe(true);
+                expect(form.errors.some((e)=>"address.city" === e.path)).toBe(true);
             });
             it("should pass validation when children are valid", async ()=>{
                 const form = createFormWithObject();
@@ -1314,6 +1392,108 @@ describe("FormModel", ()=>{
                     }
                 });
             });
+            it("should skip schema validation for non-required object field with null underlying data", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            address: fields.object().label("Address").fields((f)=>({
+                                    street: f.text().label("Street")
+                                })).schema(z.object({
+                                street: z.string().min(1)
+                            }))
+                        })
+                });
+                form.setData({
+                    address: null
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(true);
+                expect(form.errors).toHaveLength(0);
+            });
+            it("should skip schema validation for non-required object field with undefined underlying data", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            address: fields.object().label("Address").fields((f)=>({
+                                    street: f.text().label("Street")
+                                })).schema(z.object({
+                                street: z.string().min(1)
+                            }))
+                        })
+                });
+                form.setData({
+                    address: void 0
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(true);
+                expect(form.errors).toHaveLength(0);
+            });
+            it("should run schema validation for non-required object field with populated values", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            address: fields.object().label("Address").fields((f)=>({
+                                    street: f.text().label("Street")
+                                })).schema(z.object({
+                                street: z.string().min(5, "Street too short")
+                            }))
+                        })
+                });
+                form.field("address.street").setValue("Hi");
+                const valid = await form.validate();
+                expect(valid).toBe(false);
+                expect(form.errors).toHaveLength(1);
+                expect(form.errors[0].message).toBe("Street too short");
+            });
+            it("should run schema validation for required object field with populated but invalid values", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            address: fields.object().label("Address").fields((f)=>({
+                                    street: f.text().label("Street")
+                                })).required("Address is required").schema(z.object({
+                                street: z.string().min(5, "Street too short")
+                            }))
+                        })
+                });
+                form.field("address.street").setValue("Hi");
+                const valid = await form.validate();
+                expect(valid).toBe(false);
+                expect(form.errors).toHaveLength(1);
+                expect(form.errors[0].message).toBe("Street too short");
+            });
+            it("should fail required validation for required object field with null data even when schema is set", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            address: fields.object().label("Address").fields((f)=>({
+                                    street: f.text().label("Street")
+                                })).required("Address is required").schema(z.object({
+                                street: z.string().min(1)
+                            }))
+                        })
+                });
+                form.setData({
+                    address: null
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(false);
+                expect(form.errors).toHaveLength(1);
+                expect(form.errors[0].message).toBe("Address is required");
+            });
+            it("should skip schema validation for non-required object field when all child values are empty", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            address: fields.object().label("Address").fields((f)=>({
+                                    street: f.text().label("Street"),
+                                    city: f.text().label("City")
+                                })).schema(z.object({
+                                street: z.string().min(1),
+                                city: z.string().min(1)
+                            }))
+                        })
+                });
+                form.field("address.street").setValue("");
+                form.field("address.city").setValue("");
+                const valid = await form.validate();
+                expect(valid).toBe(true);
+                expect(form.errors).toHaveLength(0);
+            });
         });
         describe("list object field", ()=>{
             function createFormWithList() {
@@ -1501,6 +1681,74 @@ describe("FormModel", ()=>{
                 expect(valid).toBe(false);
                 expect(form.errors[0].message).toBe("At least 2 presets are required");
             });
+            it("should skip listSchema validation for non-required list field with empty list", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            presets: fields.object().label("Presets").fields((f)=>({
+                                    name: f.text().label("Name")
+                                })).list().listSchema(z.array(z.any()).min(2, "At least 2 presets are required"))
+                        })
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(true);
+                expect(form.errors).toHaveLength(0);
+            });
+            it("should skip listSchema validation for non-required list field with undefined value", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            presets: fields.object().label("Presets").fields((f)=>({
+                                    name: f.text().label("Name")
+                                })).list().listSchema(z.array(z.any()).min(2, "At least 2 presets are required"))
+                        })
+                });
+                form.setData({
+                    presets: void 0
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(true);
+                expect(form.errors).toHaveLength(0);
+            });
+            it("should skip listSchema validation for non-required list field with null value", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            presets: fields.object().label("Presets").fields((f)=>({
+                                    name: f.text().label("Name")
+                                })).list().listSchema(z.array(z.any()).min(2, "At least 2 presets are required"))
+                        })
+                });
+                form.setData({
+                    presets: null
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(true);
+                expect(form.errors).toHaveLength(0);
+            });
+            it("should enforce listSchema validation for required list field with null value", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            presets: fields.object().label("Presets").fields((f)=>({
+                                    name: f.text().label("Name")
+                                })).list().required("Presets are required").listSchema(z.array(z.any()).min(2, "At least 2 presets are required"))
+                        })
+                });
+                form.setData({
+                    presets: null
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(false);
+                expect(form.errors[0].message).toBe("Presets are required");
+            });
+            it("should enforce listSchema validation for required list field with empty list", async ()=>{
+                const form = createForm({
+                    fields: (fields)=>({
+                            presets: fields.object().label("Presets").fields((f)=>({
+                                    name: f.text().label("Name")
+                                })).list().required("Presets are required").listSchema(z.array(z.any()).min(2, "At least 2 presets are required"))
+                        })
+                });
+                const valid = await form.validate();
+                expect(valid).toBe(false);
+            });
             it("should be dirty after adding an item", ()=>{
                 const form = createFormWithList();
                 form.setData({
@@ -1586,7 +1834,7 @@ describe("FormModel", ()=>{
             return createForm({
                 fields: (fields)=>({
                         content: fields.object().label("Content").template("hero", (t)=>{
-                            t.label("Hero Banner").fields((f)=>({
+                            t.label("Hero Banner").description("Large heading with an image").fields((f)=>({
                                     heading: f.text().label("Heading").required("Required"),
                                     image: f.text().label("Image")
                                 }));
@@ -1613,7 +1861,8 @@ describe("FormModel", ()=>{
                 expect(vm.availableTemplates).toEqual([
                     {
                         id: "hero",
-                        label: "Hero Banner"
+                        label: "Hero Banner",
+                        description: "Large heading with an image"
                     },
                     {
                         id: "text",
@@ -2484,6 +2733,190 @@ describe("FormModel", ()=>{
             });
         });
     });
+    describe("inner layouts declared on the field builder", ()=>{
+        it("lays out a single object's children with .layout()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        address: fields.object().fields((f)=>({
+                                street: f.text().label("Street"),
+                                city: f.text().label("City"),
+                                zip: f.text().label("Zip")
+                            })).layout((l)=>[
+                                l.row("street"),
+                                l.row("city", "zip")
+                            ])
+                    })
+            });
+            const vm = form.field("address").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "street"
+                ],
+                [
+                    "city",
+                    "zip"
+                ]
+            ]);
+        });
+        it("applies .layout() to every list item", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        stats: fields.object().list().fields((f)=>({
+                                value: f.number().label("Value"),
+                                label: f.text().label("Label")
+                            })).layout((l)=>[
+                                l.row("value", "label")
+                            ])
+                    })
+            });
+            form.setData({
+                stats: [
+                    {
+                        value: 1,
+                        label: "A"
+                    },
+                    {
+                        value: 2,
+                        label: "B"
+                    }
+                ]
+            });
+            const vm = form.field("stats").vm;
+            expect(vm.items).toHaveLength(2);
+            for (const item of vm.items)expect(item.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "value",
+                    "label"
+                ]
+            ]);
+        });
+        it("lays out an object nested in another object with its own .layout()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        subMenu: fields.object().fields((f)=>({
+                                climbing: f.object().list().fields((c)=>({
+                                        label: c.text().label("Label"),
+                                        url: c.text().label("URL")
+                                    })).layout((l)=>[
+                                        l.row("label", "url")
+                                    ]),
+                                yoga: f.text().label("Yoga")
+                            })).layout((l)=>[
+                                l.row("climbing", "yoga")
+                            ])
+                    })
+            });
+            form.setData({
+                subMenu: {
+                    climbing: [
+                        {
+                            label: "Classes",
+                            url: "/c"
+                        }
+                    ],
+                    yoga: ""
+                }
+            });
+            const outer = form.field("subMenu").vm;
+            expect(asRow(outer.layout[0]).fields.map((f)=>f.name)).toEqual([
+                "climbing",
+                "yoga"
+            ]);
+            const inner = form.field("subMenu.climbing").vm;
+            expect(asRow(inner.items[0].layout[0]).fields.map((f)=>f.name)).toEqual([
+                "label",
+                "url"
+            ]);
+        });
+        it("lets a layout.object() node override the field's .layout()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        meta: fields.object().fields((f)=>({
+                                a: f.text().label("A"),
+                                b: f.text().label("B")
+                            })).layout((l)=>[
+                                l.row("a", "b")
+                            ])
+                    }),
+                layout: (layout)=>[
+                        layout.object("meta", (l)=>[
+                                l.row("b"),
+                                l.row("a")
+                            ])
+                    ]
+            });
+            const vm = form.field("meta").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "b"
+                ],
+                [
+                    "a"
+                ]
+            ]);
+        });
+        it("uses the layout declared on each template", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        content: fields.object().template("hero", (t)=>{
+                            t.label("Hero").fields((f)=>({
+                                    heading: f.text().label("Heading"),
+                                    subheading: f.text().label("Subheading")
+                                })).layout((l)=>[
+                                    l.row("heading", "subheading")
+                                ]);
+                        }).template("cta", (t)=>{
+                            t.label("CTA").fields((f)=>({
+                                    text: f.text().label("Text"),
+                                    url: f.text().label("URL")
+                                })).layout((l)=>[
+                                    l.row("url", "text")
+                                ]);
+                        })
+                    }),
+                layout: (layout)=>[
+                        layout.object("content", {
+                            hero: (l)=>[
+                                    l.row("subheading"),
+                                    l.row("heading")
+                                ]
+                        })
+                    ]
+            });
+            const field = form.field("content");
+            field.setTemplate("hero");
+            let vm = form.field("content").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "subheading"
+                ],
+                [
+                    "heading"
+                ]
+            ]);
+            field.setTemplate("cta");
+            vm = form.field("content").vm;
+            expect(vm.layout.map((node)=>asRow(node).fields.map((f)=>f.name))).toEqual([
+                [
+                    "url",
+                    "text"
+                ]
+            ]);
+        });
+        it("throws when an object has both .layout() and .template()", ()=>{
+            expect(()=>createForm({
+                    fields: (fields)=>({
+                            content: fields.object().template("hero", (t)=>{
+                                t.fields((f)=>({
+                                        heading: f.text()
+                                    }));
+                            }).layout((l)=>[
+                                    l.row("heading")
+                                ])
+                        })
+                })).toThrow(/both .layout\(\) and .template\(\)/);
+        });
+    });
     describe("nested object layouts (Phase 8c.1)", ()=>{
         it("registers layout.object() nested inside another object's inner layout (non-templated)", ()=>{
             const form = createForm({
@@ -2801,13 +3234,31 @@ describe("FormModel", ()=>{
                 "text"
             ]);
         });
-        it("templates.add throws on duplicate id", ()=>{
+        it("templates.add keeps the layout declared on the added template", ()=>{
             const form = createSingleTemplatedForm();
             const field = form.field("content").as("object");
-            expect(()=>field.templates.add("hero", (t)=>{
-                    t.label("Other").fields((f)=>({
-                            x: f.text()
-                        }));
+            field.templates.add("cta", (t)=>{
+                t.label("CTA").fields((f)=>({
+                        text: f.text(),
+                        url: f.text()
+                    })).layout((l)=>[
+                        l.row("text", "url")
+                    ]);
+            });
+            form.field("content").setTemplate("cta");
+            const vm = form.field("content").vm;
+            expect(asRow(vm.layout[0]).fields.map((f)=>f.name)).toEqual([
+                "text",
+                "url"
+            ]);
+        });
+        it("templates.add throws on duplicate id", ()=>{
+            const form = createSingleTemplatedForm();
+            const field = form.field("content").as("object");
+            expect(()=>field.templates.add("hero", (t)=>{
+                    t.label("Other").fields((f)=>({
+                            x: f.text()
+                        }));
                 })).toThrow(/Duplicate template id "hero"/);
         });
         it("templates.add throws on reserved _templateId", ()=>{
@@ -2955,7 +3406,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         plan: fields.text().defaultValue("free"),
-                        seats: fields.text().requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Seats required")
+                        seats: fields.text().requiredWhen(({ form })=>"pro" === form.field("plan").getValue(), "Seats required")
                     })
             });
             expect(form.field("seats").vm.required).toBe(false);
@@ -2970,7 +3421,7 @@ describe("FormModel", ()=>{
                 fields: (fields)=>({
                         plan: fields.text().defaultValue("free"),
                         flag: fields.text().defaultValue("off"),
-                        seats: fields.text().requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Pro requires it").requiredWhen((f)=>"on" === f.field("flag").getValue(), "Flag requires it")
+                        seats: fields.text().requiredWhen(({ form })=>"pro" === form.field("plan").getValue(), "Pro requires it").requiredWhen(({ form })=>"on" === form.field("flag").getValue(), "Flag requires it")
                     })
             });
             form.field("flag").setValue("on");
@@ -2995,10 +3446,10 @@ describe("FormModel", ()=>{
                 fields: (fields)=>({
                         plan: fields.text().defaultValue("free"),
                         other: fields.text().defaultValue("off"),
-                        seats: fields.text().requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Pro required")
+                        seats: fields.text().requiredWhen(({ form })=>"pro" === form.field("plan").getValue(), "Pro required")
                     })
             });
-            form.field("seats").addRequiredWhen((f)=>"on" === f.field("other").getValue(), "Other required");
+            form.field("seats").addRequiredWhen(({ form })=>"on" === form.field("other").getValue(), "Other required");
             expect(form.field("seats").vm.required).toBe(false);
             form.field("other").setValue("on");
             await form.validate();
@@ -3011,7 +3462,7 @@ describe("FormModel", ()=>{
                 fields: (fields)=>({
                         first: fields.text().defaultValue("Ada"),
                         last: fields.text().defaultValue("Lovelace"),
-                        full: fields.text().computed((f)=>`${f.field("first").getValue()} ${f.field("last").getValue()}`)
+                        full: fields.text().computed(({ form })=>`${form.field("first").getValue()} ${form.field("last").getValue()}`)
                     })
             });
             expect(form.field("full").getValue()).toBe("Ada Lovelace");
@@ -3022,7 +3473,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         src: fields.text().defaultValue("A"),
-                        derived: fields.text().computed((f)=>f.field("src").getValue())
+                        derived: fields.text().computed(({ form })=>form.field("src").getValue())
                     })
             });
             expect(form.field("derived").vm.disabled).toBe(false);
@@ -3033,7 +3484,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         src: fields.text().defaultValue("A"),
-                        derived: fields.text().computedUntilDirty((f)=>`derived-${f.field("src").getValue()}`)
+                        derived: fields.text().computedUntilDirty(({ form })=>`derived-${form.field("src").getValue()}`)
                     })
             });
             expect(form.field("derived").getValue()).toBe("derived-A");
@@ -3046,7 +3497,7 @@ describe("FormModel", ()=>{
             const form = createForm({
                 fields: (fields)=>({
                         src: fields.text().defaultValue(""),
-                        derived: fields.text().required("Derived must not be empty").computed((f)=>f.field("src").getValue())
+                        derived: fields.text().required("Derived must not be empty").computed(({ form })=>form.field("src").getValue())
                     })
             });
             const valid = await form.validate();
@@ -3055,6 +3506,77 @@ describe("FormModel", ()=>{
             form.field("src").setValue("hello");
             expect(await form.validate()).toBe(true);
         });
+        it("computedUntilDirty can access nested fields inside object via dot notation", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        group: fields.object().renderer("passthrough").fields((f)=>({
+                                label: f.text().defaultValue("Hello World"),
+                                fieldId: f.text().computedUntilDirty(({ form })=>String(form.field("group.label").getValue() || "").toLowerCase().replace(/\s+/g, "-"))
+                            }))
+                    })
+            });
+            expect(form.field("group.fieldId").getValue()).toBe("hello-world");
+            form.field("group.label").setValue("New Title");
+            expect(form.field("group.fieldId").getValue()).toBe("new-title");
+            form.field("group.fieldId").vm.onChange("custom-id");
+            expect(form.field("group.fieldId").getValue()).toBe("custom-id");
+            form.field("group.label").setValue("Another");
+            expect(form.field("group.fieldId").getValue()).toBe("custom-id");
+        });
+        it("computedUntilDirty works after setData for nested object fields", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        general: fields.object().renderer("passthrough").fields((f)=>({
+                                label: f.text(),
+                                fieldId: f.text().computedUntilDirty(({ form })=>String(form.field("general.label").getValue() || "").toLowerCase().replace(/\s+/g, "-"))
+                            }))
+                    })
+            });
+            expect(form.field("general.fieldId").getValue()).toBe("");
+            form.setData({
+                general: {
+                    label: "My Field"
+                }
+            });
+            expect(form.field("general.fieldId").getValue()).toBe("my-field");
+            form.field("general.label").setValue("Updated Label");
+            expect(form.field("general.fieldId").getValue()).toBe("updated-label");
+            form.field("general.fieldId").vm.onChange("custom");
+            expect(form.field("general.fieldId").getValue()).toBe("custom");
+            form.field("general.label").setValue("Ignored");
+            expect(form.field("general.fieldId").getValue()).toBe("custom");
+        });
+        it("field.parent().field() resolves sibling fields relative to the parent object", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        group: fields.object().renderer("passthrough").fields((f)=>({
+                                label: f.text().defaultValue("Hello"),
+                                slug: f.text().computedUntilDirty(({ field })=>String(field.parent().field("label").getValue() || "").toLowerCase().replace(/\s+/g, "-"))
+                            }))
+                    })
+            });
+            expect(form.field("group.slug").getValue()).toBe("hello");
+            form.field("group.label").setValue("New Title");
+            expect(form.field("group.slug").getValue()).toBe("new-title");
+        });
+        it("field.parent().field() can traverse into sibling objects", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        wrapper: fields.object().renderer("passthrough").fields((f)=>({
+                                message: f.text().defaultValue("default").computedUntilDirty(({ field })=>{
+                                    const preset = field.parent().field("settings.preset").getValue();
+                                    return "custom" === preset ? "Custom message" : `Preset: ${preset}`;
+                                }),
+                                settings: f.object().renderer("passthrough").fields((inner)=>({
+                                        preset: inner.text().defaultValue("custom")
+                                    }))
+                            }))
+                    })
+            });
+            expect(form.field("wrapper.message").getValue()).toBe("Custom message");
+            form.field("wrapper.settings.preset").setValue("email");
+            expect(form.field("wrapper.message").getValue()).toBe("Preset: email");
+        });
         it("modifier setComputed converts a regular field into a computed one", ()=>{
             const form = createForm({
                 fields: (fields)=>({
@@ -3062,7 +3584,7 @@ describe("FormModel", ()=>{
                         derived: fields.text().defaultValue("initial")
                     })
             });
-            form.field("derived").setComputed((f)=>`from-${f.field("src").getValue()}`);
+            form.field("derived").setComputed(({ form })=>`from-${form.field("src").getValue()}`);
             expect(form.field("derived").getValue()).toBe("from-X");
             form.field("src").setValue("Y");
             expect(form.field("derived").getValue()).toBe("from-Y");
@@ -3784,7 +4306,7 @@ describe("FormModel", ()=>{
                 fields: (f)=>({
                         tags: f.text().list().defaultValue([
                             "a"
-                        ]).beforeChange((value, _form)=>{
+                        ]).beforeChange((value, _params)=>{
                             log.push(value);
                             return value;
                         })
@@ -3806,6 +4328,612 @@ describe("FormModel", ()=>{
             ]);
         });
     });
+    describe("field context", ()=>{
+        it("should expose context derived from sibling fields via form param", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("My Article"),
+                        description: fields.text().defaultValue("A great article"),
+                        media: fields.file().context(({ form })=>({
+                                title: form.field("title").getValue(),
+                                description: form.field("description").getValue()
+                            }))
+                    })
+            });
+            expect(form.field("media").vm.context).toEqual({
+                title: "My Article",
+                description: "A great article"
+            });
+        });
+        it("should access root-level siblings via field.parent().field()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Root Sibling"),
+                        media: fields.file().context(({ field })=>({
+                                title: field.parent().field("title").getValue()
+                            }))
+                    })
+            });
+            expect(form.field("media").vm.context).toEqual({
+                title: "Root Sibling"
+            });
+        });
+        it("should reactively update context when source fields change", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Original"),
+                        media: fields.file().context(({ form })=>({
+                                title: form.field("title").getValue()
+                            }))
+                    })
+            });
+            expect(form.field("media").vm.context).toEqual({
+                title: "Original"
+            });
+            form.field("title").setValue("Updated");
+            expect(form.field("media").vm.context).toEqual({
+                title: "Updated"
+            });
+        });
+        it("should default to empty object when no context callback is set", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text()
+                    })
+            });
+            expect(form.field("title").vm.context).toEqual({});
+        });
+        it("should access root fields via form param from nested object", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Page Title"),
+                        settings: fields.object().fields((f)=>({
+                                media: f.file().context(({ form })=>({
+                                        title: form.field("title").getValue()
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("title"),
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.media").vm.context).toEqual({
+                title: "Page Title"
+            });
+            form.field("title").setValue("New Title");
+            expect(form.field("settings.media").vm.context).toEqual({
+                title: "New Title"
+            });
+        });
+        it("should navigate to siblings via field.parent().field()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        wrapper: fields.object().fields((f)=>({
+                                title: f.text().defaultValue("Nested Title"),
+                                media: f.file().context(({ field })=>({
+                                        title: field.parent().field("title").getValue()
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("wrapper")
+                    ]
+            });
+            expect(form.field("wrapper.media").vm.context).toEqual({
+                title: "Nested Title"
+            });
+        });
+        it("should navigate multiple levels up via chained parent()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        title: fields.text().defaultValue("Root Title"),
+                        settings: fields.object().fields((f)=>({
+                                nested: f.object().fields((inner)=>({
+                                        media: inner.file().context(({ field })=>({
+                                                title: field.parent().parent().parent().field("title").getValue()
+                                            }))
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("title"),
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.nested.media").vm.context).toEqual({
+                title: "Root Title"
+            });
+            form.field("title").setValue("Updated Root");
+            expect(form.field("settings.nested.media").vm.context).toEqual({
+                title: "Updated Root"
+            });
+        });
+        it("should navigate past parent to grandparent scope", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        settings: fields.object().fields((f)=>({
+                                label: f.text().defaultValue("Settings Label"),
+                                nested: f.object().fields((inner)=>({
+                                        media: inner.file().context(({ field })=>({
+                                                label: field.parent().parent().field("label").getValue()
+                                            }))
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.nested.media").vm.context).toEqual({
+                label: "Settings Label"
+            });
+        });
+        it("should throw when navigating above root level", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        media: fields.file().context(({ field })=>({
+                                bad: field.parent().parent().field("x").getValue()
+                            }))
+                    })
+            });
+            expect(()=>form.field("media").vm.context).toThrow("Cannot navigate above root level.");
+        });
+        it("should use both field navigator and form in the same callback", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        slug: fields.text().defaultValue("my-slug"),
+                        settings: fields.object().fields((f)=>({
+                                label: f.text().defaultValue("Settings Label"),
+                                media: f.file().context(({ field, form })=>({
+                                        label: field.parent().field("label").getValue(),
+                                        slug: form.field("slug").getValue()
+                                    }))
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("slug"),
+                        l.row("settings")
+                    ]
+            });
+            expect(form.field("settings.media").vm.context).toEqual({
+                label: "Settings Label",
+                slug: "my-slug"
+            });
+        });
+    });
+    describe("$. static references in rules", ()=>{
+        it("$. resolves rule targets relative to the parent object", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        wrapper: fields.object().renderer("passthrough").fields((f)=>({
+                                status: f.text().defaultValue("draft"),
+                                details: f.text().rules([
+                                    {
+                                        type: "condition",
+                                        target: "$.status",
+                                        operator: "==",
+                                        value: "draft",
+                                        action: "hide"
+                                    }
+                                ])
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("wrapper")
+                    ]
+            });
+            expect(form.field("wrapper.details").visible).toBe(false);
+            form.field("wrapper.status").setValue("published");
+            expect(form.field("wrapper.details").visible).toBe(true);
+        });
+        it("$. in rules with disable action", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        wrapper: fields.object().renderer("passthrough").fields((f)=>({
+                                locked: f.text().defaultValue("yes"),
+                                editable: f.text().rules([
+                                    {
+                                        type: "condition",
+                                        target: "$.locked",
+                                        operator: "==",
+                                        value: "yes",
+                                        action: "disable"
+                                    }
+                                ])
+                            }))
+                    }),
+                layout: (l)=>[
+                        l.row("wrapper")
+                    ]
+            });
+            expect(form.field("wrapper.editable").disabled).toBe(true);
+            form.field("wrapper.locked").setValue("no");
+            expect(form.field("wrapper.editable").disabled).toBe(false);
+        });
+    });
+    describe("$. static references in rules inside list items", ()=>{
+        const hideWhen = (target, operator, value)=>[
+                {
+                    type: "condition",
+                    target,
+                    operator,
+                    value,
+                    action: "hide"
+                }
+            ];
+        const itemChild = (form, listPath, index, name)=>{
+            const list = form.field(listPath);
+            const child = list.items[index]?.children.get(name);
+            if (!child) throw new Error(`No child "${name}" on item ${index} of "${listPath}".`);
+            return child;
+        };
+        it("resolves $. against the owning item of an object list", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                style: f.text(),
+                                url: f.text().rules(hideWhen("$.style", "==", "initiative")),
+                                customUrls: f.text().rules(hideWhen("$.style", "!=", "initiative"))
+                            }))
+                    })
+            });
+            form.setData({
+                links: [
+                    {
+                        style: "initiative"
+                    },
+                    {
+                        style: "standard"
+                    }
+                ]
+            });
+            expect(itemChild(form, "links", 0, "url").visible).toBe(false);
+            expect(itemChild(form, "links", 0, "customUrls").visible).toBe(true);
+            expect(itemChild(form, "links", 1, "url").visible).toBe(true);
+            expect(itemChild(form, "links", 1, "customUrls").visible).toBe(false);
+            itemChild(form, "links", 1, "style").setValue("initiative");
+            expect(itemChild(form, "links", 1, "url").visible).toBe(false);
+            expect(itemChild(form, "links", 1, "customUrls").visible).toBe(true);
+        });
+        it("resolves $. for items added with addItem()", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                locked: f.boolean(),
+                                label: f.text().rules([
+                                    {
+                                        type: "condition",
+                                        target: "$.locked",
+                                        operator: "==",
+                                        value: true,
+                                        action: "disable"
+                                    }
+                                ])
+                            }))
+                    })
+            });
+            form.field("links").addItem();
+            expect(itemChild(form, "links", 0, "label").disabled).toBe(false);
+            itemChild(form, "links", 0, "locked").setValue(true);
+            expect(itemChild(form, "links", 0, "label").disabled).toBe(true);
+        });
+        it("keeps resolving against the owning item after reorder and removal", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                style: f.text(),
+                                url: f.text().rules(hideWhen("$.style", "==", "initiative"))
+                            }))
+                    })
+            });
+            form.setData({
+                links: [
+                    {
+                        style: "initiative"
+                    },
+                    {
+                        style: "standard"
+                    }
+                ]
+            });
+            const list = form.field("links");
+            const firstUrl = itemChild(form, "links", 0, "url");
+            const secondUrl = itemChild(form, "links", 1, "url");
+            list.moveItem(0, 1);
+            expect(firstUrl.visible).toBe(false);
+            expect(secondUrl.visible).toBe(true);
+            list.removeItem(0);
+            expect(firstUrl.visible).toBe(false);
+        });
+        it("field.parent() resolves siblings of the owning item in callbacks", ()=>{
+            const form = createForm({
+                fields: (fields)=>({
+                        links: fields.object().list().renderer("passthrough").fields((f)=>({
+                                style: f.text(),
+                                url: f.text().hiddenWhen(({ field })=>"initiative" === field.parent().field("style").getValue())
+                            }))
+                    })
+            });
+            form.setData({
+                links: [
+                    {
+                        style: "initiative"
+                    },
+                    {
+                        style: "standard"
+                    }
+                ]
+            });
+            expect(itemChild(form, "links", 0, "url").visible).toBe(false);
+            expect(itemChild(form, "links", 1, "url").visible).toBe(true);
+        });
+        describe("dynamic zone shaped templated list", ()=>{
+            const createBlocksForm = ()=>createForm({
+                    fields: (fields)=>({
+                            blocks: fields.object().list().renderer("passthrough").template("heroBlock", (t)=>{
+                                t.label("Hero").fields((f)=>({
+                                        _id: f.text().hidden(),
+                                        ctaStyle: f.text(),
+                                        ctaUrl: f.text().rules(hideWhen("$.ctaStyle", "==", "initiative")),
+                                        customUrls: f.text().rules(hideWhen("$.ctaStyle", "!=", "initiative"))
+                                    }));
+                            }).template("richTextBlock", (t)=>{
+                                t.label("Rich Text").fields((f)=>({
+                                        _id: f.text().hidden(),
+                                        headerStyle: f.text().defaultValue("manual"),
+                                        header: f.text().rules(hideWhen("$.headerStyle", "!=", "manual")),
+                                        headingGroupRef: f.text().rules(hideWhen("$.headerStyle", "!=", "reference"))
+                                    }));
+                            }).template("classesBlock", (t)=>{
+                                t.label("Classes").fields((f)=>({
+                                        _id: f.text().hidden(),
+                                        classes: f.object().list().renderer("passthrough").fields((c)=>({
+                                                customCTA: c.boolean(),
+                                                customCTALabel: c.text().rules(hideWhen("$.customCTA", "!=", true))
+                                            }))
+                                    }));
+                            })
+                        })
+                });
+            it("resolves $. against the owning template item", ()=>{
+                const form = createBlocksForm();
+                form.setData({
+                    blocks: [
+                        {
+                            _templateId: "heroBlock",
+                            _id: "hero1",
+                            ctaStyle: "initiative"
+                        },
+                        {
+                            _templateId: "heroBlock",
+                            _id: "hero2",
+                            ctaStyle: "standard"
+                        }
+                    ]
+                });
+                expect(itemChild(form, "blocks", 0, "ctaUrl").visible).toBe(false);
+                expect(itemChild(form, "blocks", 0, "customUrls").visible).toBe(true);
+                expect(itemChild(form, "blocks", 1, "ctaUrl").visible).toBe(true);
+                expect(itemChild(form, "blocks", 1, "customUrls").visible).toBe(false);
+            });
+            it("re-evaluates when the referenced sibling changes", ()=>{
+                const form = createBlocksForm();
+                form.setData({
+                    blocks: [
+                        {
+                            _templateId: "richTextBlock",
+                            _id: "rt1",
+                            headerStyle: "manual"
+                        }
+                    ]
+                });
+                expect(itemChild(form, "blocks", 0, "header").visible).toBe(true);
+                expect(itemChild(form, "blocks", 0, "headingGroupRef").visible).toBe(false);
+                itemChild(form, "blocks", 0, "headerStyle").setValue("reference");
+                expect(itemChild(form, "blocks", 0, "header").visible).toBe(false);
+                expect(itemChild(form, "blocks", 0, "headingGroupRef").visible).toBe(true);
+            });
+            it("resolves $. inside an object list nested in a template item", ()=>{
+                const form = createBlocksForm();
+                form.setData({
+                    blocks: [
+                        {
+                            _templateId: "classesBlock",
+                            _id: "classes1",
+                            classes: [
+                                {
+                                    customCTA: true
+                                },
+                                {
+                                    customCTA: false
+                                }
+                            ]
+                        }
+                    ]
+                });
+                const classes = itemChild(form, "blocks", 0, "classes");
+                const classItem = (index, name)=>classes.items[index].children.get(name);
+                expect(classItem(0, "customCTALabel").visible).toBe(true);
+                expect(classItem(1, "customCTALabel").visible).toBe(false);
+                classItem(1, "customCTA").setValue(true);
+                expect(classItem(1, "customCTALabel").visible).toBe(true);
+            });
+        });
+    });
+    describe("setErrors", ()=>{
+        const createProductForm = ()=>createForm({
+                fields: (fields)=>({
+                        sku: fields.text().label("SKU"),
+                        variants: fields.object().list().label("Variants").fields((f)=>({
+                                code: f.text().label("Code")
+                            }))
+                    })
+            });
+        it("assigns an error to the field at its path and lists it in form errors", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                }
+            ]);
+            expect(form.field("sku").vm.validation).toMatchObject({
+                isValid: false,
+                message: "Value must be unique."
+            });
+            expect(form.vm.hasErrors).toBe(true);
+            expect(form.errors).toEqual([
+                {
+                    path: "sku",
+                    label: "SKU",
+                    breadcrumb: [
+                        "SKU"
+                    ],
+                    message: "Value must be unique."
+                }
+            ]);
+        });
+        it("resolves paths into list items", ()=>{
+            const form = createProductForm();
+            form.setData({
+                variants: [
+                    {
+                        code: "a"
+                    },
+                    {
+                        code: "b"
+                    }
+                ]
+            });
+            form.setErrors([
+                {
+                    path: "variants.1.code",
+                    message: "Invalid code."
+                }
+            ]);
+            const list = form.field("variants");
+            expect(list.items[1].children.get("code").vm.validation.isValid).toBe(false);
+            expect(list.items[0].children.get("code").vm.validation.isValid).not.toBe(false);
+            expect(form.errors).toEqual([
+                expect.objectContaining({
+                    path: "variants.1.code",
+                    breadcrumb: [
+                        "Variants",
+                        "Code"
+                    ]
+                })
+            ]);
+        });
+        it("keeps errors without a matching field as form-level errors", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "",
+                    message: "Could not update entry."
+                },
+                {
+                    path: "unknown.field",
+                    message: "Something is wrong."
+                }
+            ]);
+            expect(form.errors).toEqual([
+                {
+                    path: "",
+                    message: "Could not update entry."
+                },
+                {
+                    path: "unknown.field",
+                    message: "Something is wrong."
+                }
+            ]);
+            expect(form.isValid).toBe(false);
+        });
+        it("bumps submitCount so FormErrors scrolls into view", ()=>{
+            const form = createProductForm();
+            const before = form.submitCount;
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                }
+            ]);
+            expect(form.submitCount).toBe(before + 1);
+        });
+        it("is cleared by the next validate()", async ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                },
+                {
+                    path: "",
+                    message: "Could not update entry."
+                }
+            ]);
+            await form.validate();
+            expect(form.errors).toEqual([]);
+            expect(form.field("sku").vm.validation.isValid).not.toBe(false);
+        });
+        it("is cleared by setData()", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "",
+                    message: "Could not update entry."
+                }
+            ]);
+            form.setData({
+                sku: "ABC"
+            });
+            expect(form.errors).toEqual([]);
+            expect(form.vm.hasErrors).toBe(false);
+        });
+        it("clears the field errors of the previous call when given an empty set", ()=>{
+            const form = createProductForm();
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                }
+            ]);
+            form.setErrors([]);
+            expect(form.field("sku").vm.validation.isValid).not.toBe(false);
+            expect(form.errors).toEqual([]);
+            expect(form.isValid).toBe(true);
+            expect(form.vm.hasErrors).toBe(false);
+        });
+        it("keeps only the errors of the latest rejected save", ()=>{
+            const form = createProductForm();
+            form.setData({
+                variants: [
+                    {
+                        code: "a"
+                    }
+                ]
+            });
+            form.setErrors([
+                {
+                    path: "sku",
+                    message: "Value must be unique."
+                }
+            ]);
+            form.setErrors([
+                {
+                    path: "variants.0.code",
+                    message: "Invalid code."
+                }
+            ]);
+            expect(form.field("sku").vm.validation.isValid).not.toBe(false);
+            expect(form.errors).toEqual([
+                expect.objectContaining({
+                    path: "variants.0.code",
+                    message: "Invalid code."
+                })
+            ]);
+        });
+    });
 });
 
 //# sourceMappingURL=FormModel.test.js.map