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

package/features/formModel/abstractions.js

@@ -0,0 +1,8 @@
+import { createAbstraction } from "@webiny/feature/admin";
+const FieldType = createAbstraction("FormModel/FieldType");
+const FieldBuilderRegistry = createAbstraction("FormModel/FieldBuilderRegistry");
+const FormModelFactory = createAbstraction("FormModelFactory");
+const RuleEvaluator = createAbstraction("FormModelRuleEvaluator");
+export { FieldBuilderRegistry, FieldType, FormModelFactory, RuleEvaluator };
+
+//# sourceMappingURL=abstractions.js.map

package/features/formModel/abstractions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/formModel/abstractions.js","sources":["../../../src/features/formModel/abstractions.ts"],"sourcesContent":["import { createAbstraction } from \"@webiny/feature/admin\";\nimport type { z } from \"zod\";\nimport type { Icon } from \"~/components/IconPicker/types.js\";\n\n// ---------------------------------------------------------------------------\n// Renderer registry — augmented by each renderer via declare module\n// ---------------------------------------------------------------------------\n\nexport interface IFieldRendererRegistry {}\n\nexport type FieldRendererName<\n    TType extends string = string,\n    TOptions extends boolean = boolean\n> = string extends TType\n    ? keyof IFieldRendererRegistry & string\n    : {\n          [K in keyof IFieldRendererRegistry]: TType extends IFieldRendererRegistry[K][\"fieldType\"]\n              ? boolean extends TOptions\n                  ? K\n                  : TOptions extends true\n                    ? IFieldRendererRegistry[K] extends { options: true }\n                        ? K\n                        : never\n                    : IFieldRendererRegistry[K] extends { options: true }\n                      ? never\n                      : K\n              : never;\n      }[keyof IFieldRendererRegistry] &\n          string;\n\nexport type FieldRendererSettings<TName extends string> = TName extends keyof IFieldRendererRegistry\n    ? IFieldRendererRegistry[TName][\"settings\"]\n    : Record<string, unknown> | undefined;\n\n// ---------------------------------------------------------------------------\n// Field types\n// ---------------------------------------------------------------------------\n\nexport interface IFieldConfig {\n    name: string;\n    type: string;\n    label?: string;\n    help?: string;\n    description?: string;\n    note?: string;\n    placeholder?: string;\n    defaultValue?: unknown;\n    autoFocus?: boolean;\n    renderer?: string;\n    rendererSettings?: Record<string, unknown>;\n    isList?: boolean;\n    hidden: boolean;\n    required: boolean;\n    requiredMessage?: string;\n    disabled: boolean;\n    schema?: z.ZodTypeAny;\n    options?: IValueOption[] | ((params: IFieldCallbackParams) => IValueOption[]);\n    normalizeValue?: (value: unknown) => unknown;\n    beforeChangeCallbacks?: BeforeChangeCallback[];\n    afterChangeCallbacks?: AfterChangeCallback[];\n    afterSetValueCallbacks?: AfterSetValueCallback[];\n    onBlurCallbacks?: OnBlurCallback[];\n    requiredWhenCallbacks?: RequiredWhenCallback[];\n    hiddenWhenCallbacks?: HiddenWhenCallback[];\n    disabledWhenCallbacks?: DisabledWhenCallback[];\n    computed?: ComputedFieldCallback;\n    computedUntilDirty?: ComputedFieldCallback;\n    tags?: string[];\n    cloneValue?: CloneValueCallback;\n    context?: FieldContextCallback;\n    rules?: IRule[];\n}\n\nexport interface IFieldScope {\n    field(name: string): IField;\n    parent(): IFieldScope;\n}\n\nexport interface IFieldNavigator {\n    parent(): IFieldScope;\n}\n\nexport interface IFieldCallbackParams {\n    field: IFieldNavigator;\n    form: IFormModel;\n}\n\nexport interface IRequiredWhenCallbackConfig {\n    fn: (params: IFieldCallbackParams) => boolean;\n    message?: string;\n}\n\nexport type RequiredWhenCallback = IRequiredWhenCallbackConfig;\n\nexport type HiddenWhenCallback = (params: IFieldCallbackParams) => boolean;\n\nexport type DisabledWhenCallback = (params: IFieldCallbackParams) => boolean;\n\nexport type ComputedFieldCallback = (params: IFieldCallbackParams) => unknown;\n\nexport type FieldContextCallback = (params: IFieldCallbackParams) => Record<string, unknown>;\n\n// ---------------------------------------------------------------------------\n// Rules system\n// ---------------------------------------------------------------------------\n\nexport type RuleAction = \"hide\" | \"disable\";\n\nexport type RuleOperator =\n    | \"==\"\n    | \"eq\"\n    | \"!=\"\n    | \"neq\"\n    | \">\"\n    | \"gt\"\n    | \"<\"\n    | \"lt\"\n    | \">=\"\n    | \"gte\"\n    | \"<=\"\n    | \"lte\"\n    | \"isEmpty\"\n    | \"isNotEmpty\"\n    | \"isTruthy\"\n    | \"isFalsy\"\n    | \"matches\"\n    | \"contains\"\n    | \"notContains\"\n    | \"startsWith\"\n    | \"notStartsWith\"\n    | \"endsWith\"\n    | \"notEndsWith\";\n\nexport interface IRule {\n    type: string;\n    target: string;\n    operator: RuleOperator | (string & {});\n    value: string | number | boolean | null;\n    action: RuleAction;\n}\n\nexport interface IRuleEvaluator {\n    canEvaluate(rule: IRule): boolean;\n    evaluate(rule: IRule, form: IFormModel): boolean;\n}\n\nexport interface IValueOption<V extends string | number = string | number> {\n    label: string;\n    value: V;\n    disabled?: boolean;\n}\n\nexport type OptionValueType<TType extends string> = TType extends \"number\" ? number : string;\n\nexport interface IFieldValidation {\n    isValid: boolean | null;\n    message?: string;\n}\n\nexport interface IFieldVM {\n    name: string;\n    /** Full dotted path of the field within the form (e.g. \"author.address.street\"). */\n    qualifiedName: string;\n    type: string;\n    label?: string;\n    help?: string;\n    description?: string;\n    note?: string;\n    placeholder?: string;\n    autoFocus?: boolean;\n    value: unknown;\n    validation: IFieldValidation;\n    validating: boolean;\n    required: boolean;\n    visible: boolean;\n    disabled: boolean;\n    renderer?: string;\n    rendererSettings?: Record<string, unknown>;\n    isList?: boolean;\n    options?: IValueOption[];\n    onChange: (value: unknown) => void;\n    onBlur: () => void;\n    addItem: (value?: unknown) => void;\n    removeItem: (index: number) => void;\n    focusRequested: boolean;\n    clearFocusRequest: () => void;\n    context: Record<string, unknown>;\n}\n\nexport interface IObjectFieldVM extends IFieldVM {\n    type: \"object\";\n    isList: boolean;\n    /** Child field VMs for non-list object fields. */\n    fields: IFieldVM[];\n    /**\n     * Resolved layout for non-list object fields. For templated objects, resolves\n     * against the active template's per-template layout (if registered via\n     * `layout.object()`), otherwise defaults to one row per visible child.\n     * For list-mode fields, see `items[].layout`.\n     */\n    layout: LayoutNodeVM[];\n    /** Items for list-mode object fields. */\n    items: IObjectFieldItemVM[];\n    /** Append a new item. Templated lists require a template id. */\n    addItem: (value?: unknown) => void;\n    moveItem: (fromIndex: number, toIndex: number) => void;\n    /** Duplicate a list item (including its `_templateId` when templated) and insert it after the source. */\n    duplicateItem: (index: number) => void;\n    /** True when the object has templates defined. */\n    isTemplated: boolean;\n    /** Templates visible in the picker (filtered by each template's reactive `visible`). */\n    availableTemplates: ITemplateVM[];\n    /** Currently active template id (single-object mode), or null if no template picked. */\n    activeTemplateId: string | null;\n    /** Switch to a different template. Discards values not present in the new template. */\n    setTemplate: (templateId: string) => void;\n    /** Returns a cloned copy of the current single-value data with cloneValue transforms applied. */\n    getClonedData: () => Record<string, unknown>;\n}\n\nexport interface IObjectFieldItemVM {\n    key: string;\n    fields: IFieldVM[];\n    /**\n     * Resolved layout for this item. For templated lists, resolves against the\n     * item's template-specific layout (if registered via `layout.object()`),\n     * otherwise defaults to one row per visible child.\n     */\n    layout: LayoutNodeVM[];\n    remove: () => void;\n    moveUp: () => void;\n    moveDown: () => void;\n    duplicate: () => void;\n    getClonedData: () => Record<string, unknown>;\n    /** The template id of this item, if the parent list is templated. */\n    templateId?: string;\n}\n\n/**\n * VM exposed for each available template in the picker.\n */\nexport interface ITemplateIcon {\n    type: string;\n    name: string;\n}\n\nexport interface ITemplateVM {\n    id: string;\n    label: string;\n    description?: string;\n    icon?: ITemplateIcon;\n}\n\nexport interface IField {\n    readonly name: string;\n    readonly type: string;\n    readonly visible: boolean;\n    readonly disabled: boolean;\n    readonly vm: IFieldVM;\n    readonly config: IFieldConfig;\n    getValue<T = unknown>(): T;\n    setValue(value: unknown): void;\n    setValueSilent(value: unknown): void;\n    setDisabled(value: boolean): void;\n    setVisible(value: boolean): void;\n    /**\n     * `parentPath` is the parent's qualified name. `scopePath` returns a path that\n     * `form.field()` resolves to the parent itself; it differs from `parentPath` for\n     * list item children, where it includes the item index (`blocks.2`). `$.` rule\n     * targets and `field.parent()` resolve against it. Defaults to `parentPath`.\n     */\n    setForm(form: IFormModel, parentPath?: string, scopePath?: () => string): void;\n    setAncestorRules(rules: IRule[]): void;\n    setValidation(validation: IFieldValidation): void;\n    resetValidation(): void;\n    validate(options?: { force?: boolean }): Promise<boolean>;\n    remove(): void;\n    addBeforeChange(cb: BeforeChangeCallback): void;\n    addAfterChange(cb: AfterChangeCallback): void;\n    addAfterSetValue(cb: AfterSetValueCallback): void;\n    addOnBlur(cb: OnBlurCallback): void;\n    /**\n     * Append a conditional required check. Multiple callbacks chain additively;\n     * the first one returning `true` makes the field required for the current\n     * form state. The built-in `.required()` flag (if set) always counts as a\n     * truthy check and cannot be overridden.\n     */\n    addRequiredWhen(fn: (params: IFieldCallbackParams) => boolean, message?: string): void;\n    /**\n     * Mark this field as a derived value computed from `fn(form)`. The field\n     * stays editable (no auto-disable) and is excluded from `isDirty` while\n     * still tracking the computed value. Validation continues to apply.\n     */\n    setComputed(fn: ComputedFieldCallback): void;\n    /**\n     * Same as `setComputed`, but the field switches to manual mode the first\n     * time the user edits its value. After that, the computed callback no\n     * longer overrides user input.\n     */\n    setComputedUntilDirty(fn: ComputedFieldCallback): void;\n    blur(): void;\n    as<T extends keyof FieldTypeMap>(type: T): FieldTypeMap[T];\n    readonly qualifiedName: string;\n    focus(): void;\n    requestFocus(): void;\n    clearFocusRequest(): void;\n}\n\n/**\n * Maps field type strings to their typed field interfaces.\n * Extended via module augmentation when new field types are registered.\n */\nexport interface ITypedField<V> extends IField {\n    getValue<T = V>(): T;\n}\n\ntype InferFieldTypeMap = {\n    [K in keyof IFieldBuilderRegistry]: ReturnType<\n        IFieldBuilderRegistry[K]\n    > extends IObjectFieldBuilder\n        ? IObjectField\n        : ReturnType<IFieldBuilderRegistry[K]> extends { readonly __valueType?: infer V }\n          ? ITypedField<V>\n          : IField;\n};\n\nexport type FieldTypeMap = { [K in keyof InferFieldTypeMap]: InferFieldTypeMap[K] };\n\nexport type FileValue = {\n    id: string;\n    name: string;\n    size: number;\n    mimeType: string;\n    src: string;\n    width: number | undefined;\n    height: number | undefined;\n};\n\n// ---------------------------------------------------------------------------\n// Object / List field types\n// ---------------------------------------------------------------------------\n\nexport interface IObjectFieldConfig extends IFieldConfig {\n    childBuilders: Record<string, IFieldBuilder>;\n    isList: boolean;\n    listSchema?: z.ZodTypeAny;\n    templates?: ITemplateConfig[];\n    /**\n     * Inner layout declared on the field itself via `.layout()`. A `layout.object()`\n     * node in the parent layout takes precedence over it.\n     */\n    layout?: LayoutNode[];\n}\n\nexport interface ITemplateBuilder {\n    label(text: string): this;\n    description(text: string): this;\n    icon(icon: ITemplateIcon): this;\n    fields(factory: (registry: IFieldBuilderRegistry) => Record<string, IFieldBuilder>): this;\n    layout(factory: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]): this;\n    visible(predicate: (form: IFormModel) => boolean): this;\n}\n\nexport interface ITemplateConfig {\n    id: string;\n    label: string;\n    description?: string;\n    icon?: ITemplateIcon;\n    childBuilders: Record<string, IFieldBuilder>;\n    layout?: LayoutNode[];\n    visible?: (form: IFormModel) => boolean;\n}\n\nexport interface IObjectField extends ITypedField<Record<string, unknown> | null> {\n    readonly isList: boolean;\n    readonly children: Map<string, IField>;\n    readonly items: IListItemField[];\n    readonly isTemplated: boolean;\n    readonly activeTemplateId: string | null;\n    readonly availableTemplates: ITemplateVM[];\n    /**\n     * Add, replace, or remove children on this object field at runtime.\n     * Mirrors `form.fields()` but scoped to this object's children. Existing\n     * keys are replaced; new keys are appended; passing `undefined` removes.\n     * Throws on templated objects — each template owns its own fields.\n     */\n    fields(\n        factory: (registry: IFieldBuilderRegistry) => Record<string, IFieldBuilder | undefined>\n    ): void;\n    /**\n     * Register an inner layout used by the field's VM (`field.layout` for\n     * single objects, `item.layout` for list items).\n     *\n     * Pass `LayoutNode[]` for non-templated objects (the layout applies to the\n     * single object or every list item). Pass `Record<templateId, LayoutNode[]>`\n     * for templated objects (each entry applies when that template is active\n     * or for each list item with that template). Templates without an entry\n     * fall back to default one-row-per-visible-child.\n     */\n    setInnerLayout(layout: LayoutNode[] | Record<string, LayoutNode[]>): void;\n    /**\n     * Append a new list item.\n     * - Non-templated list: `addItem(data?)` — data hydrates the new item.\n     * - Templated list: `addItem(templateId, data?)` — templateId picks the variant.\n     */\n    addItem(\n        templateIdOrData?: string | Record<string, unknown>,\n        data?: Record<string, unknown>\n    ): void;\n    removeItem(index: number): void;\n    moveItem(fromIndex: number, toIndex: number): void;\n    /** Duplicate a list item (including its `_templateId`) and insert after the source. */\n    duplicateItem(index: number): void;\n    setTemplate(templateId: string): void;\n    /**\n     * Runtime template management. Available on every object field but throws\n     * when called on a non-templated field (`isTemplated === false`).\n     */\n    readonly templates: IObjectFieldTemplates;\n    getInnerLayout(): LayoutNode[] | null;\n    getData(): Record<string, unknown> | Record<string, unknown>[];\n}\n\nexport interface IObjectFieldTemplates {\n    add(id: string, configure: (t: ITemplateBuilder) => void): void;\n    remove(templateId: string): void;\n}\n\nexport interface IListItemField {\n    readonly key: string;\n    readonly children: Map<string, IField>;\n    readonly templateId?: string;\n    getData(): Record<string, unknown>;\n}\n\n// ---------------------------------------------------------------------------\n// Callback types\n// ---------------------------------------------------------------------------\n\nexport type BeforeChangeCallback = (value: unknown, params: IFieldCallbackParams) => unknown;\nexport type AfterChangeCallback = (value: unknown, params: IFieldCallbackParams) => void;\nexport type AfterSetValueCallback = (value: unknown, params: IFieldCallbackParams) => void;\nexport type OnBlurCallback = (value: unknown, params: IFieldCallbackParams) => void;\nexport type CloneValueCallback = (value: unknown) => unknown;\n\n// ---------------------------------------------------------------------------\n// Layout types\n// ---------------------------------------------------------------------------\n\nexport type LayoutNode =\n    | IRowNode\n    | ISeparatorNode\n    | IAlertNode\n    | ITabsNode\n    | IElementNode\n    | IObjectNode;\n\nexport interface IRowNode {\n    type: \"row\";\n    fieldIds: string[];\n    position?: LayoutPosition;\n}\n\n/** @deprecated Use IRowBuilder instead */\nexport type IRowNodeHandle = IRowBuilder;\n\nexport interface ISeparatorNode {\n    type: \"separator\";\n    title?: string;\n    description?: string;\n    rules?: IRule[];\n}\n\nexport interface ITabDefinition {\n    id: string;\n    label: string;\n    description?: string;\n    icon?: Icon;\n    layout: LayoutNode[];\n    rules?: IRule[];\n}\n\n/**\n * User-facing tab spec accepted by `layout.tabs(...)`. The layout is supplied\n * as a callback receiving the layout builder, mirroring `layout.object(...)`.\n * Resolved to `ITabDefinition` (with `layout: LayoutNode[]`) at build time.\n */\nexport interface ITabDefinitionInput {\n    id: string;\n    label: string;\n    description?: string;\n    icon?: Icon;\n    layout: (layout: ILayoutBuilder) => ILayoutNodeBuilder[];\n    rules?: IRule[];\n}\n\nexport interface ITabsNode {\n    type: \"tabs\";\n    id?: string;\n    renderer?: string;\n    rendererSettings?: Record<string, unknown>;\n    tabs: ITabDefinition[];\n    rules?: IRule[];\n}\n\nexport interface IAlertNode {\n    type: \"alert\";\n    message?: string;\n    alertType?: \"info\" | \"success\" | \"warning\" | \"danger\";\n    rules?: IRule[];\n}\n\nexport interface IElementNode {\n    type: \"element\";\n    id?: string;\n    renderer: string;\n    props?: Record<string, unknown>;\n}\n\n/**\n * Layout node that references an object field and registers an inner layout\n * on it. Resolved as a single-field row in the outer layout — the inner\n * layout is exposed on the field's VM (`field.layout` for single objects,\n * `item.layout` for list items).\n *\n * - For non-templated objects, `inner` is `LayoutNode[]` (one layout, applied\n *   to the single object or every list item).\n * - For templated objects, `inner` is `Record<templateId, LayoutNode[]>` —\n *   each entry is the layout used when that template is active (or for each\n *   list item with that template).\n */\nexport interface IObjectNode {\n    type: \"object\";\n    fieldName: string;\n    inner: LayoutNode[] | Record<string, LayoutNode[]>;\n}\n\n// ---------------------------------------------------------------------------\n// Layout node builders\n// ---------------------------------------------------------------------------\n\nexport interface ILayoutNodeBuilder {\n    build(): LayoutNode;\n}\n\nexport interface IRowBuilder extends ILayoutNodeBuilder {\n    before(target: string): IRowBuilder;\n    after(target: string): IRowBuilder;\n    build(): IRowNode;\n}\n\nexport interface ISeparatorBuilder extends ILayoutNodeBuilder {\n    title(text: string): this;\n    description(text: string): this;\n    rules(rules: IRule[]): this;\n    build(): ISeparatorNode;\n}\n\nexport interface IAlertBuilder extends ILayoutNodeBuilder {\n    message(text: string): this;\n    alertType(type: \"info\" | \"success\" | \"warning\" | \"danger\"): this;\n    rules(rules: IRule[]): this;\n    build(): IAlertNode;\n}\n\nexport interface ITabBuilder {\n    label(text: string): this;\n    description(text: string): this;\n    icon(icon: Icon): this;\n    layout(factory: (l: ILayoutBuilder) => ILayoutNodeBuilder[]): this;\n    rules(rules: IRule[]): this;\n}\n\nexport interface ITabsBuilder extends ILayoutNodeBuilder {\n    renderer(name: string, settings?: Record<string, unknown>): this;\n    tab(id: string, configure: (tab: ITabBuilder) => void): this;\n    before(target: string): this;\n    after(target: string): this;\n    rules(rules: IRule[]): this;\n    build(): ITabsNode;\n}\n\nexport interface IElementBuilder extends ILayoutNodeBuilder {\n    build(): IElementNode;\n}\n\nexport interface IObjectBuilder extends ILayoutNodeBuilder {\n    build(): IObjectNode;\n}\n\n// ---------------------------------------------------------------------------\n// Layout VM types\n// ---------------------------------------------------------------------------\n\nexport type LayoutNodeVM =\n    | IRowNodeVM\n    | ISeparatorNodeVM\n    | IAlertNodeVM\n    | ITabsNodeVM\n    | IElementNodeVM;\n\nexport interface IRowNodeVM {\n    type: \"row\";\n    fields: IFieldVM[];\n}\n\nexport interface ISeparatorNodeVM {\n    type: \"separator\";\n    title?: string;\n    description?: string;\n}\n\nexport interface IAlertNodeVM {\n    type: \"alert\";\n    message?: string;\n    alertType: \"info\" | \"success\" | \"warning\" | \"danger\";\n}\n\nexport interface ITabDefinitionVM {\n    id: string;\n    label: string;\n    description?: string;\n    icon?: Icon;\n    hasErrors: boolean;\n    disabled: boolean;\n    layout: LayoutNodeVM[];\n}\n\nexport interface ITabsNodeVM {\n    type: \"tabs\";\n    id?: string;\n    renderer?: string;\n    rendererSettings?: Record<string, unknown>;\n    tabs: ITabDefinitionVM[];\n    disabled: boolean;\n    activeTabId: string;\n    setActiveTab: (id: string) => void;\n}\n\nexport interface IElementNodeVM {\n    type: \"element\";\n    renderer: string;\n    props?: Record<string, unknown>;\n}\n\n// ---------------------------------------------------------------------------\n// Layout modifier types\n// ---------------------------------------------------------------------------\n\nexport type LayoutPosition =\n    | { type: \"before\"; target: string }\n    | { type: \"after\"; target: string }\n    | { type: \"replace\"; target: string };\n\nexport interface IPositionedLayoutNode {\n    node: LayoutNode;\n    position?: LayoutPosition;\n}\n\n/**\n * Chainable handle returned by modifier layout.row().\n * Can be used as-is (appended) or positioned via .before()/.after()/.replace().\n */\nexport interface ILayoutNodeHandle extends IPositionedLayoutNode {\n    before(target: string): IPositionedLayoutNode;\n    after(target: string): IPositionedLayoutNode;\n    replace(target: string): IPositionedLayoutNode;\n}\n\n// ---------------------------------------------------------------------------\n// Named layout node access types\n// ---------------------------------------------------------------------------\n\nexport interface LayoutNodeHandleMap {\n    tabs: ITabsBuilder;\n    element: IElementNode;\n    object: IObjectNode;\n}\n\nexport interface ILayoutNodeAccessHandle {\n    as<T extends keyof LayoutNodeHandleMap>(type: T): LayoutNodeHandleMap[T];\n}\n\n/** @deprecated Use ITabsBuilder instead */\nexport type ITabsHandle = ITabsBuilder;\n\n/** @deprecated Use ITabBuilder instead */\nexport type ITabHandle = ITabBuilder;\n\n// ---------------------------------------------------------------------------\n// Modifier types\n// ---------------------------------------------------------------------------\n\nexport interface IFormModifier {\n    modify(form: IFormModel): void;\n}\n\nexport interface ILayoutModifier {\n    row(...fieldIds: string[]): ILayoutNodeHandle;\n    separator(): ILayoutNodeHandle;\n    alert(): ILayoutNodeHandle;\n    tabs(config: {\n        id?: string;\n        renderer?: string;\n        tabs: ITabDefinitionInput[];\n        rules?: IRule[];\n    }): ILayoutNodeHandle;\n    element(renderer: string, props?: Record<string, unknown>): ILayoutNodeHandle;\n    object(\n        fieldName: string,\n        layout: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]\n    ): ILayoutNodeHandle;\n    object(\n        fieldName: string,\n        templateLayouts: Record<string, (layout: ILayoutBuilder) => ILayoutNodeBuilder[]>\n    ): ILayoutNodeHandle;\n    remove(target: string): void;\n}\n\n// ---------------------------------------------------------------------------\n// Form types\n// ---------------------------------------------------------------------------\n\nexport interface IFormError {\n    path: string;\n    label?: string;\n    breadcrumb?: string[];\n    message: string;\n}\n\nexport interface IFormVM {\n    layout: LayoutNodeVM[];\n    errors: IFormError[];\n    hasErrors: boolean;\n    isDirty: boolean;\n    isValid: boolean | null;\n    submitCount: number;\n    focusField(path: string): void;\n    getData(): Record<string, unknown>;\n    setData(data: Record<string, unknown>, options?: { dirty?: boolean }): void;\n}\n\n/**\n * Imperative form-level rule. Receives the live form and may return a flat\n * list of errors (sync or async). Errors are merged into `form.errors` and\n * surfaced on per-field validation when their `path` matches a known field.\n */\nexport type FormRuleFn = (\n    form: IFormModel\n) => IFormError[] | undefined | void | Promise<IFormError[] | undefined | void>;\n\n/**\n * A form-level rule. Either a Zod schema (validated against `form.getData()`)\n * or an imperative function returning an error list.\n */\nexport type FormRule = z.ZodTypeAny | FormRuleFn;\n\nexport interface IFormModel<T = Record<string, any>> {\n    field(name: string): IField;\n    fields(\n        factory: (registry: IFieldBuilderRegistry) => Record<string, IFieldBuilder | undefined>\n    ): void;\n    layout(factory: (layout: ILayoutModifier) => (LayoutNode | IPositionedLayoutNode)[]): void;\n    layout(nodeId: string): ILayoutNodeAccessHandle;\n    /**\n     * Replace the entire layout. Re-registers per-field inner layouts and\n     * propagates ancestor rules. Use `layout()` (modifier form) for additive\n     * changes.\n     */\n    setLayout(factory: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]): void;\n    /**\n     * Append a form-level validation rule. Runs after per-field validation.\n     * Accepts a Zod schema (validated against `getData()`) or an imperative\n     * function returning a list of errors.\n     */\n    addRule(rule: FormRule): void;\n    getData(): T;\n    setData(data: T, options?: { dirty?: boolean }): void;\n    reset(): void;\n    validate(): Promise<boolean>;\n    /**\n     * Assign errors from outside the form, e.g. a rejected save. Errors whose `path`\n     * resolves to a visible field become that field's validation error; the rest are\n     * form-level. The form is marked as submitted so `FormErrors` renders them. They are\n     * cleared by the next `validate()`, `setData()` or `reset()`.\n     */\n    setErrors(errors: IFormError[]): void;\n    submit<T = Record<string, unknown>>(options?: { skipValidation?: boolean }): Promise<T | false>;\n    evaluateRules(rules: IRule[] | undefined): { visible: boolean; disabled: boolean };\n    focusField(name: string): void;\n    readonly isDirty: boolean;\n    readonly isValid: boolean | null;\n    readonly submitted: boolean;\n    readonly submitCount: number;\n    readonly errors: IFormError[];\n    readonly vm: IFormVM;\n    getFieldBuilders(predicate?: (builder: IFieldBuilder) => boolean): IFieldBuilder[];\n    traverse(callback: (builder: IFieldBuilder) => void): void;\n    resolveChildLayout(layout: LayoutNode[], children: Map<string, IField>): LayoutNodeVM[];\n    readonly registry: IFieldBuilderRegistry;\n}\n\n// ---------------------------------------------------------------------------\n// FormModel namespace — groups all public types under one import\n// ---------------------------------------------------------------------------\n\nexport namespace FormModel {\n    export type FieldConfig = IFieldConfig;\n    export type ValueOption = IValueOption;\n    export type FieldValidation = IFieldValidation;\n    export type FieldVM = IFieldVM;\n    export type Field = IField;\n    export type ObjectField = IObjectField;\n    export type ObjectFieldConfig = IObjectFieldConfig;\n    export type BeforeChange = BeforeChangeCallback;\n    export type AfterChange = AfterChangeCallback;\n    export type AfterSetValue = AfterSetValueCallback;\n    export type OnBlur = OnBlurCallback;\n    export type CloneValue = CloneValueCallback;\n    export type LayoutNodeBuilder = ILayoutNodeBuilder;\n    export type RowBuilder = IRowBuilder;\n    export type SeparatorBuilder = ISeparatorBuilder;\n    export type AlertBuilder = IAlertBuilder;\n    export type AlertNode = IAlertNode;\n    export type AlertNodeVM = IAlertNodeVM;\n    export type TabBuilder = ITabBuilder;\n    export type TabsBuilder = ITabsBuilder;\n    export type ElementBuilder = IElementBuilder;\n    export type ObjectBuilder = IObjectBuilder;\n    export type RowNode = IRowNode;\n    /** @deprecated Use RowBuilder instead */\n    export type RowNodeHandle = IRowNodeHandle;\n    export type RowNodeVM = IRowNodeVM;\n    export type SeparatorNode = ISeparatorNode;\n    export type SeparatorNodeVM = ISeparatorNodeVM;\n    export type TabsNode = ITabsNode;\n    export type TabDefinition = ITabDefinition;\n    export type TabDefinitionInput = ITabDefinitionInput;\n    export type TabsNodeVM = ITabsNodeVM;\n    export type TabDefinitionVM = ITabDefinitionVM;\n    export type TabIcon = Icon;\n    export type ElementNode = IElementNode;\n    export type ElementNodeVM = IElementNodeVM;\n    export type ObjectNode = IObjectNode;\n    export type ObjectFieldVM = IObjectFieldVM;\n    export type ObjectFieldItemVM = IObjectFieldItemVM;\n    export type TemplateBuilder = ITemplateBuilder;\n    export type TemplateConfig = ITemplateConfig;\n    export type TemplateIcon = ITemplateIcon;\n    export type TemplateVM = ITemplateVM;\n    export type ObjectFieldTemplatesAPI = IObjectFieldTemplates;\n    export type FormError = IFormError;\n    export type FormVM = IFormVM;\n    export type Interface<T = Record<string, any>> = IFormModel<T>;\n    export type Modifier = IFormModifier;\n    export type LayoutModifier = ILayoutModifier;\n    export type Rule = IRule;\n    export type Action = RuleAction;\n    export type RuleEvaluator = IRuleEvaluator;\n    export type FormRuleFunction = FormRuleFn;\n    export type FormRuleType = FormRule;\n    export type CallbackParams = IFieldCallbackParams;\n    export type RequiredWhen = (params: IFieldCallbackParams) => boolean;\n    export type HiddenWhen = HiddenWhenCallback;\n    export type DisabledWhen = DisabledWhenCallback;\n    export type Computed = ComputedFieldCallback;\n}\n\n// ---------------------------------------------------------------------------\n// FormModelFactory abstraction\n// ---------------------------------------------------------------------------\n\nexport interface IFormModelFactory {\n    create<T = Record<string, any>>(config: IFormModelConfig): IFormModel<T>;\n}\n\nexport interface IFormModelConfig {\n    fields: (registry: IFieldBuilderRegistry) => Record<string, IFieldBuilder>;\n    layout?: (layout: ILayoutBuilder) => ILayoutNodeBuilder[];\n    validateOnSubmit?: boolean;\n    ruleEvaluators?: IRuleEvaluator[];\n}\n\nexport interface ILayoutBuilder {\n    row(...fieldIds: string[]): IRowBuilder;\n    separator(): ISeparatorBuilder;\n    alert(): IAlertBuilder;\n    tabs(id?: string): ITabsBuilder;\n    element(renderer: string, props?: Record<string, unknown>): IElementBuilder;\n    /**\n     * Reference an object field and register its inner layout.\n     *\n     * Non-templated: pass a single layout factory; the layout applies to the\n     * single object or to every list item. Templated: pass a map of factories\n     * keyed by template id; each entry applies when that template is active\n     * (or for each list item with that template). Templates without an entry\n     * fall back to default one-row-per-visible-child.\n     */\n    object(\n        fieldName: string,\n        layout: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]\n    ): IObjectBuilder;\n    object(\n        fieldName: string,\n        templateLayouts: Record<string, (layout: ILayoutBuilder) => ILayoutNodeBuilder[]>\n    ): IObjectBuilder;\n}\n\nexport interface IFieldBuilder<\n    TType extends string = string,\n    TOptions extends boolean = false,\n    TValue = unknown\n> {\n    readonly __valueType?: TValue;\n    label(text: string): this;\n    help(text: string): this;\n    description(text: string): this;\n    note(text: string): this;\n    placeholder(text: string): this;\n    autoFocus(value?: boolean): this;\n    schema(zodSchema: z.ZodTypeAny): this;\n    defaultValue(value: unknown): this;\n    renderer<TName extends FieldRendererName<TType, TOptions>>(\n        name: TName,\n        ...args: undefined extends FieldRendererSettings<TName>\n            ? [settings?: FieldRendererSettings<TName>]\n            : FieldRendererSettings<TName> extends undefined\n              ? []\n              : [settings: FieldRendererSettings<TName>]\n    ): this;\n    hidden(): this;\n    hiddenWhen(fn: HiddenWhenCallback): this;\n    disabledWhen(fn: DisabledWhenCallback): this;\n    required(message?: string): this;\n    /**\n     * Conditional required check. Multiple `requiredWhen()` calls chain — the\n     * first one to return `true` for the current form state makes the field\n     * required. Built-in `.required()` (if set) is evaluated alongside.\n     */\n    requiredWhen(fn: (params: IFieldCallbackParams) => boolean, message?: string): this;\n    list(): this;\n    disabled(value?: boolean): this;\n    rules(rules: IRule[]): this;\n    beforeChange(fn: BeforeChangeCallback): this;\n    afterChange(fn: AfterChangeCallback): this;\n    afterSetValue(fn: AfterSetValueCallback): this;\n    onBlur(fn: OnBlurCallback): this;\n    cloneValue(fn: CloneValueCallback): this;\n    getName(): string;\n    getType(): string;\n    getTags(): string[];\n    tags(tags: string[]): this;\n    /**\n     * Mark this field as a derived value computed from `fn(form)`. The field\n     * stays editable; user edits are accepted but the computed value continues\n     * to flow whenever a dependency changes. To make the user \"win\", use\n     * `computedUntilDirty()` instead.\n     */\n    computed(fn: ComputedFieldCallback): this;\n    /**\n     * Same as `computed`, but the field switches to manual mode the first time\n     * its value is changed via the UI. After that, `fn(form)` no longer\n     * overrides user input.\n     */\n    computedUntilDirty(fn: ComputedFieldCallback): this;\n    build(name: string): IFieldConfig;\n}\n\nexport interface IOptionsFieldBuilder<TType extends string, TValue = unknown> extends IFieldBuilder<\n    TType,\n    false,\n    TValue\n> {\n    options(\n        opts:\n            | IValueOption<OptionValueType<TType>>[]\n            | ((params: IFieldCallbackParams) => IValueOption<OptionValueType<TType>>[])\n    ): IFieldBuilder<TType, true, TValue>;\n}\n\nexport interface IObjectFieldBuilder extends IFieldBuilder<\n    \"object\",\n    false,\n    Record<string, unknown> | null\n> {\n    fields(fn: (registry: IFieldBuilderRegistry) => Record<string, IFieldBuilder>): this;\n    list(): this;\n    listSchema(schema: z.ZodTypeAny): this;\n    template(id: string, configure: (t: ITemplateBuilder) => void): this;\n    /**\n     * Lay out the object's children: rows of child field names, plus separators, alerts\n     * and tabs. Applies to the single object and to every list item. Templated objects\n     * declare their layouts per template instead.\n     */\n    layout(factory: (layout: ILayoutBuilder) => ILayoutNodeBuilder[]): this;\n}\n\nexport interface IFieldBuilderRegistry {}\n\n// ---------------------------------------------------------------------------\n// Field type plugin system\n// ---------------------------------------------------------------------------\n\nexport interface IFieldTypeFactory {\n    readonly type: string;\n    create(registry: IFieldBuilderRegistry): IFieldBuilder;\n}\n\nexport const FieldType = createAbstraction<IFieldTypeFactory>(\"FormModel/FieldType\");\n\nexport namespace FieldType {\n    export type Interface = IFieldTypeFactory;\n    export type FieldBuilder = IFieldBuilder;\n    export type FieldBuilderRegistry = IFieldBuilderRegistry;\n}\n\nexport const FieldBuilderRegistry = createAbstraction<IFieldBuilderRegistry>(\n    \"FormModel/FieldBuilderRegistry\"\n);\n\nexport namespace FieldBuilderRegistry {\n    export type Interface = IFieldBuilderRegistry;\n}\n\nexport const FormModelFactory = createAbstraction<IFormModelFactory>(\"FormModelFactory\");\n\nexport namespace FormModelFactory {\n    export type Interface = IFormModelFactory;\n    export type Config = IFormModelConfig;\n    export type LayoutBuilder = ILayoutBuilder;\n    export type FieldBuilder = IFieldBuilder;\n    export type OptionsFieldBuilder<TType extends string> = IOptionsFieldBuilder<TType>;\n    export type ObjectFieldBuilder = IObjectFieldBuilder;\n    export type FieldBuilderRegistry = IFieldBuilderRegistry;\n}\n\nexport const RuleEvaluator = createAbstraction<IRuleEvaluator>(\"FormModelRuleEvaluator\");\n\nexport namespace RuleEvaluator {\n    export type Interface = IRuleEvaluator;\n    export type Rule = IRule;\n    export type Action = RuleAction;\n}\n"],"names":["FieldType","createAbstraction","FieldBuilderRegistry","FormModelFactory","RuleEvaluator"],"mappings":";AAg/BO,MAAMA,YAAYC,kBAAqC;AAQvD,MAAMC,uBAAuBD,kBAChC;AAOG,MAAME,mBAAmBF,kBAAqC;AAY9D,MAAMG,gBAAgBH,kBAAkC"}

package/features/formModel/createFieldRenderer.d.ts

@@ -0,0 +1,62 @@
+import React from "react";
+import type { IFieldVM, IObjectFieldVM, FieldRendererSettings } from "./abstractions.js";
+/**
+ * Decoratable wrapper rendered around every leaf field's content. Features can decorate it to
+ * inject per-field UI (e.g. a comment marker) keyed on `field.qualifiedName`, without forking
+ * the form. By default it renders the field content unchanged.
+ */
+export declare const FormFieldWrapper: (({ children }: {
+    field: IFieldVM;
+    children?: React.ReactNode;
+}) => React.JSX.Element) & {
+    original: ({ children }: {
+        field: IFieldVM;
+        children?: React.ReactNode;
+    }) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ children }: {
+        field: IFieldVM;
+        children?: React.ReactNode;
+    }) => React.JSX.Element) & {
+        original: ({ children }: {
+            field: IFieldVM;
+            children?: React.ReactNode;
+        }) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ children }: {
+        field: IFieldVM;
+        children?: React.ReactNode;
+    }) => React.JSX.Element) & {
+        original: ({ children }: {
+            field: IFieldVM;
+            children?: React.ReactNode;
+        }) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+type RendererField<TName extends string> = IFieldVM & {
+    rendererSettings: FieldRendererSettings<TName>;
+};
+type ObjectRendererField<TName extends string> = IObjectFieldVM & {
+    rendererSettings: FieldRendererSettings<TName>;
+};
+type FieldRendererFn<TName extends string> = (props: {
+    field: RendererField<TName>;
+}) => React.ReactNode;
+export declare function createFieldRenderer<TName extends string = string>(render: FieldRendererFn<TName>): React.ComponentType<{
+    field: IFieldVM;
+}>;
+export declare function createObjectFieldRenderer<TName extends string = string>(render: (props: {
+    field: ObjectRendererField<TName>;
+}) => React.ReactNode): React.ComponentType<{
+    field: IFieldVM;
+}>;
+export {};

package/features/formModel/createFieldRenderer.js

@@ -0,0 +1,61 @@
+import react, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react-lite";
+import { makeDecoratable } from "@webiny/react-composition";
+const FormFieldWrapper = makeDecoratable("FormFieldWrapper", ({ children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, children));
+const FOCUS_HIGHLIGHT_MS = 1800;
+const FOCUS_HIGHLIGHT_SHADOW = "0 0 0 6px var(--color-primary-100), 0 0 0 8px var(--color-primary)";
+const ScrollOnFocus = observer(({ field, children })=>{
+    const ref = useRef(null);
+    const [highlighted, setHighlighted] = useState(false);
+    const highlightTimer = useRef(null);
+    useEffect(()=>{
+        if (field.focusRequested && ref.current) {
+            setTimeout(()=>{
+                ref.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
+            }, 150);
+            setHighlighted(true);
+            if (highlightTimer.current) window.clearTimeout(highlightTimer.current);
+            highlightTimer.current = window.setTimeout(()=>setHighlighted(false), FOCUS_HIGHLIGHT_MS);
+        }
+        field.clearFocusRequest();
+    }, [
+        field.focusRequested
+    ]);
+    useEffect(()=>()=>{
+            if (highlightTimer.current) window.clearTimeout(highlightTimer.current);
+        }, []);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: ref,
+        "data-field-path": field.qualifiedName,
+        style: {
+            borderRadius: 2,
+            transition: "box-shadow .35s ease, background-color .35s ease",
+            boxShadow: highlighted ? FOCUS_HIGHLIGHT_SHADOW : void 0,
+            backgroundColor: highlighted ? "var(--color-primary-100)" : void 0
+        }
+    }, /*#__PURE__*/ react.createElement(FormFieldWrapper, {
+        field: field
+    }, children));
+});
+function createFieldRenderer(render) {
+    const Inner = observer(render);
+    const Wrapper = observer(({ field })=>/*#__PURE__*/ react.createElement(ScrollOnFocus, {
+            field: field
+        }, /*#__PURE__*/ react.createElement(Inner, {
+            field: field
+        })));
+    return Wrapper;
+}
+function createObjectFieldRenderer(render) {
+    const Wrapped = (props)=>{
+        if ("object" !== props.field.type) return null;
+        return render(props);
+    };
+    return observer(Wrapped);
+}
+export { FormFieldWrapper, createFieldRenderer, createObjectFieldRenderer };
+
+//# sourceMappingURL=createFieldRenderer.js.map

package/features/formModel/createFieldRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"features/formModel/createFieldRenderer.js","sources":["../../../src/features/formModel/createFieldRenderer.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { observer } from \"mobx-react-lite\";\nimport { makeDecoratable } from \"@webiny/react-composition\";\nimport type { IFieldVM, IObjectFieldVM, FieldRendererSettings } from \"./abstractions.js\";\n\n/**\n * Decoratable wrapper rendered around every leaf field's content. Features can decorate it to\n * inject per-field UI (e.g. a comment marker) keyed on `field.qualifiedName`, without forking\n * the form. By default it renders the field content unchanged.\n */\nexport const FormFieldWrapper = makeDecoratable(\n    \"FormFieldWrapper\",\n    ({ children }: { field: IFieldVM; children?: React.ReactNode }) => {\n        return <>{children}</>;\n    }\n);\n\ntype RendererField<TName extends string> = IFieldVM & {\n    rendererSettings: FieldRendererSettings<TName>;\n};\n\ntype ObjectRendererField<TName extends string> = IObjectFieldVM & {\n    rendererSettings: FieldRendererSettings<TName>;\n};\n\ntype FieldRendererFn<TName extends string> = (props: {\n    field: RendererField<TName>;\n}) => React.ReactNode;\n\n// How long the field stays visually highlighted after focus lands, so the user's eye is drawn\n// to where \"jump to field\" (a comment locator, a form error) scrolled to.\nconst FOCUS_HIGHLIGHT_MS = 1800;\n\n// A 6px tint around the field, then a 2px ring outside it.\nconst FOCUS_HIGHLIGHT_SHADOW = \"0 0 0 6px var(--color-primary-100), 0 0 0 8px var(--color-primary)\";\n\nconst ScrollOnFocus = observer(\n    ({ field, children }: { field: IFieldVM; children: React.ReactNode }) => {\n        const ref = useRef<HTMLDivElement>(null);\n        const [highlighted, setHighlighted] = useState(false);\n        const highlightTimer = useRef<number | null>(null);\n\n        useEffect(() => {\n            if (field.focusRequested && ref.current) {\n                setTimeout(() => {\n                    ref.current?.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n                }, 150);\n                // Flash a highlight ring so it's obvious where focus landed. The timer is kept in a\n                // ref (not tied to the effect cleanup) so clearing the focus request below — which\n                // re-runs this effect — doesn't cut the highlight short.\n                setHighlighted(true);\n                if (highlightTimer.current) {\n                    window.clearTimeout(highlightTimer.current);\n                }\n                highlightTimer.current = window.setTimeout(\n                    () => setHighlighted(false),\n                    FOCUS_HIGHLIGHT_MS\n                );\n            }\n            field.clearFocusRequest();\n        }, [field.focusRequested]);\n\n        useEffect(() => {\n            return () => {\n                if (highlightTimer.current) {\n                    window.clearTimeout(highlightTimer.current);\n                }\n            };\n        }, []);\n\n        return (\n            <div\n                ref={ref}\n                data-field-path={field.qualifiedName}\n                style={{\n                    /*\n                     * The highlight is drawn with shadows, which paint around the field without\n                     * taking up room. Padding with a matching negative margin looked the same, but\n                     * the padded box still stuck out of the field, so a scroll area around a form\n                     * always had 6px to scroll.\n                     */\n                    borderRadius: 2,\n                    transition: \"box-shadow .35s ease, background-color .35s ease\",\n                    boxShadow: highlighted ? FOCUS_HIGHLIGHT_SHADOW : undefined,\n                    backgroundColor: highlighted ? \"var(--color-primary-100)\" : undefined\n                }}\n            >\n                <FormFieldWrapper field={field}>{children}</FormFieldWrapper>\n            </div>\n        );\n    }\n);\n\nexport function createFieldRenderer<TName extends string = string>(\n    render: FieldRendererFn<TName>\n): React.ComponentType<{ field: IFieldVM }> {\n    const Inner = observer(render as FieldRendererFn<string>) as unknown as React.ComponentType<{\n        field: IFieldVM;\n    }>;\n\n    const Wrapper = observer(({ field }: { field: IFieldVM }) => (\n        <ScrollOnFocus field={field}>\n            <Inner field={field} />\n        </ScrollOnFocus>\n    ));\n\n    return Wrapper as unknown as React.ComponentType<{ field: IFieldVM }>;\n}\n\nexport function createObjectFieldRenderer<TName extends string = string>(\n    render: (props: { field: ObjectRendererField<TName> }) => React.ReactNode\n): React.ComponentType<{ field: IFieldVM }> {\n    const Wrapped = (props: { field: IFieldVM }) => {\n        if (props.field.type !== \"object\") {\n            return null;\n        }\n        return (render as (p: { field: IFieldVM }) => React.ReactNode)(props);\n    };\n    return observer(Wrapped) as unknown as React.ComponentType<{ field: IFieldVM }>;\n}\n"],"names":["FormFieldWrapper","makeDecoratable","children","FOCUS_HIGHLIGHT_MS","FOCUS_HIGHLIGHT_SHADOW","ScrollOnFocus","observer","field","ref","useRef","highlighted","setHighlighted","useState","highlightTimer","useEffect","setTimeout","window","undefined","createFieldRenderer","render","Inner","Wrapper","createObjectFieldRenderer","Wrapped","props"],"mappings":";;;AAUO,MAAMA,mBAAmBC,gBAC5B,oBACA,CAAC,EAAEC,QAAQ,EAAmD,GACnD,WAAP,GAAO,0CAAGA;AAkBlB,MAAMC,qBAAqB;AAG3B,MAAMC,yBAAyB;AAE/B,MAAMC,gBAAgBC,SAClB,CAAC,EAAEC,KAAK,EAAEL,QAAQ,EAAkD;IAChE,MAAMM,MAAMC,OAAuB;IACnC,MAAM,CAACC,aAAaC,eAAe,GAAGC,SAAS;IAC/C,MAAMC,iBAAiBJ,OAAsB;IAE7CK,UAAU;QACN,IAAIP,MAAM,cAAc,IAAIC,IAAI,OAAO,EAAE;YACrCO,WAAW;gBACPP,IAAI,OAAO,EAAE,eAAe;oBAAE,UAAU;oBAAU,OAAO;gBAAS;YACtE,GAAG;YAIHG,eAAe;YACf,IAAIE,eAAe,OAAO,EACtBG,OAAO,YAAY,CAACH,eAAe,OAAO;YAE9CA,eAAe,OAAO,GAAGG,OAAO,UAAU,CACtC,IAAML,eAAe,QACrBR;QAER;QACAI,MAAM,iBAAiB;IAC3B,GAAG;QAACA,MAAM,cAAc;KAAC;IAEzBO,UAAU,IACC;YACH,IAAID,eAAe,OAAO,EACtBG,OAAO,YAAY,CAACH,eAAe,OAAO;QAElD,GACD,EAAE;IAEL,OAAO,WAAP,GACI,oBAAC;QACG,KAAKL;QACL,mBAAiBD,MAAM,aAAa;QACpC,OAAO;YAOH,cAAc;YACd,YAAY;YACZ,WAAWG,cAAcN,yBAAyBa;YAClD,iBAAiBP,cAAc,6BAA6BO;QAChE;qBAEA,oBAACjB,kBAAgBA;QAAC,OAAOO;OAAQL;AAG7C;AAGG,SAASgB,oBACZC,MAA8B;IAE9B,MAAMC,QAAQd,SAASa;IAIvB,MAAME,UAAUf,SAAS,CAAC,EAAEC,KAAK,EAAuB,iBACpD,oBAACF,eAAaA;YAAC,OAAOE;yBAClB,oBAACa,OAAAA;YAAM,OAAOb;;IAItB,OAAOc;AACX;AAEO,SAASC,0BACZH,MAAyE;IAEzE,MAAMI,UAAU,CAACC;QACb,IAAIA,AAAqB,aAArBA,MAAM,KAAK,CAAC,IAAI,EAChB,OAAO;QAEX,OAAQL,OAAuDK;IACnE;IACA,OAAOlB,SAASiB;AACpB"}

package/features/formModel/demo/FieldRenderersDemoPresenter.d.ts

@@ -0,0 +1,18 @@
+import type { IFormModelFactory, IFormVM, IFormError } from "../abstractions.js";
+export interface FieldRenderersDemoVM {
+    form: IFormVM;
+    data: Record<string, unknown>;
+    lastSubmitted: Record<string, unknown> | null;
+    isSubmitting: boolean;
+    formErrors: IFormError[];
+}
+export declare class FieldRenderersDemoPresenter {
+    private form;
+    private lastSubmitted;
+    private isSubmitting;
+    constructor(formFactory: IFormModelFactory);
+    get vm(): FieldRenderersDemoVM;
+    focusField(path: string): void;
+    submit(): Promise<void>;
+    reset(): void;
+}

package/features/formModel/demo/FieldRenderersDemoPresenter.js

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