@webiny/app-admin 6.3.0 → 6.4.0-beta.1

package/features/formModel/demo/FormModelPhase11Presenter.js

@@ -1,104 +1,107 @@
 import { makeAutoObservable, toJS } from "mobx";
 import { z } from "zod";
-/**
- * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier
- * chaining), computed/computedUntilDirty, .extend() on object fields, form-level
- * addRule (Zod + imperative), and setLayout.
- */
-export class FormModelPhase11Presenter {
-  lastSubmitted = null;
-  isSubmitting = false;
-  constructor(formFactory) {
-    this.form = formFactory.create({
-      fields: fields => ({
-        first: fields.text().label("First name").defaultValue("Ada"),
-        last: fields.text().label("Last name").defaultValue("Lovelace"),
-        fullName: fields.text().label("Full name (computed)").computed(f => `${f.field("first").getValue()} ${f.field("last").getValue()}`),
-        slug: fields.text().label("Slug (computed until you edit it)").computedUntilDirty(f => {
-          const full = `${f.field("first").getValue()} ${f.field("last").getValue()}`;
-          return full.trim().toLowerCase().replace(/\s+/g, "-");
-        }),
-        plan: fields.text().label("Plan").defaultValue("free").options([{
-          label: "Free",
-          value: "free"
-        }, {
-          label: "Pro",
-          value: "pro"
-        }, {
-          label: "Enterprise",
-          value: "enterprise"
-        }]),
-        seats: fields.text().label("Number of seats").help("Required when plan is pro or enterprise").requiredWhen(f => f.field("plan").getValue() === "pro", "Pro plan needs a seat count"),
-        profile: fields.object().label("Profile").fields(f => ({
-          title: f.text().label("Title")
-        })),
-        password: fields.text().label("Password"),
-        confirm: fields.text().label("Confirm password")
-      })
-    });
-
-    // Modifier-style: add children to the existing "profile" object field.
-    this.form.field("profile").as("object").fields(f => ({
-      company: f.text().label("Company"),
-      bio: f.text().label("Short bio")
-    }));
-
-    // Modifier-style requiredWhen: chains with the builder-defined one above.
-    // First truthy callback wins.
-    this.form.field("seats").addRequiredWhen(f => f.field("plan").getValue() === "enterprise", "Enterprise plan needs a seat count too");
-
-    // Form-level Zod rule: confirm must match password.
-    this.form.addRule(z.object({
-      password: z.string().nullable(),
-      confirm: z.string().nullable()
-    }).refine(d => d.password === d.confirm || !d.password && !d.confirm, {
-      message: "Passwords must match",
-      path: ["confirm"]
-    }));
-
-    // Imperative form-level rule.
-    this.form.addRule(f => {
-      const slug = String(f.field("slug").getValue() ?? "");
-      if (slug.length > 0 && slug.length < 3) {
-        return [{
-          path: "slug",
-          message: "Slug must be at least 3 characters"
-        }];
-      }
-      return [];
-    });
-
-    // setLayout — full replacement.
-    this.form.setLayout(layout => [layout.row("first", "last"), layout.row("fullName"), layout.row("slug"), layout.separator(), layout.row("plan", "seats"), layout.separator(), layout.object("profile", l => [l.row("title"), l.row("company"), l.row("bio")]), layout.separator(), layout.row("password", "confirm")]);
-    makeAutoObservable(this);
-  }
-  get vm() {
-    return {
-      form: this.form.vm,
-      data: toJS(this.form.getData()),
-      lastSubmitted: this.lastSubmitted,
-      isSubmitting: this.isSubmitting,
-      formErrors: this.form.errors.map(e => ({
-        path: e.path,
-        message: e.message
-      }))
-    };
-  }
-  async submit() {
-    this.isSubmitting = true;
-    try {
-      const result = await this.form.submit();
-      if (result !== false) {
-        this.lastSubmitted = toJS(result);
-      }
-    } finally {
-      this.isSubmitting = false;
+class FormModelPhase11Presenter {
+    constructor(formFactory){
+        this.lastSubmitted = null;
+        this.isSubmitting = false;
+        this.form = formFactory.create({
+            fields: (fields)=>({
+                    first: fields.text().label("First name").defaultValue("Ada"),
+                    last: fields.text().label("Last name").defaultValue("Lovelace"),
+                    fullName: fields.text().label("Full name (computed)").computed((f)=>`${f.field("first").getValue()} ${f.field("last").getValue()}`),
+                    slug: fields.text().label("Slug (computed until you edit it)").computedUntilDirty((f)=>{
+                        const full = `${f.field("first").getValue()} ${f.field("last").getValue()}`;
+                        return full.trim().toLowerCase().replace(/\s+/g, "-");
+                    }),
+                    plan: fields.text().label("Plan").defaultValue("free").options([
+                        {
+                            label: "Free",
+                            value: "free"
+                        },
+                        {
+                            label: "Pro",
+                            value: "pro"
+                        },
+                        {
+                            label: "Enterprise",
+                            value: "enterprise"
+                        }
+                    ]),
+                    seats: fields.text().label("Number of seats").help("Required when plan is pro or enterprise").requiredWhen((f)=>"pro" === f.field("plan").getValue(), "Pro plan needs a seat count"),
+                    profile: fields.object().label("Profile").fields((f)=>({
+                            title: f.text().label("Title")
+                        })),
+                    password: fields.text().label("Password"),
+                    confirm: fields.text().label("Confirm password")
+                })
+        });
+        this.form.field("profile").as("object").fields((f)=>({
+                company: f.text().label("Company"),
+                bio: f.text().label("Short bio")
+            }));
+        this.form.field("seats").addRequiredWhen((f)=>"enterprise" === f.field("plan").getValue(), "Enterprise plan needs a seat count too");
+        this.form.addRule(z.object({
+            password: z.string().nullable(),
+            confirm: z.string().nullable()
+        }).refine((d)=>d.password === d.confirm || !d.password && !d.confirm, {
+            message: "Passwords must match",
+            path: [
+                "confirm"
+            ]
+        }));
+        this.form.addRule((f)=>{
+            const slug = String(f.field("slug").getValue() ?? "");
+            if (slug.length > 0 && slug.length < 3) return [
+                {
+                    path: "slug",
+                    message: "Slug must be at least 3 characters"
+                }
+            ];
+            return [];
+        });
+        this.form.setLayout((layout)=>[
+                layout.row("first", "last"),
+                layout.row("fullName"),
+                layout.row("slug"),
+                layout.separator(),
+                layout.row("plan", "seats"),
+                layout.separator(),
+                layout.object("profile", (l)=>[
+                        l.row("title"),
+                        l.row("company"),
+                        l.row("bio")
+                    ]),
+                layout.separator(),
+                layout.row("password", "confirm")
+            ]);
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            form: this.form.vm,
+            data: toJS(this.form.getData()),
+            lastSubmitted: this.lastSubmitted,
+            isSubmitting: this.isSubmitting,
+            formErrors: this.form.errors.map((e)=>({
+                    path: e.path,
+                    message: e.message
+                }))
+        };
+    }
+    async submit() {
+        this.isSubmitting = true;
+        try {
+            const result = await this.form.submit();
+            if (false !== result) this.lastSubmitted = toJS(result);
+        } finally{
+            this.isSubmitting = false;
+        }
+    }
+    reset() {
+        this.form.reset();
+        this.lastSubmitted = null;
     }
-  }
-  reset() {
-    this.form.reset();
-    this.lastSubmitted = null;
-  }
 }
+export { FormModelPhase11Presenter };
 
 //# sourceMappingURL=FormModelPhase11Presenter.js.map

package/features/formModel/demo/FormModelPhase11Presenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","toJS","z","FormModelPhase11Presenter","lastSubmitted","isSubmitting","constructor","formFactory","form","create","fields","first","text","label","defaultValue","last","fullName","computed","f","field","getValue","slug","computedUntilDirty","full","trim","toLowerCase","replace","plan","options","value","seats","help","requiredWhen","profile","object","title","password","confirm","as","company","bio","addRequiredWhen","addRule","string","nullable","refine","d","message","path","String","length","setLayout","layout","row","separator","l","vm","data","getData","formErrors","errors","map","e","submit","result","reset"],"sources":["FormModelPhase11Presenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport { z } from \"zod\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelPhase11VM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n    formErrors: { path: string; message: string }[];\n}\n\n/**\n * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier\n * chaining), computed/computedUntilDirty, .extend() on object fields, form-level\n * addRule (Zod + imperative), and setLayout.\n */\nexport class FormModelPhase11Presenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                first: fields.text().label(\"First name\").defaultValue(\"Ada\"),\n                last: fields.text().label(\"Last name\").defaultValue(\"Lovelace\"),\n                fullName: fields\n                    .text()\n                    .label(\"Full name (computed)\")\n                    .computed(f => `${f.field(\"first\").getValue()} ${f.field(\"last\").getValue()}`),\n                slug: fields\n                    .text()\n                    .label(\"Slug (computed until you edit it)\")\n                    .computedUntilDirty(f => {\n                        const full = `${f.field(\"first\").getValue()} ${f.field(\"last\").getValue()}`;\n                        return full.trim().toLowerCase().replace(/\\s+/g, \"-\");\n                    }),\n                plan: fields\n                    .text()\n                    .label(\"Plan\")\n                    .defaultValue(\"free\")\n                    .options([\n                        { label: \"Free\", value: \"free\" },\n                        { label: \"Pro\", value: \"pro\" },\n                        { label: \"Enterprise\", value: \"enterprise\" }\n                    ]),\n                seats: fields\n                    .text()\n                    .label(\"Number of seats\")\n                    .help(\"Required when plan is pro or enterprise\")\n                    .requiredWhen(\n                        f => f.field(\"plan\").getValue() === \"pro\",\n                        \"Pro plan needs a seat count\"\n                    ),\n                profile: fields\n                    .object()\n                    .label(\"Profile\")\n                    .fields(f => ({\n                        title: f.text().label(\"Title\")\n                    })),\n                password: fields.text().label(\"Password\"),\n                confirm: fields.text().label(\"Confirm password\")\n            })\n        });\n\n        // Modifier-style: add children to the existing \"profile\" object field.\n        this.form\n            .field(\"profile\")\n            .as(\"object\")\n            .fields(f => ({\n                company: f.text().label(\"Company\"),\n                bio: f.text().label(\"Short bio\")\n            }));\n\n        // Modifier-style requiredWhen: chains with the builder-defined one above.\n        // First truthy callback wins.\n        this.form\n            .field(\"seats\")\n            .addRequiredWhen(\n                f => f.field(\"plan\").getValue() === \"enterprise\",\n                \"Enterprise plan needs a seat count too\"\n            );\n\n        // Form-level Zod rule: confirm must match password.\n        this.form.addRule(\n            z\n                .object({\n                    password: z.string().nullable(),\n                    confirm: z.string().nullable()\n                })\n                .refine(d => d.password === d.confirm || (!d.password && !d.confirm), {\n                    message: \"Passwords must match\",\n                    path: [\"confirm\"]\n                })\n        );\n\n        // Imperative form-level rule.\n        this.form.addRule(f => {\n            const slug = String(f.field(\"slug\").getValue() ?? \"\");\n            if (slug.length > 0 && slug.length < 3) {\n                return [{ path: \"slug\", message: \"Slug must be at least 3 characters\" }];\n            }\n            return [];\n        });\n\n        // setLayout — full replacement.\n        this.form.setLayout(layout => [\n            layout.row(\"first\", \"last\"),\n            layout.row(\"fullName\"),\n            layout.row(\"slug\"),\n            layout.separator(),\n            layout.row(\"plan\", \"seats\"),\n            layout.separator(),\n            layout.object(\"profile\", l => [l.row(\"title\"), l.row(\"company\"), l.row(\"bio\")]),\n            layout.separator(),\n            layout.row(\"password\", \"confirm\")\n        ]);\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelPhase11VM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting,\n            formErrors: this.form.errors.map(e => ({\n                path: e.path,\n                message: e.message\n            }))\n        };\n    }\n\n    async submit(): Promise<void> {\n        this.isSubmitting = true;\n        try {\n            const result = await this.form.submit<Record<string, unknown>>();\n            if (result !== false) {\n                this.lastSubmitted = toJS(result);\n            }\n        } finally {\n            this.isSubmitting = false;\n        }\n    }\n\n    reset(): void {\n        this.form.reset();\n        this.lastSubmitted = null;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"features/formModel/demo/FormModelPhase11Presenter.js","sources":["../../../../src/features/formModel/demo/FormModelPhase11Presenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport { z } from \"zod\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelPhase11VM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n    formErrors: { path: string; message: string }[];\n}\n\n/**\n * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier\n * chaining), computed/computedUntilDirty, .extend() on object fields, form-level\n * addRule (Zod + imperative), and setLayout.\n */\nexport class FormModelPhase11Presenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                first: fields.text().label(\"First name\").defaultValue(\"Ada\"),\n                last: fields.text().label(\"Last name\").defaultValue(\"Lovelace\"),\n                fullName: fields\n                    .text()\n                    .label(\"Full name (computed)\")\n                    .computed(f => `${f.field(\"first\").getValue()} ${f.field(\"last\").getValue()}`),\n                slug: fields\n                    .text()\n                    .label(\"Slug (computed until you edit it)\")\n                    .computedUntilDirty(f => {\n                        const full = `${f.field(\"first\").getValue()} ${f.field(\"last\").getValue()}`;\n                        return full.trim().toLowerCase().replace(/\\s+/g, \"-\");\n                    }),\n                plan: fields\n                    .text()\n                    .label(\"Plan\")\n                    .defaultValue(\"free\")\n                    .options([\n                        { label: \"Free\", value: \"free\" },\n                        { label: \"Pro\", value: \"pro\" },\n                        { label: \"Enterprise\", value: \"enterprise\" }\n                    ]),\n                seats: fields\n                    .text()\n                    .label(\"Number of seats\")\n                    .help(\"Required when plan is pro or enterprise\")\n                    .requiredWhen(\n                        f => f.field(\"plan\").getValue() === \"pro\",\n                        \"Pro plan needs a seat count\"\n                    ),\n                profile: fields\n                    .object()\n                    .label(\"Profile\")\n                    .fields(f => ({\n                        title: f.text().label(\"Title\")\n                    })),\n                password: fields.text().label(\"Password\"),\n                confirm: fields.text().label(\"Confirm password\")\n            })\n        });\n\n        // Modifier-style: add children to the existing \"profile\" object field.\n        this.form\n            .field(\"profile\")\n            .as(\"object\")\n            .fields(f => ({\n                company: f.text().label(\"Company\"),\n                bio: f.text().label(\"Short bio\")\n            }));\n\n        // Modifier-style requiredWhen: chains with the builder-defined one above.\n        // First truthy callback wins.\n        this.form\n            .field(\"seats\")\n            .addRequiredWhen(\n                f => f.field(\"plan\").getValue() === \"enterprise\",\n                \"Enterprise plan needs a seat count too\"\n            );\n\n        // Form-level Zod rule: confirm must match password.\n        this.form.addRule(\n            z\n                .object({\n                    password: z.string().nullable(),\n                    confirm: z.string().nullable()\n                })\n                .refine(d => d.password === d.confirm || (!d.password && !d.confirm), {\n                    message: \"Passwords must match\",\n                    path: [\"confirm\"]\n                })\n        );\n\n        // Imperative form-level rule.\n        this.form.addRule(f => {\n            const slug = String(f.field(\"slug\").getValue() ?? \"\");\n            if (slug.length > 0 && slug.length < 3) {\n                return [{ path: \"slug\", message: \"Slug must be at least 3 characters\" }];\n            }\n            return [];\n        });\n\n        // setLayout — full replacement.\n        this.form.setLayout(layout => [\n            layout.row(\"first\", \"last\"),\n            layout.row(\"fullName\"),\n            layout.row(\"slug\"),\n            layout.separator(),\n            layout.row(\"plan\", \"seats\"),\n            layout.separator(),\n            layout.object(\"profile\", l => [l.row(\"title\"), l.row(\"company\"), l.row(\"bio\")]),\n            layout.separator(),\n            layout.row(\"password\", \"confirm\")\n        ]);\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelPhase11VM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting,\n            formErrors: this.form.errors.map(e => ({\n                path: e.path,\n                message: e.message\n            }))\n        };\n    }\n\n    async submit(): Promise<void> {\n        this.isSubmitting = true;\n        try {\n            const result = await this.form.submit<Record<string, unknown>>();\n            if (result !== false) {\n                this.lastSubmitted = toJS(result);\n            }\n        } finally {\n            this.isSubmitting = false;\n        }\n    }\n\n    reset(): void {\n        this.form.reset();\n        this.lastSubmitted = null;\n    }\n}\n"],"names":["FormModelPhase11Presenter","formFactory","fields","f","full","z","d","slug","String","layout","l","makeAutoObservable","toJS","e","result"],"mappings":"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"}

package/features/formModel/demo/FormModelPhase8c1Presenter.js

@@ -1,62 +1,69 @@
 import { makeAutoObservable, toJS } from "mobx";
-/**
- * Demo presenter exercising Phase 8c.1: nested object layouts. The form has a
- * top-level `page` object whose inner layout contains tabs, and one of those
- * tabs contains a nested `seo` object with its own row layout. The Phase 8c.1
- * registrar walks the inner layout (including tabs) and forwards the nested
- * `layout.object("seo", ...)` to the seo field at build time.
- */
-export class FormModelPhase8c1Presenter {
-  lastSubmitted = null;
-  isSubmitting = false;
-  constructor(formFactory) {
-    this.form = formFactory.create({
-      fields: fields => ({
-        page: fields.object().label("Page").fields(f => ({
-          title: f.text().label("Title").defaultValue("Welcome"),
-          slug: f.text().label("Slug").defaultValue("welcome"),
-          seo: f.object().label("SEO").fields(g => ({
-            metaTitle: g.text().label("Meta title"),
-            metaDescription: g.text().label("Meta description"),
-            og: g.object().label("Open Graph").fields(h => ({
-              ogTitle: h.text().label("OG title"),
-              ogImage: h.text().label("OG image URL")
-            }))
-          })),
-          body: f.text().label("Body content")
-        }))
-      }),
-      layout: layout => [layout.object("page", l => [l.tabs("pageTabs").tab("general", tab => {
-        tab.label("General").layout(l => [l.row("title", "slug"), l.row("body")]);
-      }).tab("seo", tab => {
-        tab.label("SEO").layout(l => [l.object("seo", inner => [inner.row("metaTitle"), inner.row("metaDescription"), inner.object("og", og => [og.row("ogTitle", "ogImage")])])]);
-      })])]
-    });
-    makeAutoObservable(this);
-  }
-  get vm() {
-    return {
-      form: this.form.vm,
-      data: toJS(this.form.getData()),
-      lastSubmitted: this.lastSubmitted,
-      isSubmitting: this.isSubmitting
-    };
-  }
-  async submit() {
-    this.isSubmitting = true;
-    try {
-      const result = await this.form.submit();
-      if (result !== false) {
-        this.lastSubmitted = toJS(result);
-      }
-    } finally {
-      this.isSubmitting = false;
+class FormModelPhase8c1Presenter {
+    constructor(formFactory){
+        this.lastSubmitted = null;
+        this.isSubmitting = false;
+        this.form = formFactory.create({
+            fields: (fields)=>({
+                    page: fields.object().label("Page").fields((f)=>({
+                            title: f.text().label("Title").defaultValue("Welcome"),
+                            slug: f.text().label("Slug").defaultValue("welcome"),
+                            seo: f.object().label("SEO").fields((g)=>({
+                                    metaTitle: g.text().label("Meta title"),
+                                    metaDescription: g.text().label("Meta description"),
+                                    og: g.object().label("Open Graph").fields((h)=>({
+                                            ogTitle: h.text().label("OG title"),
+                                            ogImage: h.text().label("OG image URL")
+                                        }))
+                                })),
+                            body: f.text().label("Body content")
+                        }))
+                }),
+            layout: (layout)=>[
+                    layout.object("page", (l)=>[
+                            l.tabs("pageTabs").tab("general", (tab)=>{
+                                tab.label("General").layout((l)=>[
+                                        l.row("title", "slug"),
+                                        l.row("body")
+                                    ]);
+                            }).tab("seo", (tab)=>{
+                                tab.label("SEO").layout((l)=>[
+                                        l.object("seo", (inner)=>[
+                                                inner.row("metaTitle"),
+                                                inner.row("metaDescription"),
+                                                inner.object("og", (og)=>[
+                                                        og.row("ogTitle", "ogImage")
+                                                    ])
+                                            ])
+                                    ]);
+                            })
+                        ])
+                ]
+        });
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            form: this.form.vm,
+            data: toJS(this.form.getData()),
+            lastSubmitted: this.lastSubmitted,
+            isSubmitting: this.isSubmitting
+        };
+    }
+    async submit() {
+        this.isSubmitting = true;
+        try {
+            const result = await this.form.submit();
+            if (false !== result) this.lastSubmitted = toJS(result);
+        } finally{
+            this.isSubmitting = false;
+        }
+    }
+    reset() {
+        this.form.reset();
+        this.lastSubmitted = null;
     }
-  }
-  reset() {
-    this.form.reset();
-    this.lastSubmitted = null;
-  }
 }
+export { FormModelPhase8c1Presenter };
 
 //# sourceMappingURL=FormModelPhase8c1Presenter.js.map

package/features/formModel/demo/FormModelPhase8c1Presenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","toJS","FormModelPhase8c1Presenter","lastSubmitted","isSubmitting","constructor","formFactory","form","create","fields","page","object","label","f","title","text","defaultValue","slug","seo","g","metaTitle","metaDescription","og","h","ogTitle","ogImage","body","layout","l","tabs","tab","row","inner","vm","data","getData","submit","result","reset"],"sources":["FormModelPhase8c1Presenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelPhase8c1VM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n}\n\n/**\n * Demo presenter exercising Phase 8c.1: nested object layouts. The form has a\n * top-level `page` object whose inner layout contains tabs, and one of those\n * tabs contains a nested `seo` object with its own row layout. The Phase 8c.1\n * registrar walks the inner layout (including tabs) and forwards the nested\n * `layout.object(\"seo\", ...)` to the seo field at build time.\n */\nexport class FormModelPhase8c1Presenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                page: fields\n                    .object()\n                    .label(\"Page\")\n                    .fields(f => ({\n                        title: f.text().label(\"Title\").defaultValue(\"Welcome\"),\n                        slug: f.text().label(\"Slug\").defaultValue(\"welcome\"),\n                        seo: f\n                            .object()\n                            .label(\"SEO\")\n                            .fields(g => ({\n                                metaTitle: g.text().label(\"Meta title\"),\n                                metaDescription: g.text().label(\"Meta description\"),\n                                og: g\n                                    .object()\n                                    .label(\"Open Graph\")\n                                    .fields(h => ({\n                                        ogTitle: h.text().label(\"OG title\"),\n                                        ogImage: h.text().label(\"OG image URL\")\n                                    }))\n                            })),\n                        body: f.text().label(\"Body content\")\n                    }))\n            }),\n            layout: layout => [\n                layout.object(\"page\", l => [\n                    l\n                        .tabs(\"pageTabs\")\n                        .tab(\"general\", tab => {\n                            tab.label(\"General\").layout(l => [\n                                l.row(\"title\", \"slug\"),\n                                l.row(\"body\")\n                            ]);\n                        })\n                        .tab(\"seo\", tab => {\n                            tab.label(\"SEO\").layout(l => [\n                                l.object(\"seo\", inner => [\n                                    inner.row(\"metaTitle\"),\n                                    inner.row(\"metaDescription\"),\n                                    inner.object(\"og\", og => [og.row(\"ogTitle\", \"ogImage\")])\n                                ])\n                            ]);\n                        })\n                ])\n            ]\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelPhase8c1VM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting\n        };\n    }\n\n    async submit(): Promise<void> {\n        this.isSubmitting = true;\n        try {\n            const result = await this.form.submit<Record<string, unknown>>();\n            if (result !== false) {\n                this.lastSubmitted = toJS(result);\n            }\n        } finally {\n            this.isSubmitting = false;\n        }\n    }\n\n    reset(): void {\n        this.form.reset();\n        this.lastSubmitted = null;\n    }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"features/formModel/demo/FormModelPhase8c1Presenter.js","sources":["../../../../src/features/formModel/demo/FormModelPhase8c1Presenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelPhase8c1VM {\n    form: IFormVM;\n    data: Record<string, unknown>;\n    lastSubmitted: Record<string, unknown> | null;\n    isSubmitting: boolean;\n}\n\n/**\n * Demo presenter exercising Phase 8c.1: nested object layouts. The form has a\n * top-level `page` object whose inner layout contains tabs, and one of those\n * tabs contains a nested `seo` object with its own row layout. The Phase 8c.1\n * registrar walks the inner layout (including tabs) and forwards the nested\n * `layout.object(\"seo\", ...)` to the seo field at build time.\n */\nexport class FormModelPhase8c1Presenter {\n    private form: IFormModel;\n    private lastSubmitted: Record<string, unknown> | null = null;\n    private isSubmitting = false;\n\n    constructor(formFactory: IFormModelFactory) {\n        this.form = formFactory.create({\n            fields: fields => ({\n                page: fields\n                    .object()\n                    .label(\"Page\")\n                    .fields(f => ({\n                        title: f.text().label(\"Title\").defaultValue(\"Welcome\"),\n                        slug: f.text().label(\"Slug\").defaultValue(\"welcome\"),\n                        seo: f\n                            .object()\n                            .label(\"SEO\")\n                            .fields(g => ({\n                                metaTitle: g.text().label(\"Meta title\"),\n                                metaDescription: g.text().label(\"Meta description\"),\n                                og: g\n                                    .object()\n                                    .label(\"Open Graph\")\n                                    .fields(h => ({\n                                        ogTitle: h.text().label(\"OG title\"),\n                                        ogImage: h.text().label(\"OG image URL\")\n                                    }))\n                            })),\n                        body: f.text().label(\"Body content\")\n                    }))\n            }),\n            layout: layout => [\n                layout.object(\"page\", l => [\n                    l\n                        .tabs(\"pageTabs\")\n                        .tab(\"general\", tab => {\n                            tab.label(\"General\").layout(l => [\n                                l.row(\"title\", \"slug\"),\n                                l.row(\"body\")\n                            ]);\n                        })\n                        .tab(\"seo\", tab => {\n                            tab.label(\"SEO\").layout(l => [\n                                l.object(\"seo\", inner => [\n                                    inner.row(\"metaTitle\"),\n                                    inner.row(\"metaDescription\"),\n                                    inner.object(\"og\", og => [og.row(\"ogTitle\", \"ogImage\")])\n                                ])\n                            ]);\n                        })\n                ])\n            ]\n        });\n\n        makeAutoObservable(this);\n    }\n\n    get vm(): FormModelPhase8c1VM {\n        return {\n            form: this.form.vm,\n            data: toJS(this.form.getData()),\n            lastSubmitted: this.lastSubmitted,\n            isSubmitting: this.isSubmitting\n        };\n    }\n\n    async submit(): Promise<void> {\n        this.isSubmitting = true;\n        try {\n            const result = await this.form.submit<Record<string, unknown>>();\n            if (result !== false) {\n                this.lastSubmitted = toJS(result);\n            }\n        } finally {\n            this.isSubmitting = false;\n        }\n    }\n\n    reset(): void {\n        this.form.reset();\n        this.lastSubmitted = null;\n    }\n}\n"],"names":["FormModelPhase8c1Presenter","formFactory","fields","f","g","h","layout","l","tab","inner","og","makeAutoObservable","toJS","result"],"mappings":";AAiBO,MAAMA;IAKT,YAAYC,WAA8B,CAAE;aAHpC,aAAa,GAAmC;aAChD,YAAY,GAAG;QAGnB,IAAI,CAAC,IAAI,GAAGA,YAAY,MAAM,CAAC;YAC3B,QAAQC,CAAAA,SAAW;oBACf,MAAMA,OACD,MAAM,GACN,KAAK,CAAC,QACN,MAAM,CAACC,CAAAA,IAAM;4BACV,OAAOA,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,YAAY,CAAC;4BAC5C,MAAMA,EAAE,IAAI,GAAG,KAAK,CAAC,QAAQ,YAAY,CAAC;4BAC1C,KAAKA,EACA,MAAM,GACN,KAAK,CAAC,OACN,MAAM,CAACC,CAAAA,IAAM;oCACV,WAAWA,EAAE,IAAI,GAAG,KAAK,CAAC;oCAC1B,iBAAiBA,EAAE,IAAI,GAAG,KAAK,CAAC;oCAChC,IAAIA,EACC,MAAM,GACN,KAAK,CAAC,cACN,MAAM,CAACC,CAAAA,IAAM;4CACV,SAASA,EAAE,IAAI,GAAG,KAAK,CAAC;4CACxB,SAASA,EAAE,IAAI,GAAG,KAAK,CAAC;wCAC5B;gCACR;4BACJ,MAAMF,EAAE,IAAI,GAAG,KAAK,CAAC;wBACzB;gBACR;YACA,QAAQG,CAAAA,SAAU;oBACdA,OAAO,MAAM,CAAC,QAAQC,CAAAA,IAAK;4BACvBA,EACK,IAAI,CAAC,YACL,GAAG,CAAC,WAAWC,CAAAA;gCACZA,IAAI,KAAK,CAAC,WAAW,MAAM,CAACD,CAAAA,IAAK;wCAC7BA,EAAE,GAAG,CAAC,SAAS;wCACfA,EAAE,GAAG,CAAC;qCACT;4BACL,GACC,GAAG,CAAC,OAAOC,CAAAA;gCACRA,IAAI,KAAK,CAAC,OAAO,MAAM,CAACD,CAAAA,IAAK;wCACzBA,EAAE,MAAM,CAAC,OAAOE,CAAAA,QAAS;gDACrBA,MAAM,GAAG,CAAC;gDACVA,MAAM,GAAG,CAAC;gDACVA,MAAM,MAAM,CAAC,MAAMC,CAAAA,KAAM;wDAACA,GAAG,GAAG,CAAC,WAAW;qDAAW;6CAC1D;qCACJ;4BACL;yBACP;iBACJ;QACL;QAEAC,mBAAmB,IAAI;IAC3B;IAEA,IAAI,KAA0B;QAC1B,OAAO;YACH,MAAM,IAAI,CAAC,IAAI,CAAC,EAAE;YAClB,MAAMC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO;YAC5B,eAAe,IAAI,CAAC,aAAa;YACjC,cAAc,IAAI,CAAC,YAAY;QACnC;IACJ;IAEA,MAAM,SAAwB;QAC1B,IAAI,CAAC,YAAY,GAAG;QACpB,IAAI;YACA,MAAMC,SAAS,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM;YACrC,IAAIA,AAAW,UAAXA,QACA,IAAI,CAAC,aAAa,GAAGD,KAAKC;QAElC,SAAU;YACN,IAAI,CAAC,YAAY,GAAG;QACxB;IACJ;IAEA,QAAc;QACV,IAAI,CAAC,IAAI,CAAC,KAAK;QACf,IAAI,CAAC,aAAa,GAAG;IACzB;AACJ"}

package/features/formModel/feature.js

@@ -1,28 +1,29 @@
 import { createFeature } from "@webiny/feature/admin";
-import { FormModelFactory as Abstraction } from "./abstractions.js";
-import { FormModelFactory } from "./FormModelFactory.js";
+import { FormModelFactory } from "./abstractions.js";
+import { FormModelFactory as external_FormModelFactory_js_FormModelFactory } from "./FormModelFactory.js";
 import { ConditionRuleEvaluator } from "./ConditionRuleEvaluator.js";
 import { FieldBuilderRegistry } from "./FieldBuilderRegistry.js";
-import { TextFieldType, NumberFieldType, BooleanFieldType, DateTimeFieldType, FileFieldType, FileUrlFieldType, ObjectFieldType } from "./fieldTypes/index.js";
-export const FormModelFeature = createFeature({
-  name: "FormModel",
-  register(container) {
-    container.register(TextFieldType);
-    container.register(NumberFieldType);
-    container.register(BooleanFieldType);
-    container.register(DateTimeFieldType);
-    container.register(FileFieldType);
-    container.register(FileUrlFieldType);
-    container.register(ObjectFieldType);
-    container.register(FieldBuilderRegistry).inSingletonScope();
-    container.register(ConditionRuleEvaluator).inSingletonScope();
-    container.register(FormModelFactory).inSingletonScope();
-  },
-  resolve(container) {
-    return {
-      formModelFactory: container.resolve(Abstraction)
-    };
-  }
+import { BooleanFieldType, DateTimeFieldType, FileFieldType, FileUrlFieldType, NumberFieldType, ObjectFieldType, TextFieldType } from "./fieldTypes/index.js";
+const FormModelFeature = createFeature({
+    name: "FormModel",
+    register (container) {
+        container.register(TextFieldType);
+        container.register(NumberFieldType);
+        container.register(BooleanFieldType);
+        container.register(DateTimeFieldType);
+        container.register(FileFieldType);
+        container.register(FileUrlFieldType);
+        container.register(ObjectFieldType);
+        container.register(FieldBuilderRegistry).inSingletonScope();
+        container.register(ConditionRuleEvaluator).inSingletonScope();
+        container.register(external_FormModelFactory_js_FormModelFactory).inSingletonScope();
+    },
+    resolve (container) {
+        return {
+            formModelFactory: container.resolve(FormModelFactory)
+        };
+    }
 });
+export { FormModelFeature };
 
 //# sourceMappingURL=feature.js.map

package/features/formModel/feature.js.map

@@ -1 +1 @@
-{"version":3,"names":["createFeature","FormModelFactory","Abstraction","ConditionRuleEvaluator","FieldBuilderRegistry","TextFieldType","NumberFieldType","BooleanFieldType","DateTimeFieldType","FileFieldType","FileUrlFieldType","ObjectFieldType","FormModelFeature","name","register","container","inSingletonScope","resolve","formModelFactory"],"sources":["feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { FormModelFactory as Abstraction } from \"./abstractions.js\";\nimport { FormModelFactory } from \"./FormModelFactory.js\";\nimport { ConditionRuleEvaluator } from \"./ConditionRuleEvaluator.js\";\nimport { FieldBuilderRegistry } from \"./FieldBuilderRegistry.js\";\nimport {\n    TextFieldType,\n    NumberFieldType,\n    BooleanFieldType,\n    DateTimeFieldType,\n    FileFieldType,\n    FileUrlFieldType,\n    ObjectFieldType\n} from \"./fieldTypes/index.js\";\n\nexport const FormModelFeature = createFeature({\n    name: \"FormModel\",\n    register(container) {\n        container.register(TextFieldType);\n        container.register(NumberFieldType);\n        container.register(BooleanFieldType);\n        container.register(DateTimeFieldType);\n        container.register(FileFieldType);\n        container.register(FileUrlFieldType);\n        container.register(ObjectFieldType);\n\n        container.register(FieldBuilderRegistry).inSingletonScope();\n        container.register(ConditionRuleEvaluator).inSingletonScope();\n        container.register(FormModelFactory).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            formModelFactory: container.resolve(Abstraction)\n        };\n    }\n});\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,uBAAuB;AACrD,SAASC,gBAAgB,IAAIC,WAAW;AACxC,SAASD,gBAAgB;AACzB,SAASE,sBAAsB;AAC/B,SAASC,oBAAoB;AAC7B,SACIC,aAAa,EACbC,eAAe,EACfC,gBAAgB,EAChBC,iBAAiB,EACjBC,aAAa,EACbC,gBAAgB,EAChBC,eAAe;AAGnB,OAAO,MAAMC,gBAAgB,GAAGZ,aAAa,CAAC;EAC1Ca,IAAI,EAAE,WAAW;EACjBC,QAAQA,CAACC,SAAS,EAAE;IAChBA,SAAS,CAACD,QAAQ,CAACT,aAAa,CAAC;IACjCU,SAAS,CAACD,QAAQ,CAACR,eAAe,CAAC;IACnCS,SAAS,CAACD,QAAQ,CAACP,gBAAgB,CAAC;IACpCQ,SAAS,CAACD,QAAQ,CAACN,iBAAiB,CAAC;IACrCO,SAAS,CAACD,QAAQ,CAACL,aAAa,CAAC;IACjCM,SAAS,CAACD,QAAQ,CAACJ,gBAAgB,CAAC;IACpCK,SAAS,CAACD,QAAQ,CAACH,eAAe,CAAC;IAEnCI,SAAS,CAACD,QAAQ,CAACV,oBAAoB,CAAC,CAACY,gBAAgB,CAAC,CAAC;IAC3DD,SAAS,CAACD,QAAQ,CAACX,sBAAsB,CAAC,CAACa,gBAAgB,CAAC,CAAC;IAC7DD,SAAS,CAACD,QAAQ,CAACb,gBAAgB,CAAC,CAACe,gBAAgB,CAAC,CAAC;EAC3D,CAAC;EACDC,OAAOA,CAACF,SAAS,EAAE;IACf,OAAO;MACHG,gBAAgB,EAAEH,SAAS,CAACE,OAAO,CAACf,WAAW;IACnD,CAAC;EACL;AACJ,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"features/formModel/feature.js","sources":["../../../src/features/formModel/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { FormModelFactory as Abstraction } from \"./abstractions.js\";\nimport { FormModelFactory } from \"./FormModelFactory.js\";\nimport { ConditionRuleEvaluator } from \"./ConditionRuleEvaluator.js\";\nimport { FieldBuilderRegistry } from \"./FieldBuilderRegistry.js\";\nimport {\n    TextFieldType,\n    NumberFieldType,\n    BooleanFieldType,\n    DateTimeFieldType,\n    FileFieldType,\n    FileUrlFieldType,\n    ObjectFieldType\n} from \"./fieldTypes/index.js\";\n\nexport const FormModelFeature = createFeature({\n    name: \"FormModel\",\n    register(container) {\n        container.register(TextFieldType);\n        container.register(NumberFieldType);\n        container.register(BooleanFieldType);\n        container.register(DateTimeFieldType);\n        container.register(FileFieldType);\n        container.register(FileUrlFieldType);\n        container.register(ObjectFieldType);\n\n        container.register(FieldBuilderRegistry).inSingletonScope();\n        container.register(ConditionRuleEvaluator).inSingletonScope();\n        container.register(FormModelFactory).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            formModelFactory: container.resolve(Abstraction)\n        };\n    }\n});\n"],"names":["FormModelFeature","createFeature","container","TextFieldType","NumberFieldType","BooleanFieldType","DateTimeFieldType","FileFieldType","FileUrlFieldType","ObjectFieldType","FieldBuilderRegistry","ConditionRuleEvaluator","FormModelFactory","Abstraction"],"mappings":";;;;;;AAeO,MAAMA,mBAAmBC,cAAc;IAC1C,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC;QACnBD,UAAU,QAAQ,CAACE;QACnBF,UAAU,QAAQ,CAACG;QACnBH,UAAU,QAAQ,CAACI;QACnBJ,UAAU,QAAQ,CAACK;QACnBL,UAAU,QAAQ,CAACM;QACnBN,UAAU,QAAQ,CAACO;QAEnBP,UAAU,QAAQ,CAACQ,sBAAsB,gBAAgB;QACzDR,UAAU,QAAQ,CAACS,wBAAwB,gBAAgB;QAC3DT,UAAU,QAAQ,CAACU,+CAAkB,gBAAgB;IACzD;IACA,SAAQV,SAAS;QACb,OAAO;YACH,kBAAkBA,UAAU,OAAO,CAACW;QACxC;IACJ;AACJ"}

package/features/formModel/fieldTypes/BooleanFieldType.js

@@ -1,23 +1,26 @@
 import { FieldType } from "../abstractions.js";
 import { FieldBuilder } from "../FieldBuilder.js";
-export class BooleanFieldBuilder extends FieldBuilder {
-  constructor() {
-    super("boolean");
-    this._config.renderer = "switch";
-  }
-  normalizeValue(value) {
-    return Boolean(value);
-  }
+class BooleanFieldBuilder extends FieldBuilder {
+    constructor(){
+        super("boolean");
+        this._config.renderer = "switch";
+    }
+    normalizeValue(value) {
+        return Boolean(value);
+    }
 }
 class BooleanFieldTypeFactory {
-  type = "boolean";
-  create() {
-    return new BooleanFieldBuilder();
-  }
+    create() {
+        return new BooleanFieldBuilder();
+    }
+    constructor(){
+        this.type = "boolean";
+    }
 }
-export const BooleanFieldType = FieldType.createImplementation({
-  implementation: BooleanFieldTypeFactory,
-  dependencies: []
+const BooleanFieldType = FieldType.createImplementation({
+    implementation: BooleanFieldTypeFactory,
+    dependencies: []
 });
+export { BooleanFieldBuilder, BooleanFieldType };
 
 //# sourceMappingURL=BooleanFieldType.js.map

package/features/formModel/fieldTypes/BooleanFieldType.js.map

@@ -1 +1 @@
-{"version":3,"names":["FieldType","FieldBuilder","BooleanFieldBuilder","constructor","_config","renderer","normalizeValue","value","Boolean","BooleanFieldTypeFactory","type","create","BooleanFieldType","createImplementation","implementation","dependencies"],"sources":["BooleanFieldType.ts"],"sourcesContent":["import { FieldType, type IFieldTypeFactory } from \"../abstractions.js\";\nimport { FieldBuilder } from \"../FieldBuilder.js\";\n\nexport class BooleanFieldBuilder extends FieldBuilder<\"boolean\"> {\n    constructor() {\n        super(\"boolean\");\n        this._config.renderer = \"switch\";\n    }\n\n    override normalizeValue(value: unknown): unknown {\n        return Boolean(value);\n    }\n}\n\nclass BooleanFieldTypeFactory implements IFieldTypeFactory {\n    readonly type = \"boolean\";\n    create() {\n        return new BooleanFieldBuilder();\n    }\n}\n\nexport const BooleanFieldType = FieldType.createImplementation({\n    implementation: BooleanFieldTypeFactory,\n    dependencies: []\n});\n\ndeclare module \"../abstractions.js\" {\n    interface IFieldBuilderRegistry {\n        boolean(): IFieldBuilder<\"boolean\", false, boolean | null>;\n    }\n}\n"],"mappings":"AAAA,SAASA,SAAS;AAClB,SAASC,YAAY;AAErB,OAAO,MAAMC,mBAAmB,SAASD,YAAY,CAAY;EAC7DE,WAAWA,CAAA,EAAG;IACV,KAAK,CAAC,SAAS,CAAC;IAChB,IAAI,CAACC,OAAO,CAACC,QAAQ,GAAG,QAAQ;EACpC;EAESC,cAAcA,CAACC,KAAc,EAAW;IAC7C,OAAOC,OAAO,CAACD,KAAK,CAAC;EACzB;AACJ;AAEA,MAAME,uBAAuB,CAA8B;EAC9CC,IAAI,GAAG,SAAS;EACzBC,MAAMA,CAAA,EAAG;IACL,OAAO,IAAIT,mBAAmB,CAAC,CAAC;EACpC;AACJ;AAEA,OAAO,MAAMU,gBAAgB,GAAGZ,SAAS,CAACa,oBAAoB,CAAC;EAC3DC,cAAc,EAAEL,uBAAuB;EACvCM,YAAY,EAAE;AAClB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"features/formModel/fieldTypes/BooleanFieldType.js","sources":["../../../../src/features/formModel/fieldTypes/BooleanFieldType.ts"],"sourcesContent":["import { FieldType, type IFieldTypeFactory } from \"../abstractions.js\";\nimport { FieldBuilder } from \"../FieldBuilder.js\";\n\nexport class BooleanFieldBuilder extends FieldBuilder<\"boolean\"> {\n    constructor() {\n        super(\"boolean\");\n        this._config.renderer = \"switch\";\n    }\n\n    override normalizeValue(value: unknown): unknown {\n        return Boolean(value);\n    }\n}\n\nclass BooleanFieldTypeFactory implements IFieldTypeFactory {\n    readonly type = \"boolean\";\n    create() {\n        return new BooleanFieldBuilder();\n    }\n}\n\nexport const BooleanFieldType = FieldType.createImplementation({\n    implementation: BooleanFieldTypeFactory,\n    dependencies: []\n});\n\ndeclare module \"../abstractions.js\" {\n    interface IFieldBuilderRegistry {\n        boolean(): IFieldBuilder<\"boolean\", false, boolean | null>;\n    }\n}\n"],"names":["BooleanFieldBuilder","FieldBuilder","value","Boolean","BooleanFieldTypeFactory","BooleanFieldType","FieldType"],"mappings":";;AAGO,MAAMA,4BAA4BC;IACrC,aAAc;QACV,KAAK,CAAC;QACN,IAAI,CAAC,OAAO,CAAC,QAAQ,GAAG;IAC5B;IAES,eAAeC,KAAc,EAAW;QAC7C,OAAOC,QAAQD;IACnB;AACJ;AAEA,MAAME;IAEF,SAAS;QACL,OAAO,IAAIJ;IACf;;aAHS,IAAI,GAAG;;AAIpB;AAEO,MAAMK,mBAAmBC,UAAU,oBAAoB,CAAC;IAC3D,gBAAgBF;IAChB,cAAc,EAAE;AACpB"}