npm - @webiny/app-admin - Versions diffs - 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8 - Mend

@webiny/app-admin 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2537) hide show

package/features/formModel/demo/FieldRenderersDemoPresenter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"features/formModel/demo/FieldRenderersDemoPresenter.js","sources":["../../../../src/features/formModel/demo/FieldRenderersDemoPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport type { IFormModel, IFormModelFactory, IFormVM, IFormError } from \"../abstractions.js\";\n\nexport interface FieldRenderersDemoVM {\n form: IFormVM;\n data: Record<string, unknown>;\n lastSubmitted: Record<string, unknown> | null;\n isSubmitting: boolean;\n formErrors: IFormError[];\n}\n\nexport class FieldRenderersDemoPresenter {\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 // --- Text ---\n textInput: fields\n .text()\n .label(\"Text Input\")\n .placeholder(\"Type here...\")\n .required(\"Text input is required\")\n .description(\"Standard text input\")\n .help(\"Enter any text value\")\n .note(\"Max 255 characters\"),\n textInputs: fields\n .text()\n .list()\n .label(\"Text Inputs\")\n .renderer(\"textInputs\", { addItemLabel: \"Add text\" })\n .description(\"Add multiple text values\")\n .help(\"Each value is stored separately\")\n .note(\"Press Enter to add quickly\"),\n tags: fields\n .text()\n .list()\n .label(\"Tags\")\n .renderer(\"tags\")\n .placeholder(\"Add values\")\n .defaultValue([])\n .description(\"Comma-separated tags\")\n .help(\"Type and press Enter to add a tag\")\n .note(\"Duplicates are ignored\"),\n textarea: fields\n .text()\n .label(\"Textarea\")\n .renderer(\"textarea\", { rows: 4 })\n .description(\"Multi-line text area\")\n .help(\"Supports plain text only\")\n .note(\"Resizable vertically\"),\n textareas: fields\n .text()\n .list()\n .label(\"Descriptions\")\n .renderer(\"textareas\", { addItemLabel: \"Add description\" })\n .description(\"Multiple long text values\")\n .help(\"Each textarea is independent\")\n .note(\"Click add to append a new block\"),\n\n // --- Number ---\n numberInput: fields\n .number()\n .label(\"Number\")\n .placeholder(\"0\")\n .required(\"Number is required\")\n .description(\"Single numeric value\")\n .help(\"Accepts integers and decimals\")\n .note(\"Use dot as decimal separator\"),\n numberInputs: fields\n .number()\n .list()\n .label(\"Number Inputs\")\n .renderer(\"numberInputs\", { addItemLabel: \"Add number\" })\n .description(\"Multiple numeric values\")\n .help(\"Each input accepts a number\")\n .note(\"Empty values are stored as empty strings\"),\n numberOptions: fields\n .number()\n .list()\n .label(\"Number Options\")\n .options([\n { label: \"Tier 1\", value: 100 },\n { label: \"Tier 2\", value: 200 }\n ])\n .description(\"Multiple numeric values\")\n .help(\"Each input accepts a number\")\n .note(\"Empty values are stored as empty strings\"),\n\n // --- Boolean ---\n boolSwitch: fields\n .boolean()\n .label(\"Boolean Switch\")\n .description(\"Toggle on/off\")\n .help(\"Click to toggle state\")\n .note(\"Default is unchecked\"),\n\n // --- Predefined Values ---\n dropdown: fields\n .text()\n .label(\"Dropdown\")\n .placeholder(\"Pick one\")\n .required(\"Dropdown selection is required\")\n .description(\"Single-select dropdown\")\n .help(\"Choose exactly one option\")\n .note(\"Required for form submission\")\n .options([\n { label: \"Option A\", value: \"a\" },\n { label: \"Option B\", value: \"b\" },\n { label: \"Option C\", value: \"c\" }\n ]),\n radioButtons: fields\n .text()\n .label(\"Radio Buttons\")\n .options([\n { label: \"Small\", value: \"sm\" },\n { label: \"Medium\", value: \"md\" },\n { label: \"Large\", value: \"lg\" }\n ])\n .renderer(\"radioButtons\")\n .description(\"Pick a size variant\")\n .help(\"Only one option can be selected\")\n .note(\"Selection is mutually exclusive\"),\n checkboxes: fields\n .text()\n .list()\n .label(\"Checkboxes\")\n .options([\n { label: \"Read\", value: \"read\" },\n { label: \"Write\", value: \"write\" },\n { label: \"Admin\", value: \"admin\" }\n ])\n .renderer(\"checkboxes\")\n .description(\"Multi-select permissions\")\n .help(\"Check all that apply\")\n .note(\"At least one is recommended\"),\n\n // --- Date/Time ---\n dateOnly: fields\n .datetime()\n .required()\n .dateOnly()\n .label(\"Date Only\")\n .description(\"Pick a calendar date\")\n .note(\"Value: YYYY-MM-DD\"),\n timeOnly: fields\n .datetime()\n .required()\n .timeOnly()\n .label(\"Time Only\")\n .description(\"Time without a date\")\n .note(\"24-hour format\"),\n dateTime: fields\n .datetime()\n .required()\n .withoutTimezone()\n .label(\"Date & Time\")\n .description(\"Date with time of day\")\n .note(\"Seconds default to :00\"),\n dateTimeTz: fields\n .datetime()\n .required()\n .withTimezone()\n .label(\"Date Time + Timezone\")\n .description(\"Full date, time, and timezone\")\n .note(\"Timezone defaults to your local zone\"),\n monthOnly: fields\n .datetime()\n .required()\n .monthOnly()\n .label(\"Month\")\n .description(\"Pick a month and year\")\n .note(\"Value: YYYY-MM\"),\n weekOnly: fields\n .datetime()\n .required()\n .weekOnly({ startsOn: 1 })\n .label(\"Week\")\n .description(\"Pick an ISO week\")\n .note(\"Value: YYYY-Www\"),\n yearOnly: fields\n .datetime()\n .required()\n .yearOnly({ range: [2020, 2035] })\n .label(\"Year\")\n .description(\"Pick a year\")\n .note(\"Value: number\"),\n dateRange: fields\n .datetime()\n .required()\n .dateRange()\n .label(\"Date Range\")\n .description(\"Pick a start and end date\")\n .note(\"Value: { from, to }\"),\n multipleDates: fields\n .datetime()\n .required()\n .multipleDates()\n .label(\"Multiple Dates\")\n .description(\"Select multiple dates\")\n .note(\"Value: string[]\"),\n multipleMonths: fields\n .datetime()\n .required()\n .multipleMonths()\n .label(\"Multiple Months\")\n .description(\"Select multiple months\")\n .note(\"Value: string[]\"),\n multipleYears: fields\n .datetime()\n .required()\n .multipleYears({ range: [2020, 2035] })\n .label(\"Multiple Years\")\n .description(\"Select multiple years\")\n .note(\"Value: number[]\"),\n dateTimeList: fields\n .datetime()\n .required()\n .withTimezone()\n .list()\n .label(\"Dates with TZ (multi)\")\n .description(\"Multiple date entries\")\n .note(\"Each date is independent\"),\n\n // --- Hidden ---\n hiddenField: fields\n .text()\n .hidden()\n .defaultValue(\"secret-value\")\n .description(\"Not visible in the UI\")\n .help(\"Carried in form data silently\")\n .note(\"Value is preset\"),\n\n // --- Key-Value Tags ---\n metaTags: fields\n .object()\n .list()\n .label(\"Meta Tags\")\n .description(\"Add SEO tags\")\n .renderer(\"keyValueTags\", { addItemLabel: \"Add tag\" })\n .fields(f => ({\n name: f.text().placeholder(\"Name\"),\n content: f.text().placeholder(\"Content\")\n })),\n\n // --- Conditional Visibility / Disabled ---\n enableFeature: fields\n .boolean()\n .label(\"Enable Feature\")\n .description(\"Toggle this to show or hide the feature fields below\"),\n featureName: fields\n .text()\n .label(\"Feature Name\")\n .placeholder(\"Name your feature...\")\n .rules([\n {\n type: \"condition\",\n target: \"enableFeature\",\n operator: \"isFalsy\",\n value: null,\n action: \"hide\"\n }\n ]),\n featureMode: fields\n .text()\n .label(\"Feature Mode\")\n .options([\n { label: \"Simple\", value: \"simple\" },\n { label: \"Advanced\", value: \"advanced\" }\n ])\n .rules([\n {\n type: \"condition\",\n target: \"enableFeature\",\n operator: \"isFalsy\",\n value: null,\n action: \"hide\"\n }\n ]),\n advancedConfig: fields\n .text()\n .label(\"Advanced Config\")\n .placeholder(\"JSON config...\")\n .renderer(\"textarea\", { rows: 3 })\n .description(\"Only editable in advanced mode\")\n .rules([\n {\n type: \"condition\",\n target: \"enableFeature\",\n operator: \"isFalsy\",\n value: null,\n action: \"hide\"\n },\n {\n type: \"condition\",\n target: \"featureMode\",\n operator: \"neq\",\n value: \"advanced\",\n action: \"disable\"\n }\n ]),\n\n // --- Dynamic Zone (single template) ---\n contentBlock: fields\n .object()\n .label(\"Content Block\")\n .template(\"hero\", t => {\n t.label(\"Hero Banner\")\n .icon({\n type: \"icon\",\n name: \"fab/behance-square\"\n })\n .fields(f => ({\n heading: f.text().label(\"Heading\").required(\"Required\"),\n image: f.text().label(\"Image URL\")\n }));\n })\n .template(\"text\", t => {\n t.label(\"Rich Text\")\n .icon({\n type: \"icon\",\n name: \"fab/behance-square\"\n })\n .fields(f => ({\n body: f.text().label(\"Body\").renderer(\"textarea\")\n }));\n }),\n\n // --- Dynamic Zone (multi-value template list) ---\n sections: fields\n .object()\n .list()\n .label(\"Page Sections\")\n .renderer(\"dynamicZone\", { container: false })\n .template(\"hero\", t => {\n t.label(\"Hero Banner\")\n .icon({\n type: \"icon\",\n name: \"fab/behance-square\"\n })\n .fields(f => ({\n heading: f.text().label(\"Heading\"),\n subheading: f.text().label(\"Subheading\"),\n uuid: f\n .text()\n .label(\"UUID\")\n .defaultValue(() => Date.now())\n .cloneValue(value => `${value}/${Date.now()}`)\n }));\n })\n .template(\"cta\", t => {\n t.label(\"Call To Action\")\n .icon({\n type: \"icon\",\n name: \"fab/behance-square\"\n })\n .fields(f => ({\n label: f.text().label(\"Button Label\"),\n url: f.text().label(\"URL\")\n }));\n }),\n\n // --- Files ---\n fileImage: fields\n .file()\n .label(\"Image (full metadata)\")\n .description(\"Stores the full file object (id, name, size, src, etc.)\"),\n fileUrl: fields\n .fileUrl()\n .label(\"Image URL\")\n .description(\"Stores only the file URL as a string\"),\n\n // --- Lexical ---\n richText: fields\n .lexical()\n .label(\"Rich Text\")\n .description(\"Lexical rich text editor\")\n }),\n layout: layout => [\n layout\n .tabs(\"mainTabs\")\n .tab(\"text\", tab => {\n tab.label(\"Text\").layout(l => [\n l.row(\"textInput\"),\n l.row(\"textInputs\"),\n l.row(\"tags\"),\n l.row(\"textarea\"),\n l.row(\"textareas\"),\n l.row(\"metaTags\")\n ]);\n })\n .tab(\"numbers\", tab => {\n tab.label(\"Numbers & Boolean\").layout(l => [\n l.row(\"numberInput\"),\n l.row(\"numberInputs\"),\n l.row(\"numberOptions\"),\n l.separator(),\n l.row(\"boolSwitch\")\n ]);\n })\n .tab(\"selects\", tab => {\n tab.label(\"Selects\").layout(l => [\n l.row(\"dropdown\", \"radioButtons\"),\n l.row(\"checkboxes\")\n ]);\n })\n .tab(\"datetime\", tab => {\n tab.label(\"Date / Time\").layout(l => [\n l.row(\"dateOnly\", \"timeOnly\"),\n l.row(\"dateTime\"),\n l.row(\"dateTimeTz\"),\n l.separator(),\n l.row(\"monthOnly\", \"weekOnly\"),\n l.row(\"yearOnly\"),\n l.separator(),\n l.row(\"dateRange\"),\n l.row(\"multipleDates\"),\n l.row(\"multipleMonths\", \"multipleYears\"),\n l.separator(),\n l.row(\"dateTimeList\")\n ]);\n })\n .tab(\"rules\", tab => {\n tab.label(\"Rules\").layout(l => [\n l.row(\"enableFeature\"),\n l.row(\"featureName\", \"featureMode\"),\n l.row(\"advancedConfig\")\n ]);\n })\n .tab(\"dynamic\", tab => {\n tab.label(\"Dynamic Zones\").layout(l => [\n l.object(\"contentBlock\", {\n hero: inner => [inner.row(\"heading\"), inner.row(\"image\")],\n text: inner => [inner.row(\"body\")]\n }),\n l.object(\"sections\", {\n hero: inner => [\n inner.row(\"heading\", \"subheading\"),\n inner.row(\"uuid\")\n ],\n cta: inner => [inner.row(\"label\", \"url\")]\n })\n ]);\n })\n .tab(\"files\", tab => {\n tab.label(\"Files\").layout(l => [l.row(\"fileImage\", \"fileUrl\")]);\n })\n .tab(\"lexical\", tab => {\n tab.label(\"Lexical\").layout(l => [l.row(\"richText\")]);\n })\n ]\n });\n\n makeAutoObservable(this);\n }\n\n get vm(): FieldRenderersDemoVM {\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\n };\n }\n\n focusField(path: string): void {\n this.form.focusField(path);\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":["FieldRenderersDemoPresenter","formFactory","fields","f","t","Date","value","layout","tab","l","inner","makeAutoObservable","toJS","path","result"],"mappings":"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"}

package/features/formModel/demo/FormModelDemo.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const FormModelDemo: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/features/formModel/demo/FormModelDemo.js ADDED Viewed

@@ -0,0 +1,206 @@
+import react, { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+import { useFeature } from "@webiny/app";
+import { Button } from "@webiny/admin-ui";
+import { FormView } from "../FormView.js";
+import { FormModelFeature } from "../feature.js";
+import { FieldRenderersDemoPresenter } from "./FieldRenderersDemoPresenter.js";
+import { FormModelDemoPresenter } from "./FormModelDemoPresenter.js";
+import { FormModelPhase8c1Presenter } from "./FormModelPhase8c1Presenter.js";
+import { FormModelPhase11Presenter } from "./FormModelPhase11Presenter.js";
+const FormModelDemo = observer(()=>{
+    const { formModelFactory } = useFeature(FormModelFeature);
+    const presenter = useMemo(()=>new FormModelDemoPresenter(formModelFactory), [
+        formModelFactory
+    ]);
+    const { form, data, lastSubmitted, isSubmitting, runtimeTemplateAdded, textTemplateRemoved } = presenter.vm;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "p-lg flex flex-col gap-2xl max-w-4xl mx-auto"
+    }, /*#__PURE__*/ react.createElement(FieldRenderersSection, null), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("h2", {
+        className: "text-xl font-semibold"
+    }, "FormModel Demo — Phase 8"), /*#__PURE__*/ react.createElement("p", {
+        className: "text-sm text-neutral-strong"
+    }, 'Exercises the full Phase 8 surface: single-object templates ("Content Block"), templated lists ("Page Sections"), per-template layouts (Hero spans two rows; Rich Text uses a single row; templates without a layout entry fall back to default), and runtime template management via', " ", /*#__PURE__*/ react.createElement("code", null, "field.templates.add/remove"), ". Change Plan to", " ", /*#__PURE__*/ react.createElement("code", null, "enterprise"), ' to reveal the "Premium Widget" template in the Content Block picker.')), /*#__PURE__*/ react.createElement(FormView, {
+        name: "Demo",
+        form: form
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        text: isSubmitting ? "Submitting…" : "Submit",
+        variant: "primary",
+        onClick: ()=>presenter.submit(),
+        disabled: isSubmitting
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Reset",
+        variant: "secondary",
+        onClick: ()=>presenter.reset(),
+        disabled: isSubmitting
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: runtimeTemplateAdded ? 'Remove "Runtime Banner" from sections' : 'Add "Runtime Banner" to sections',
+        variant: "tertiary",
+        onClick: ()=>presenter.toggleRuntimeTemplate()
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: textTemplateRemoved ? 'Restore "Rich Text" on content' : 'Remove "Rich Text" from content',
+        variant: "tertiary",
+        onClick: ()=>presenter.toggleTextTemplate()
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-2 gap-md"
+    }, /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Current getData()",
+        data: data
+    }), /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Last submitted",
+        data: lastSubmitted
+    }))), /*#__PURE__*/ react.createElement(Phase8c1Section, null), /*#__PURE__*/ react.createElement(Phase11Section, null));
+});
+const FieldRenderersSection = observer(()=>{
+    const { formModelFactory } = useFeature(FormModelFeature);
+    const presenter = useMemo(()=>new FieldRenderersDemoPresenter(formModelFactory), [
+        formModelFactory
+    ]);
+    const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("h2", {
+        className: "text-xl font-semibold"
+    }, "Field Renderers Showcase"), /*#__PURE__*/ react.createElement("p", {
+        className: "text-sm text-neutral-strong"
+    }, "All field renderer variants: text, number, boolean, select (dropdown/radio/checkboxes), date/time (4 variants), tags, textarea, multi-value lists, hidden, and dynamic zones. Renderers not yet implemented show nothing (console warning).")), /*#__PURE__*/ react.createElement(FormView, {
+        name: "Demo",
+        form: form
+    }), formErrors.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium"
+    }, "Form errors"), /*#__PURE__*/ react.createElement("ul", {
+        className: "text-xs text-error-strong list-disc pl-md"
+    }, formErrors.map((e, i)=>/*#__PURE__*/ react.createElement("li", {
+            key: i
+        }, e.path ? /*#__PURE__*/ react.createElement("button", {
+            type: "button",
+            className: "underline cursor-pointer hover:text-error-default",
+            onClick: ()=>presenter.focusField(e.path)
+        }, /*#__PURE__*/ react.createElement("code", null, e.path)) : null, " ", e.message)))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        text: isSubmitting ? "Submitting…" : "Submit",
+        variant: "primary",
+        onClick: ()=>presenter.submit(),
+        disabled: isSubmitting
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Reset",
+        variant: "secondary",
+        onClick: ()=>presenter.reset(),
+        disabled: isSubmitting
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-2 gap-md"
+    }, /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Current getData()",
+        data: data
+    }), /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Last submitted",
+        data: lastSubmitted
+    })));
+});
+const Phase8c1Section = observer(()=>{
+    const { formModelFactory } = useFeature(FormModelFeature);
+    const presenter = useMemo(()=>new FormModelPhase8c1Presenter(formModelFactory), [
+        formModelFactory
+    ]);
+    const { form, data, lastSubmitted, isSubmitting } = presenter.vm;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg border-t border-neutral-dimmed pt-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("h2", {
+        className: "text-xl font-semibold"
+    }, "FormModel Demo — Phase 8c.1"), /*#__PURE__*/ react.createElement("p", {
+        className: "text-sm text-neutral-strong"
+    }, "Nested object layouts. A top-level ", /*#__PURE__*/ react.createElement("code", null, "page"), " object whose inner layout is split across tabs (General / SEO). The SEO tab contains a nested", " ", /*#__PURE__*/ react.createElement("code", null, 'layout.object("seo", ...)'), " with its own row layout, and the SEO object itself contains another nested", " ", /*#__PURE__*/ react.createElement("code", null, 'layout.object("og", ...)'), " for the Open Graph fields. Phase 8c.1 walks the inner layout (including across tabs) and forwards each nested", " ", /*#__PURE__*/ react.createElement("code", null, "layout.object()"), " to the matching child at build time.")), /*#__PURE__*/ react.createElement(FormView, {
+        name: "Demo",
+        form: form
+    }), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        text: isSubmitting ? "Submitting…" : "Submit",
+        variant: "primary",
+        onClick: ()=>presenter.submit(),
+        disabled: isSubmitting
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Reset",
+        variant: "secondary",
+        onClick: ()=>presenter.reset(),
+        disabled: isSubmitting
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-2 gap-md"
+    }, /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Current getData()",
+        data: data
+    }), /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Last submitted",
+        data: lastSubmitted
+    })));
+});
+const Phase11Section = observer(()=>{
+    const { formModelFactory } = useFeature(FormModelFeature);
+    const presenter = useMemo(()=>new FormModelPhase11Presenter(formModelFactory), [
+        formModelFactory
+    ]);
+    const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-lg border-t border-neutral-dimmed pt-lg"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-sm"
+    }, /*#__PURE__*/ react.createElement("h2", {
+        className: "text-xl font-semibold"
+    }, "FormModel Demo — Phase 11"), /*#__PURE__*/ react.createElement("p", {
+        className: "text-sm text-neutral-strong"
+    }, "Conditional required (", /*#__PURE__*/ react.createElement("code", null, "requiredWhen"), " on Seats — chained builder + modifier rules), derived fields (", /*#__PURE__*/ react.createElement("code", null, "computed"), " Full Name and", " ", /*#__PURE__*/ react.createElement("code", null, "computedUntilDirty"), " Slug), modifier-style child addition via", " ", /*#__PURE__*/ react.createElement("code", null, 'field.as("object").fields()'), " adding Company/Bio to Profile, form-level rules (", /*#__PURE__*/ react.createElement("code", null, "addRule"), " with a Zod refinement for password match plus an imperative slug-length rule), and a layout assembled via", " ", /*#__PURE__*/ react.createElement("code", null, "setLayout"), ".")), /*#__PURE__*/ react.createElement(FormView, {
+        name: "Demo",
+        form: form
+    }), formErrors.length > 0 && /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium"
+    }, "Form errors"), /*#__PURE__*/ react.createElement("ul", {
+        className: "text-xs text-error-strong list-disc pl-md"
+    }, formErrors.map((e, i)=>/*#__PURE__*/ react.createElement("li", {
+            key: i
+        }, e.path ? /*#__PURE__*/ react.createElement("code", null, e.path) : null, " ", e.message)))), /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-sm"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        text: isSubmitting ? "Submitting…" : "Submit",
+        variant: "primary",
+        onClick: ()=>presenter.submit(),
+        disabled: isSubmitting
+    }), /*#__PURE__*/ react.createElement(Button, {
+        text: "Reset",
+        variant: "secondary",
+        onClick: ()=>presenter.reset(),
+        disabled: isSubmitting
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "grid grid-cols-2 gap-md"
+    }, /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Current getData()",
+        data: data
+    }), /*#__PURE__*/ react.createElement(DataPanel, {
+        title: "Last submitted",
+        data: lastSubmitted
+    })));
+});
+const DataPanel = ({ title, data })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "text-sm font-medium"
+    }, title), /*#__PURE__*/ react.createElement("pre", {
+        className: "text-xs bg-neutral-subtle p-sm rounded border border-neutral-dimmed overflow-auto"
+    }, null === data ? "null" : JSON.stringify(data, null, 2)));
+export { FormModelDemo };
+//# sourceMappingURL=FormModelDemo.js.map

package/features/formModel/demo/FormModelDemo.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"features/formModel/demo/FormModelDemo.js","sources":["../../../../src/features/formModel/demo/FormModelDemo.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { useFeature } from \"@webiny/app\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { FormView } from \"../FormView.js\";\nimport { FormModelFeature } from \"../feature.js\";\nimport { FieldRenderersDemoPresenter } from \"./FieldRenderersDemoPresenter.js\";\nimport { FormModelDemoPresenter } from \"./FormModelDemoPresenter.js\";\nimport { FormModelPhase8c1Presenter } from \"./FormModelPhase8c1Presenter.js\";\nimport { FormModelPhase11Presenter } from \"./FormModelPhase11Presenter.js\";\n\nexport const FormModelDemo = observer(() => {\n const { formModelFactory } = useFeature(FormModelFeature);\n const presenter = useMemo(\n () => new FormModelDemoPresenter(formModelFactory),\n [formModelFactory]\n );\n\n const { form, data, lastSubmitted, isSubmitting, runtimeTemplateAdded, textTemplateRemoved } =\n presenter.vm;\n\n return (\n <div className={\"p-lg flex flex-col gap-2xl max-w-4xl mx-auto\"}>\n <FieldRenderersSection />\n\n <div className={\"flex flex-col gap-lg\"}>\n <div className={\"flex flex-col gap-sm\"}>\n <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 8</h2>\n <p className={\"text-sm text-neutral-strong\"}>\n Exercises the full Phase 8 surface: single-object templates ("Content\n Block"), templated lists ("Page Sections"), per-template\n layouts (Hero spans two rows; Rich Text uses a single row; templates without\n a layout entry fall back to default), and runtime template management via{\" \"}\n <code>field.templates.add/remove</code>. Change Plan to{\" \"}\n <code>enterprise</code> to reveal the "Premium Widget" template in\n the Content Block picker.\n </p>\n </div>\n\n <FormView name=\"Demo\" form={form} />\n\n <div className={\"flex flex-wrap gap-sm\"}>\n <Button\n text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n variant={\"primary\"}\n onClick={() => presenter.submit()}\n disabled={isSubmitting}\n />\n <Button\n text={\"Reset\"}\n variant={\"secondary\"}\n onClick={() => presenter.reset()}\n disabled={isSubmitting}\n />\n <Button\n text={\n runtimeTemplateAdded\n ? 'Remove \"Runtime Banner\" from sections'\n : 'Add \"Runtime Banner\" to sections'\n }\n variant={\"tertiary\"}\n onClick={() => presenter.toggleRuntimeTemplate()}\n />\n <Button\n text={\n textTemplateRemoved\n ? 'Restore \"Rich Text\" on content'\n : 'Remove \"Rich Text\" from content'\n }\n variant={\"tertiary\"}\n onClick={() => presenter.toggleTextTemplate()}\n />\n </div>\n\n <div className={\"grid grid-cols-2 gap-md\"}>\n <DataPanel title={\"Current getData()\"} data={data} />\n <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n </div>\n </div>\n\n <Phase8c1Section />\n\n <Phase11Section />\n </div>\n );\n});\n\nconst FieldRenderersSection = observer(() => {\n const { formModelFactory } = useFeature(FormModelFeature);\n const presenter = useMemo(\n () => new FieldRenderersDemoPresenter(formModelFactory),\n [formModelFactory]\n );\n\n const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;\n\n return (\n <div className={\"flex flex-col gap-lg\"}>\n <div className={\"flex flex-col gap-sm\"}>\n <h2 className={\"text-xl font-semibold\"}>Field Renderers Showcase</h2>\n <p className={\"text-sm text-neutral-strong\"}>\n All field renderer variants: text, number, boolean, select\n (dropdown/radio/checkboxes), date/time (4 variants), tags, textarea, multi-value\n lists, hidden, and dynamic zones. Renderers not yet implemented show nothing\n (console warning).\n </p>\n </div>\n\n <FormView name=\"Demo\" form={form} />\n\n {formErrors.length > 0 && (\n <div className={\"flex flex-col gap-xs\"}>\n <div className={\"text-sm font-medium\"}>Form errors</div>\n <ul className={\"text-xs text-error-strong list-disc pl-md\"}>\n {formErrors.map((e, i) => (\n <li key={i}>\n {e.path ? (\n <button\n type={\"button\"}\n className={\n \"underline cursor-pointer hover:text-error-default\"\n }\n onClick={() => presenter.focusField(e.path)}\n >\n <code>{e.path}</code>\n </button>\n ) : null}{\" \"}\n {e.message}\n </li>\n ))}\n </ul>\n </div>\n )}\n\n <div className={\"flex flex-wrap gap-sm\"}>\n <Button\n text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n variant={\"primary\"}\n onClick={() => presenter.submit()}\n disabled={isSubmitting}\n />\n <Button\n text={\"Reset\"}\n variant={\"secondary\"}\n onClick={() => presenter.reset()}\n disabled={isSubmitting}\n />\n </div>\n\n <div className={\"grid grid-cols-2 gap-md\"}>\n <DataPanel title={\"Current getData()\"} data={data} />\n <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n </div>\n </div>\n );\n});\n\nconst Phase8c1Section = observer(() => {\n const { formModelFactory } = useFeature(FormModelFeature);\n const presenter = useMemo(\n () => new FormModelPhase8c1Presenter(formModelFactory),\n [formModelFactory]\n );\n\n const { form, data, lastSubmitted, isSubmitting } = presenter.vm;\n\n return (\n <div className={\"flex flex-col gap-lg border-t border-neutral-dimmed pt-lg\"}>\n <div className={\"flex flex-col gap-sm\"}>\n <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 8c.1</h2>\n <p className={\"text-sm text-neutral-strong\"}>\n Nested object layouts. A top-level <code>page</code> object whose inner layout\n is split across tabs (General / SEO). The SEO tab contains a nested{\" \"}\n <code>layout.object("seo", ...)</code> with its own row layout, and\n the SEO object itself contains another nested{\" \"}\n <code>layout.object("og", ...)</code> for the Open Graph fields. Phase\n 8c.1 walks the inner layout (including across tabs) and forwards each nested{\" \"}\n <code>layout.object()</code> to the matching child at build time.\n </p>\n </div>\n\n <FormView name=\"Demo\" form={form} />\n\n <div className={\"flex flex-wrap gap-sm\"}>\n <Button\n text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n variant={\"primary\"}\n onClick={() => presenter.submit()}\n disabled={isSubmitting}\n />\n <Button\n text={\"Reset\"}\n variant={\"secondary\"}\n onClick={() => presenter.reset()}\n disabled={isSubmitting}\n />\n </div>\n\n <div className={\"grid grid-cols-2 gap-md\"}>\n <DataPanel title={\"Current getData()\"} data={data} />\n <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n </div>\n </div>\n );\n});\n\nconst Phase11Section = observer(() => {\n const { formModelFactory } = useFeature(FormModelFeature);\n const presenter = useMemo(\n () => new FormModelPhase11Presenter(formModelFactory),\n [formModelFactory]\n );\n\n const { form, data, lastSubmitted, isSubmitting, formErrors } = presenter.vm;\n\n return (\n <div className={\"flex flex-col gap-lg border-t border-neutral-dimmed pt-lg\"}>\n <div className={\"flex flex-col gap-sm\"}>\n <h2 className={\"text-xl font-semibold\"}>FormModel Demo — Phase 11</h2>\n <p className={\"text-sm text-neutral-strong\"}>\n Conditional required (<code>requiredWhen</code> on Seats — chained builder +\n modifier rules), derived fields (<code>computed</code> Full Name and{\" \"}\n <code>computedUntilDirty</code> Slug), modifier-style child addition via{\" \"}\n <code>field.as("object").fields()</code> adding Company/Bio to\n Profile, form-level rules (<code>addRule</code> with a Zod refinement for\n password match plus an imperative slug-length rule), and a layout assembled via{\" \"}\n <code>setLayout</code>.\n </p>\n </div>\n\n <FormView name=\"Demo\" form={form} />\n\n {formErrors.length > 0 && (\n <div className={\"flex flex-col gap-xs\"}>\n <div className={\"text-sm font-medium\"}>Form errors</div>\n <ul className={\"text-xs text-error-strong list-disc pl-md\"}>\n {formErrors.map((e, i) => (\n <li key={i}>\n {e.path ? <code>{e.path}</code> : null} {e.message}\n </li>\n ))}\n </ul>\n </div>\n )}\n\n <div className={\"flex flex-wrap gap-sm\"}>\n <Button\n text={isSubmitting ? \"Submitting…\" : \"Submit\"}\n variant={\"primary\"}\n onClick={() => presenter.submit()}\n disabled={isSubmitting}\n />\n <Button\n text={\"Reset\"}\n variant={\"secondary\"}\n onClick={() => presenter.reset()}\n disabled={isSubmitting}\n />\n </div>\n\n <div className={\"grid grid-cols-2 gap-md\"}>\n <DataPanel title={\"Current getData()\"} data={data} />\n <DataPanel title={\"Last submitted\"} data={lastSubmitted} />\n </div>\n </div>\n );\n});\n\nconst DataPanel = ({ title, data }: { title: string; data: unknown }) => {\n return (\n <div className={\"flex flex-col gap-xs\"}>\n <div className={\"text-sm font-medium\"}>{title}</div>\n <pre\n className={\n \"text-xs bg-neutral-subtle p-sm rounded border border-neutral-dimmed overflow-auto\"\n }\n >\n {data === null ? \"null\" : JSON.stringify(data, null, 2)}\n </pre>\n </div>\n );\n};\n"],"names":["FormModelDemo","observer","formModelFactory","useFeature","FormModelFeature","presenter","useMemo","FormModelDemoPresenter","form","data","lastSubmitted","isSubmitting","runtimeTemplateAdded","textTemplateRemoved","FieldRenderersSection","FormView","Button","DataPanel","Phase8c1Section","Phase11Section","FieldRenderersDemoPresenter","formErrors","e","i","FormModelPhase8c1Presenter","FormModelPhase11Presenter","title","JSON"],"mappings":"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"}

package/features/formModel/demo/FormModelDemoPresenter.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import type { IFormModelFactory, IFormVM } from "../abstractions.js";
+export interface FormModelDemoVM {
+    form: IFormVM;
+    data: Record<string, unknown>;
+    lastSubmitted: Record<string, unknown> | null;
+    isSubmitting: boolean;
+    runtimeTemplateAdded: boolean;
+    textTemplateRemoved: boolean;
+}
+export declare class FormModelDemoPresenter {
+    private form;
+    private lastSubmitted;
+    private isSubmitting;
+    private runtimeTemplateAdded;
+    private textTemplateRemoved;
+    constructor(formFactory: IFormModelFactory);
+    get vm(): FormModelDemoVM;
+    submit(): Promise<void>;
+    reset(): void;
+    toggleRuntimeTemplate(): void;
+    toggleTextTemplate(): void;
+}

package/features/formModel/demo/FormModelDemoPresenter.js ADDED Viewed

@@ -0,0 +1,140 @@
+import { makeAutoObservable, toJS } from "mobx";
+const RUNTIME_TEMPLATE_ID = "runtimeBanner";
+class FormModelDemoPresenter {
+    constructor(formFactory){
+        this.lastSubmitted = null;
+        this.isSubmitting = false;
+        this.runtimeTemplateAdded = false;
+        this.textTemplateRemoved = false;
+        this.form = formFactory.create({
+            fields: (fields)=>({
+                    title: fields.text().label("Title").required("Title is required"),
+                    content: fields.object().label("Content Block").required("Pick a template").template("hero", (t)=>{
+                        t.label("Hero Banner").fields((f)=>({
+                                heading: f.text().label("Heading").required("Required"),
+                                subheading: f.text().label("Subheading"),
+                                image: f.text().label("Image URL"),
+                                cta: f.text().label("Call To Action")
+                            }));
+                    }).template("text", (t)=>{
+                        t.label("Rich Text").fields((f)=>({
+                                body: f.text().label("Body").required("Required")
+                            }));
+                    }).template("premium", (t)=>{
+                        t.label("Premium Widget").visible((form)=>"enterprise" === form.field("plan").getValue()).fields((f)=>({
+                                config: f.text().label("Widget Config")
+                            }));
+                    }),
+                    sections: fields.object().label("Page Sections").list().template("hero", (t)=>{
+                        t.label("Hero Banner").fields((f)=>({
+                                heading: f.text().label("Heading").required("Required"),
+                                subheading: f.text().label("Subheading"),
+                                image: f.text().label("Image URL")
+                            }));
+                    }).template("text", (t)=>{
+                        t.label("Rich Text").fields((f)=>({
+                                body: f.text().label("Body").required("Required")
+                            }));
+                    }).template("cta", (t)=>{
+                        t.label("Call To Action").fields((f)=>({
+                                label: f.text().label("Button Label").required("Required"),
+                                url: f.text().label("Link URL")
+                            }));
+                    }),
+                    plan: fields.text().label("Plan").defaultValue("free").options([
+                        {
+                            label: "Free",
+                            value: "free"
+                        },
+                        {
+                            label: "Pro",
+                            value: "pro"
+                        },
+                        {
+                            label: "Enterprise",
+                            value: "enterprise"
+                        }
+                    ])
+                }),
+            layout: (layout)=>[
+                    layout.row("title"),
+                    layout.row("plan"),
+                    layout.object("content", {
+                        hero: (l)=>[
+                                l.row("heading", "subheading"),
+                                l.row("image"),
+                                l.row("cta")
+                            ],
+                        text: (l)=>[
+                                l.row("body")
+                            ]
+                    }),
+                    layout.object("sections", {
+                        hero: (l)=>[
+                                l.row("heading", "subheading"),
+                                l.row("image")
+                            ],
+                        cta: (l)=>[
+                                l.row("label", "url")
+                            ]
+                    })
+                ]
+        });
+        makeAutoObservable(this);
+    }
+    get vm() {
+        return {
+            form: this.form.vm,
+            data: toJS(this.form.getData()),
+            lastSubmitted: this.lastSubmitted,
+            isSubmitting: this.isSubmitting,
+            runtimeTemplateAdded: this.runtimeTemplateAdded,
+            textTemplateRemoved: this.textTemplateRemoved
+        };
+    }
+    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;
+    }
+    toggleRuntimeTemplate() {
+        const sections = this.form.field("sections").as("object");
+        if (this.runtimeTemplateAdded) {
+            sections.templates.remove(RUNTIME_TEMPLATE_ID);
+            this.runtimeTemplateAdded = false;
+        } else {
+            sections.templates.add(RUNTIME_TEMPLATE_ID, (t)=>{
+                t.label("Runtime Banner").fields((f)=>({
+                        headline: f.text().label("Headline").required("Required"),
+                        note: f.text().label("Note")
+                    }));
+            });
+            this.runtimeTemplateAdded = true;
+        }
+    }
+    toggleTextTemplate() {
+        const content = this.form.field("content").as("object");
+        if (this.textTemplateRemoved) {
+            content.templates.add("text", (t)=>{
+                t.label("Rich Text").fields((f)=>({
+                        body: f.text().label("Body").required("Required")
+                    }));
+            });
+            this.textTemplateRemoved = false;
+        } else {
+            content.templates.remove("text");
+            this.textTemplateRemoved = true;
+        }
+    }
+}
+export { FormModelDemoPresenter };
+//# sourceMappingURL=FormModelDemoPresenter.js.map

package/features/formModel/demo/FormModelDemoPresenter.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"features/formModel/demo/FormModelDemoPresenter.js","sources":["../../../../src/features/formModel/demo/FormModelDemoPresenter.ts"],"sourcesContent":["import { makeAutoObservable, toJS } from \"mobx\";\nimport type { IFormModel, IFormModelFactory, IFormVM } from \"../abstractions.js\";\n\nexport interface FormModelDemoVM {\n form: IFormVM;\n data: Record<string, unknown>;\n lastSubmitted: Record<string, unknown> | null;\n isSubmitting: boolean;\n runtimeTemplateAdded: boolean;\n textTemplateRemoved: boolean;\n}\n\nconst RUNTIME_TEMPLATE_ID = \"runtimeBanner\";\n\nexport class FormModelDemoPresenter {\n private form: IFormModel;\n private lastSubmitted: Record<string, unknown> | null = null;\n private isSubmitting = false;\n private runtimeTemplateAdded = false;\n private textTemplateRemoved = false;\n\n constructor(formFactory: IFormModelFactory) {\n this.form = formFactory.create({\n fields: fields => ({\n title: fields.text().label(\"Title\").required(\"Title is required\"),\n content: fields\n .object()\n .label(\"Content Block\")\n .required(\"Pick a template\")\n .template(\"hero\", t => {\n t.label(\"Hero Banner\").fields(f => ({\n heading: f.text().label(\"Heading\").required(\"Required\"),\n subheading: f.text().label(\"Subheading\"),\n image: f.text().label(\"Image URL\"),\n cta: f.text().label(\"Call To Action\")\n }));\n })\n .template(\"text\", t => {\n t.label(\"Rich Text\").fields(f => ({\n body: f.text().label(\"Body\").required(\"Required\")\n }));\n })\n .template(\"premium\", t => {\n t.label(\"Premium Widget\")\n .visible(form => form.field(\"plan\").getValue() === \"enterprise\")\n .fields(f => ({\n config: f.text().label(\"Widget Config\")\n }));\n }),\n sections: fields\n .object()\n .label(\"Page Sections\")\n .list()\n .template(\"hero\", t => {\n t.label(\"Hero Banner\").fields(f => ({\n heading: f.text().label(\"Heading\").required(\"Required\"),\n subheading: f.text().label(\"Subheading\"),\n image: f.text().label(\"Image URL\")\n }));\n })\n .template(\"text\", t => {\n t.label(\"Rich Text\").fields(f => ({\n body: f.text().label(\"Body\").required(\"Required\")\n }));\n })\n .template(\"cta\", t => {\n t.label(\"Call To Action\").fields(f => ({\n label: f.text().label(\"Button Label\").required(\"Required\"),\n url: f.text().label(\"Link URL\")\n }));\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 }),\n layout: layout => [\n layout.row(\"title\"),\n layout.row(\"plan\"),\n layout.object(\"content\", {\n hero: l => [l.row(\"heading\", \"subheading\"), l.row(\"image\"), l.row(\"cta\")],\n text: l => [l.row(\"body\")]\n }),\n layout.object(\"sections\", {\n hero: l => [l.row(\"heading\", \"subheading\"), l.row(\"image\")],\n cta: l => [l.row(\"label\", \"url\")]\n })\n ]\n });\n\n makeAutoObservable(this);\n }\n\n get vm(): FormModelDemoVM {\n return {\n form: this.form.vm,\n data: toJS(this.form.getData()),\n lastSubmitted: this.lastSubmitted,\n isSubmitting: this.isSubmitting,\n runtimeTemplateAdded: this.runtimeTemplateAdded,\n textTemplateRemoved: this.textTemplateRemoved\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 toggleRuntimeTemplate(): void {\n const sections = this.form.field(\"sections\").as(\"object\");\n if (this.runtimeTemplateAdded) {\n sections.templates.remove(RUNTIME_TEMPLATE_ID);\n this.runtimeTemplateAdded = false;\n } else {\n sections.templates.add(RUNTIME_TEMPLATE_ID, t => {\n t.label(\"Runtime Banner\").fields(f => ({\n headline: f.text().label(\"Headline\").required(\"Required\"),\n note: f.text().label(\"Note\")\n }));\n });\n this.runtimeTemplateAdded = true;\n }\n }\n\n toggleTextTemplate(): void {\n const content = this.form.field(\"content\").as(\"object\");\n if (this.textTemplateRemoved) {\n content.templates.add(\"text\", t => {\n t.label(\"Rich Text\").fields(f => ({\n body: f.text().label(\"Body\").required(\"Required\")\n }));\n });\n this.textTemplateRemoved = false;\n } else {\n content.templates.remove(\"text\");\n this.textTemplateRemoved = true;\n }\n }\n}\n"],"names":["RUNTIME_TEMPLATE_ID","FormModelDemoPresenter","formFactory","fields","t","f","form","layout","l","makeAutoObservable","toJS","result","sections","content"],"mappings":"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"}

package/features/formModel/demo/FormModelPhase11Presenter.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import type { IFormModelFactory, IFormVM } from "../abstractions.js";
+export interface FormModelPhase11VM {
+    form: IFormVM;
+    data: Record<string, unknown>;
+    lastSubmitted: Record<string, unknown> | null;
+    isSubmitting: boolean;
+    formErrors: {
+        path: string;
+        message: string;
+    }[];
+}
+/**
+ * Demo presenter exercising Phase 11 features: requiredWhen (builder + modifier
+ * chaining), computed/computedUntilDirty, .extend() on object fields, form-level
+ * addRule (Zod + imperative), and setLayout.
+ */
+export declare class FormModelPhase11Presenter {
+    private form;
+    private lastSubmitted;
+    private isSubmitting;
+    constructor(formFactory: IFormModelFactory);
+    get vm(): FormModelPhase11VM;
+    submit(): Promise<void>;
+    reset(): void;
+}