@resistdesign/voltra 3.0.0-alpha.23 → 3.0.0-alpha.25

package/app/forms/UI.d.ts

@@ -0,0 +1,73 @@
+/**
+ * @packageDocumentation
+ *
+ * Shared AutoForm UI components driven by renderer suites.
+ */
+import { FC } from "react";
+import type { ReactElement } from "react";
+import type { TypeInfo, TypeOperation } from "../../common/TypeParsing/TypeInfo";
+import type { AutoFieldProps, CustomTypeActionPayload, FormController, FormValues, RelationActionPayload } from "./types";
+import type { ResolvedSuite } from "./core/types";
+/**
+ * Renderer contract used by shared AutoForm components.
+ */
+export interface AutoFormRenderer {
+    /** Suite-backed field component for each field controller. */
+    AutoField: FC<AutoFieldProps>;
+    /** Resolved suite that provides primitives for container controls. */
+    suite: ResolvedSuite<ReactElement>;
+}
+/**
+ * Props for the shared AutoFormView component.
+ */
+export interface AutoFormViewProps {
+    /** Prepared controller that supplies field state. */
+    controller: FormController;
+    /** Submit handler invoked with validated form values. */
+    onSubmit: (values: FormValues) => void;
+    /** Renderer containing AutoField and suite primitives. */
+    renderer: AutoFormRenderer;
+    /** Disable the submit button when true. */
+    submitDisabled?: boolean;
+    /** Optional relation action handler for reference fields. */
+    onRelationAction?: (payload: RelationActionPayload) => void;
+    /** Optional custom type action handler. */
+    onCustomTypeAction?: (payload: CustomTypeActionPayload) => void;
+}
+/**
+ * Render a form UI from a prepared form controller.
+ *
+ * @param props - View props including controller and callbacks.
+ * @returns Rendered form view.
+ */
+export declare const AutoFormView: FC<AutoFormViewProps>;
+/**
+ * Props for the shared AutoForm component.
+ */
+export interface AutoFormProps {
+    /** Type metadata used to build the form. */
+    typeInfo: TypeInfo;
+    /** Submit handler invoked with validated form values. */
+    onSubmit: (values: FormValues) => void;
+    /** Renderer containing AutoField and suite primitives. */
+    renderer: AutoFormRenderer;
+    /** Optional initial values applied before defaults. */
+    initialValues?: FormValues;
+    /** Optional change handler invoked when values update. */
+    onValuesChange?: (values: FormValues) => void;
+    /** Optional relation action handler for reference fields. */
+    onRelationAction?: (payload: RelationActionPayload) => void;
+    /** Optional custom type action handler. */
+    onCustomTypeAction?: (payload: CustomTypeActionPayload) => void;
+    /** Optional operation override for field state. */
+    operation?: TypeOperation;
+    /** Disable the submit button when true. */
+    submitDisabled?: boolean;
+}
+/**
+ * Build a controller from type metadata and render an auto form.
+ *
+ * @param props - Auto form props including type info and callbacks.
+ * @returns Rendered form bound to a new controller.
+ */
+export declare const AutoForm: FC<AutoFormProps>;

package/app/forms/core/types.d.ts

@@ -110,6 +110,11 @@ export type PrimitiveComponent<Props, RenderOutput = unknown> = (props: Props) =
  * Primitive components that suites may override.
  */
 export type PrimitiveComponents<RenderOutput = unknown> = {
+    /** Root container for the form view. */
+    FormRoot: PrimitiveComponent<{
+        children: RenderOutput;
+        onSubmit?: () => void;
+    }, RenderOutput>;
     /** Wrapper for grouped field content. */
     FieldWrapper: PrimitiveComponent<{
         children: RenderOutput;

package/app/forms/index.d.ts

@@ -7,3 +7,4 @@ export * from "./types";
 export type { ComponentSuite, FieldKind, FieldRenderContext, FieldRenderer, FieldValue, PrimitiveComponent, PrimitiveComponents, ResolvedSuite, } from "./core";
 export { createAutoField, createFormRenderer, getFieldKind, mergeSuites, resolveSuite, withRendererOverride, } from "./core";
 export * from "./Engine";
+export * from "./UI";

package/app/index.js

@@ -1,5 +1,5 @@
 import { createContext, useContext, useRef, useMemo, useCallback, useState, useEffect } from 'react';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/app/utils/ApplicationState.tsx
 var getApplicationStateIdentifier = (subStateIdMap) => subStateIdMap ? subStateIdMap : {};
@@ -1651,5 +1651,86 @@ var useFormEngine = (initialValues = {}, typeInfo, options) => {
     setErrors
   };
 };
+var fallbackFormRoot = ({
+  children,
+  onSubmit
+}) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children });
+};
+var fallbackButton = ({
+  children,
+  disabled,
+  type,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx("button", { type: type ?? "button", disabled, onClick, children });
+};
+var AutoFormView = ({
+  controller,
+  onSubmit,
+  renderer,
+  submitDisabled,
+  onRelationAction,
+  onCustomTypeAction
+}) => {
+  const FormRoot = renderer.suite.primitives?.FormRoot ?? fallbackFormRoot;
+  const Button = renderer.suite.primitives?.Button ?? fallbackButton;
+  const AutoField = renderer.AutoField;
+  const submit = () => {
+    if (controller.validate()) {
+      onSubmit(controller.values);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormRoot, { onSubmit: submit, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    controller.fields.filter((fieldController) => !fieldController.hidden).map((fieldController) => /* @__PURE__ */ jsx(
+      AutoField,
+      {
+        field: fieldController.field,
+        fieldKey: fieldController.key,
+        value: fieldController.value,
+        onChange: fieldController.onChange,
+        error: fieldController.error,
+        onRelationAction,
+        disabled: fieldController.disabled,
+        onCustomTypeAction
+      },
+      fieldController.key
+    )),
+    /* @__PURE__ */ jsx(Button, { type: "submit", onClick: submit, disabled: submitDisabled, children: /* @__PURE__ */ jsx(Fragment, { children: "Submit" }) })
+  ] }) });
+};
+var AutoForm = ({
+  typeInfo,
+  onSubmit,
+  renderer,
+  initialValues,
+  onValuesChange,
+  onRelationAction,
+  onCustomTypeAction,
+  operation,
+  submitDisabled
+}) => {
+  const controller = useFormEngine(initialValues, typeInfo, { operation });
+  useEffect(() => {
+    if (onValuesChange) {
+      onValuesChange(controller.values);
+    }
+  }, [controller.values, onValuesChange]);
+  return /* @__PURE__ */ jsx(
+    AutoFormView,
+    {
+      controller,
+      onSubmit,
+      renderer,
+      onRelationAction,
+      onCustomTypeAction,
+      submitDisabled
+    }
+  );
+};
 
-export { ApplicationStateContext, ApplicationStateProvider, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, TypeInfoORMClient, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, computeTrackPixels, createAutoField, createBrowserRouteAdapter, createEasyLayout, createFormRenderer, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, getApplicationStateIdentifier, getApplicationStateModified, getApplicationStateValue, getApplicationStateValueStructure, getChangedDependencyIndexes, getEasyLayoutTemplateDetails, getFieldKind, getFullUrl, getPascalCaseAreaName, handleRequest, mergeSuites, parseHistoryPath, parseTemplate, requestHandlerFactory, resolveSuite, sendServiceRequest, setApplicationStateModified, setApplicationStateValue, useApplicationStateLoader, useApplicationStateValue, useApplicationStateValueStructure, useController, useDebugDependencies, useFormEngine, useRouteContext, useTypeInfoORMAPI, validateAreas, withRendererOverride };
+export { ApplicationStateContext, ApplicationStateProvider, AutoForm, AutoFormView, Route, RouteContext, RouteContextConsumer, RouteContextProvider, RouteProvider, TypeInfoORMClient, buildHistoryPath, buildQueryString, buildRoutePath, canUseBrowserHistory, computeAreaBounds, computeTrackPixels, createAutoField, createBrowserRouteAdapter, createEasyLayout, createFormRenderer, createManualRouteAdapter, createMemoryHistory, createNativeRouteAdapter, createRouteAdapterFromHistory, createUniversalAdapter, getApplicationStateIdentifier, getApplicationStateModified, getApplicationStateValue, getApplicationStateValueStructure, getChangedDependencyIndexes, getEasyLayoutTemplateDetails, getFieldKind, getFullUrl, getPascalCaseAreaName, handleRequest, mergeSuites, parseHistoryPath, parseTemplate, requestHandlerFactory, resolveSuite, sendServiceRequest, setApplicationStateModified, setApplicationStateValue, useApplicationStateLoader, useApplicationStateValue, useApplicationStateValueStructure, useController, useDebugDependencies, useFormEngine, useRouteContext, useTypeInfoORMAPI, validateAreas, withRendererOverride };

package/native/forms/UI.d.ts

@@ -0,0 +1,67 @@
+/**
+ * @packageDocumentation
+ *
+ * Native AutoForm wrappers backed by the default native renderer.
+ */
+import type { FC } from "react";
+import type { AutoFieldProps, CustomTypeActionPayload, FormController, FormValues, RelationActionPayload } from "../../app/forms/types";
+import type { TypeInfo, TypeOperation } from "../../common/TypeParsing/TypeInfo";
+/**
+ * Render a form field based on TypeInfo metadata.
+ *
+ * @category Forms
+ *
+ * @param props - AutoField props describing the field and handlers.
+ * @returns Rendered field UI.
+ */
+export declare const AutoField: FC<AutoFieldProps>;
+/**
+ * Props for the AutoFormView component.
+ */
+export interface AutoFormViewProps {
+    /** Prepared controller that supplies field state. */
+    controller: FormController;
+    /** Submit handler invoked with validated form values. */
+    onSubmit: (values: FormValues) => void;
+    /** Disable the submit button when true. */
+    submitDisabled?: boolean;
+    /** Optional relation action handler for reference fields. */
+    onRelationAction?: (payload: RelationActionPayload) => void;
+    /** Optional custom type action handler. */
+    onCustomTypeAction?: (payload: CustomTypeActionPayload) => void;
+}
+/**
+ * Render a native form UI from a prepared form controller.
+ *
+ * @param props - View props including controller and callbacks.
+ * @returns Rendered form view.
+ */
+export declare const AutoFormView: FC<AutoFormViewProps>;
+/**
+ * Props for the AutoForm component.
+ */
+export interface AutoFormProps {
+    /** Type metadata used to build the form. */
+    typeInfo: TypeInfo;
+    /** Submit handler invoked with validated form values. */
+    onSubmit: (values: FormValues) => void;
+    /** Optional initial values applied before defaults. */
+    initialValues?: FormValues;
+    /** Optional change handler invoked when values update. */
+    onValuesChange?: (values: FormValues) => void;
+    /** Optional relation action handler for reference fields. */
+    onRelationAction?: (payload: RelationActionPayload) => void;
+    /** Optional custom type action handler. */
+    onCustomTypeAction?: (payload: CustomTypeActionPayload) => void;
+    /** Optional operation override for field state. */
+    operation?: TypeOperation;
+    /** Disable the submit button when true. */
+    submitDisabled?: boolean;
+}
+/**
+ * Build a controller from type metadata and render a native auto form.
+ *
+ * @param props - Auto form props including type info and callbacks.
+ * @returns Rendered native form.
+ */
+export declare const AutoForm: FC<AutoFormProps>;

package/native/forms/index.d.ts

@@ -4,5 +4,6 @@
  * Native form rendering exports.
  */
 export * from "./suite";
+export * from "./UI";
 export * from "./primitives";
 export * from "./createNativeFormRenderer";

package/native/forms/primitives/index.d.ts

@@ -3,38 +3,31 @@
  *
  * React Native primitives for the form generation system.
  */
+import { Text, View } from "react-native";
 /**
  * Wrapper for grouped field content.
  */
 export declare const FieldWrapper: (props: {
     children?: React.ReactNode;
-}) => import("react").CElement<{}, import("react").Component<{}, any, any>>;
+}) => import("react").CElement<import("react-native").ViewProps, View>;
 /**
  * Inline error message renderer.
  */
 export declare const ErrorMessage: ({ children }: {
     children: React.ReactNode;
-}) => import("react").CElement<{
-    style: {
-        color: string;
-    };
-}, import("react").Component<{
-    style: {
-        color: string;
-    };
-}, any, any>>;
+}) => import("react").CElement<import("react-native").TextProps, Text>;
 /**
  * Container for array field items.
  */
 export declare const ArrayContainer: (props: {
     children?: React.ReactNode;
-}) => import("react").CElement<{}, import("react").Component<{}, any, any>>;
+}) => import("react").CElement<import("react-native").ViewProps, View>;
 /**
  * Wrapper for an individual array item row.
  */
 export declare const ArrayItemWrapper: (props: {
     children?: React.ReactNode;
-}) => import("react").CElement<{}, import("react").Component<{}, any, any>>;
+}) => import("react").CElement<import("react-native").ViewProps, View>;
 /**
  * Minimal button primitive.
  */
@@ -42,7 +35,4 @@ export declare const Button: ({ children, disabled, onPress, }: {
     children?: React.ReactNode;
     disabled?: boolean;
     onPress?: () => void;
-}) => import("react").FunctionComponentElement<{
-    onPress: (() => void) | undefined;
-    disabled: boolean | undefined;
-}>;
+}) => import("react").FunctionComponentElement<import("react-native").PressableProps & import("react").RefAttributes<View>>;

package/native/index.js

@@ -1,12 +1,8 @@
-import { createContext, createElement, useMemo } from 'react';
-import 'react/jsx-runtime';
+import { createContext, createElement, useMemo, useEffect, useState, useCallback } from 'react';
+import { View, Text, Pressable, TextInput, Switch, Platform } from 'react-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
-  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
-}) : x)(function(x) {
-  if (typeof require !== "undefined") return require.apply(this, arguments);
-  throw Error('Dynamic require of "' + x + '" is not supported');
-});
+// src/native/forms/suite.ts
 
 // src/app/forms/core/getFieldKind.ts
 var hasSelectableValues = (field) => {
@@ -106,27 +102,22 @@ var createFormRenderer = (options) => {
     options.suite,
     options.fallbackSuite
   );
-  const AutoField = createAutoField(resolvedSuite);
+  const AutoField2 = createAutoField(resolvedSuite);
   return {
-    AutoField,
+    AutoField: AutoField2,
     suite: resolvedSuite
   };
 };
-var getNative = () => __require("react-native");
 var FieldWrapper = (props) => {
-  const { View } = getNative();
   return createElement(View, null, props.children);
 };
 var ErrorMessage = ({ children }) => {
-  const { Text } = getNative();
   return createElement(Text, { style: { color: "#AA0000" } }, children);
 };
 var ArrayContainer = (props) => {
-  const { View } = getNative();
   return createElement(View, null, props.children);
 };
 var ArrayItemWrapper = (props) => {
-  const { View } = getNative();
   return createElement(View, null, props.children);
 };
 var Button = ({
@@ -134,7 +125,6 @@ var Button = ({
   disabled,
   onPress
 }) => {
-  const { Pressable, Text } = getNative();
   return createElement(
     Pressable,
     { onPress, disabled },
@@ -143,7 +133,6 @@ var Button = ({
 };
 
 // src/native/forms/suite.ts
-var getNative2 = () => __require("react-native");
 var createArrayItemField = (field) => ({
   ...field,
   array: false,
@@ -164,7 +153,6 @@ var formatCustomValue = (val) => {
   return JSON.stringify(val, null, 2);
 };
 var renderRelationSingle = (context) => {
-  const { Text } = getNative2();
   const { field, fieldKey, label, required, disabled, error, onRelationAction } = context;
   return createElement(
     FieldWrapper,
@@ -189,7 +177,6 @@ var renderRelationSingle = (context) => {
   );
 };
 var renderRelationArray = (context) => {
-  const { Text } = getNative2();
   const { field, fieldKey, label, required, disabled, error, onRelationAction } = context;
   return createElement(
     FieldWrapper,
@@ -214,7 +201,6 @@ var renderRelationArray = (context) => {
   );
 };
 var renderCustomSingle = (context) => {
-  const { Text } = getNative2();
   const { field, fieldKey, label, required, disabled, error } = context;
   const customType = field.tags?.customType;
   const onCustomTypeAction = context.onCustomTypeAction;
@@ -242,7 +228,6 @@ var renderCustomSingle = (context) => {
   );
 };
 var renderCustomArray = (context) => {
-  const { Text, View } = getNative2();
   const { field, fieldKey, label, required, disabled, error } = context;
   const customType = field.tags?.customType;
   const onCustomTypeAction = context.onCustomTypeAction;
@@ -318,7 +303,6 @@ var renderCustomArray = (context) => {
 };
 var autoFieldRenderer;
 var renderArray = (context) => {
-  const { Text, View } = getNative2();
   const { field, fieldKey, label, required, disabled, error } = context;
   const itemField = createArrayItemField(field);
   const arrayValue = Array.isArray(context.value) ? [...context.value] : [];
@@ -381,7 +365,6 @@ var renderArray = (context) => {
   );
 };
 var renderString = (context) => {
-  const { Text, TextInput } = getNative2();
   const { label, required, disabled, error } = context;
   return createElement(
     FieldWrapper,
@@ -397,7 +380,6 @@ var renderString = (context) => {
   );
 };
 var renderNumber = (context) => {
-  const { Text, TextInput } = getNative2();
   const { label, required, disabled, error } = context;
   return createElement(
     FieldWrapper,
@@ -414,7 +396,6 @@ var renderNumber = (context) => {
   );
 };
 var renderBoolean = (context) => {
-  const { Text, View, Switch } = getNative2();
   const { label, disabled, error } = context;
   return createElement(
     FieldWrapper,
@@ -433,7 +414,6 @@ var renderBoolean = (context) => {
   );
 };
 var renderEnumSelect = (context) => {
-  const { Text, View } = getNative2();
   const { field, label, required, disabled, error } = context;
   const selectableValues = getSelectableValues(context.possibleValues) ?? [];
   return createElement(
@@ -460,6 +440,31 @@ var renderEnumSelect = (context) => {
     error ? createElement(ErrorMessage, null, error) : null
   );
 };
+var FormRoot = ({
+  children,
+  onSubmit
+}) => {
+  if (Platform?.OS === "web") {
+    return createElement(
+      "form",
+      {
+        onSubmit: (event) => {
+          event?.preventDefault?.();
+          onSubmit?.();
+        }
+      },
+      children
+    );
+  }
+  return createElement(View, null, children);
+};
+var SuiteButton = ({
+  children,
+  disabled,
+  onClick
+}) => {
+  return createElement(Button, { disabled, onPress: onClick }, children);
+};
 var nativeSuite = {
   renderers: {
     string: renderString,
@@ -471,11 +476,221 @@ var nativeSuite = {
     relation_array: renderRelationArray,
     custom_single: renderCustomSingle,
     custom_array: renderCustomArray
+  },
+  primitives: {
+    FormRoot,
+    FieldWrapper,
+    ErrorMessage,
+    Label: ({ children }) => createElement(Text, null, children),
+    Button: SuiteButton
   }
 };
 var resolvedNativeSuite = resolveSuite(void 0, nativeSuite);
 autoFieldRenderer = createAutoField(resolvedNativeSuite);
 var nativeAutoField = autoFieldRenderer;
+var getDeniedOperation = (deniedOperations, operation) => {
+  if (!deniedOperations) {
+    return false;
+  }
+  const denied = deniedOperations[operation];
+  if (typeof denied === "boolean") {
+    return denied;
+  }
+  return deniedOperations[operation.toLowerCase()] ?? false;
+};
+var buildInitialValues = (initialValues, typeInfo) => {
+  const values = { ...initialValues };
+  for (const [key, field] of Object.entries(typeInfo.fields ?? {})) {
+    if (values[key] !== void 0) {
+      continue;
+    }
+    const defaultValue = field.tags?.constraints?.defaultValue;
+    if (defaultValue !== void 0) {
+      let parsedDefaultValue = defaultValue;
+      try {
+        parsedDefaultValue = JSON.parse(defaultValue);
+      } catch (error) {
+      }
+      values[key] = parsedDefaultValue;
+      continue;
+    }
+    if (field.array && !field.typeReference && !field.optional) {
+      values[key] = [];
+      continue;
+    }
+    if (field.type === "boolean" && !field.optional) {
+      values[key] = false;
+    }
+  }
+  return values;
+};
+var useFormEngine = (initialValues = {}, typeInfo, options) => {
+  const operation = options?.operation ?? "CREATE" /* CREATE */;
+  const [values, setValues] = useState(
+    buildInitialValues(initialValues, typeInfo)
+  );
+  const [errors, setErrors] = useState({});
+  const setFieldValue = useCallback((path, value) => {
+    setValues((prev) => {
+      return {
+        ...prev,
+        [path]: value
+      };
+    });
+  }, []);
+  const validate = useCallback(() => {
+    const newErrors = {};
+    for (const [key, field] of Object.entries(typeInfo.fields ?? {})) {
+      if (field.tags?.hidden) {
+        continue;
+      }
+      const val = values[key];
+      if (field.readonly && (val === void 0 || val === null || val === "")) {
+        continue;
+      }
+      const isMissing = val === void 0 || val === null || val === "" || field.array && (!Array.isArray(val) || val.length === 0);
+      if (!field.optional && isMissing) {
+        newErrors[key] = "This field is required";
+        continue;
+      }
+      if (isMissing) {
+        continue;
+      }
+      const constraints = field.tags?.constraints;
+      if (constraints?.pattern && typeof val === "string") {
+        const pattern = new RegExp(constraints.pattern);
+        if (!pattern.test(val)) {
+          newErrors[key] = "Value does not match required pattern";
+          continue;
+        }
+      }
+      if (field.type === "number" && typeof val === "number") {
+        if (constraints?.min !== void 0 && val < constraints.min) {
+          newErrors[key] = `Value must be at least ${constraints.min}`;
+          continue;
+        }
+        if (constraints?.max !== void 0 && val > constraints.max) {
+          newErrors[key] = `Value must be at most ${constraints.max}`;
+          continue;
+        }
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  }, [typeInfo, values]);
+  const fields = useMemo(() => {
+    return Object.entries(typeInfo.fields ?? {}).map(([key, field]) => {
+      const { tags } = field;
+      const isPrimary = tags?.primaryField || typeInfo.primaryField === key;
+      return {
+        key,
+        field,
+        label: tags?.label ?? key,
+        required: !field.optional,
+        disabled: field.readonly || getDeniedOperation(typeInfo.tags?.deniedOperations, operation) || getDeniedOperation(tags?.deniedOperations, operation) || operation === "UPDATE" /* UPDATE */ && isPrimary,
+        hidden: !!tags?.hidden,
+        primary: isPrimary,
+        format: tags?.format,
+        constraints: tags?.constraints,
+        value: values[key],
+        onChange: (value) => setFieldValue(key, value),
+        error: errors[key]
+      };
+    });
+  }, [typeInfo, values, errors, setFieldValue, operation]);
+  return {
+    typeInfo,
+    typeTags: typeInfo.tags,
+    operation,
+    values,
+    errors,
+    fields,
+    setFieldValue,
+    validate,
+    setErrors
+  };
+};
+var fallbackFormRoot = ({
+  children,
+  onSubmit
+}) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children });
+};
+var fallbackButton = ({
+  children,
+  disabled,
+  type,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx("button", { type: type ?? "button", disabled, onClick, children });
+};
+var AutoFormView = ({
+  controller,
+  onSubmit,
+  renderer,
+  submitDisabled,
+  onRelationAction,
+  onCustomTypeAction
+}) => {
+  const FormRoot2 = renderer.suite.primitives?.FormRoot ?? fallbackFormRoot;
+  const Button2 = renderer.suite.primitives?.Button ?? fallbackButton;
+  const AutoField2 = renderer.AutoField;
+  const submit = () => {
+    if (controller.validate()) {
+      onSubmit(controller.values);
+    }
+  };
+  return /* @__PURE__ */ jsx(FormRoot2, { onSubmit: submit, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    controller.fields.filter((fieldController) => !fieldController.hidden).map((fieldController) => /* @__PURE__ */ jsx(
+      AutoField2,
+      {
+        field: fieldController.field,
+        fieldKey: fieldController.key,
+        value: fieldController.value,
+        onChange: fieldController.onChange,
+        error: fieldController.error,
+        onRelationAction,
+        disabled: fieldController.disabled,
+        onCustomTypeAction
+      },
+      fieldController.key
+    )),
+    /* @__PURE__ */ jsx(Button2, { type: "submit", onClick: submit, disabled: submitDisabled, children: /* @__PURE__ */ jsx(Fragment, { children: "Submit" }) })
+  ] }) });
+};
+var AutoForm = ({
+  typeInfo,
+  onSubmit,
+  renderer,
+  initialValues,
+  onValuesChange,
+  onRelationAction,
+  onCustomTypeAction,
+  operation,
+  submitDisabled
+}) => {
+  const controller = useFormEngine(initialValues, typeInfo, { operation });
+  useEffect(() => {
+    if (onValuesChange) {
+      onValuesChange(controller.values);
+    }
+  }, [controller.values, onValuesChange]);
+  return /* @__PURE__ */ jsx(
+    AutoFormView,
+    {
+      controller,
+      onSubmit,
+      renderer,
+      onRelationAction,
+      onCustomTypeAction,
+      submitDisabled
+    }
+  );
+};
 
 // src/native/forms/createNativeFormRenderer.ts
 var createNativeFormRenderer = (options) => {
@@ -484,6 +699,25 @@ var createNativeFormRenderer = (options) => {
     suite: options?.suite
   });
 };
+var defaultNativeRenderer = createNativeFormRenderer();
+var AutoField = (props) => {
+  return nativeAutoField({
+    field: props.field,
+    fieldKey: props.fieldKey,
+    value: props.value,
+    onChange: props.onChange,
+    error: props.error,
+    disabled: props.disabled,
+    onRelationAction: props.onRelationAction,
+    onCustomTypeAction: props.onCustomTypeAction
+  });
+};
+var AutoFormView2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoFormView, { ...props, renderer: defaultNativeRenderer });
+};
+var AutoForm2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoForm, { ...props, renderer: defaultNativeRenderer });
+};
 
 // src/app/utils/History.ts
 var ensurePrefix = (value, prefix) => value ? value.startsWith(prefix) ? value : `${prefix}${value}` : "";
@@ -1121,4 +1355,4 @@ var buildPathFromRouteChain = (routeChain, config, query) => {
   return buildRoutePath(segments, query);
 };
 
-export { ArrayContainer, ArrayItemWrapper, Button, ErrorMessage, FieldWrapper, NativeEasyLayoutView, buildHistoryPath, buildPathFromRouteChain, createMemoryHistory, createNativeBackHandler, createNativeFormRenderer, createNativeHistory, createNavigationStateRouteAdapter, makeNativeEasyLayout, mapNativeURLToPath, nativeAutoField, nativeSuite, parseHistoryPath, useNativeEasyLayout };
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, Button, ErrorMessage, FieldWrapper, NativeEasyLayoutView, buildHistoryPath, buildPathFromRouteChain, createMemoryHistory, createNativeBackHandler, createNativeFormRenderer, createNativeHistory, createNavigationStateRouteAdapter, makeNativeEasyLayout, mapNativeURLToPath, nativeAutoField, nativeSuite, parseHistoryPath, useNativeEasyLayout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@resistdesign/voltra",
-  "version": "3.0.0-alpha.23",
+  "version": "3.0.0-alpha.25",
   "description": "With our powers combined!",
   "homepage": "https://voltra.app",
   "repository": "git@github.com:resistdesign/voltra.git",

package/web/forms/UI.d.ts

@@ -1,11 +1,12 @@
 /**
  * @packageDocumentation
  *
- * Tier 2 UI components: AutoForm, AutoField.
+ * Web AutoForm wrappers backed by the default web renderer.
  */
-import { FC } from "react";
+import type { FC } from "react";
+import type { AutoFieldProps, CustomTypeActionPayload, FormValues, RelationActionPayload } from "../../app/forms/types";
 import type { TypeInfo, TypeOperation } from "../../common/TypeParsing/TypeInfo";
-import type { AutoFieldProps, CustomTypeActionPayload, FormController, FormValues, RelationActionPayload } from "../../app/forms/types";
+import type { FormController } from "../../app/forms/types";
 /**
  * Render a form field based on TypeInfo metadata.
  *
@@ -31,7 +32,7 @@ export interface AutoFormViewProps {
     onCustomTypeAction?: (payload: CustomTypeActionPayload) => void;
 }
 /**
- * Render a form UI from a prepared form controller.
+ * Render a web form UI from a prepared form controller.
  *
  * @param props - View props including controller and callbacks.
  * @returns Rendered form view.
@@ -59,9 +60,9 @@ export interface AutoFormProps {
     submitDisabled?: boolean;
 }
 /**
- * Build a controller from type metadata and render an auto form.
+ * Build a controller from type metadata and render a web auto form.
  *
  * @param props - Auto form props including type info and callbacks.
- * @returns Rendered form bound to a new controller.
+ * @returns Rendered web form.
  */
 export declare const AutoForm: FC<AutoFormProps>;

package/web/index.js

@@ -1,7 +1,7 @@
+import { createElement, useEffect, useState, useCallback, useMemo } from 'react';
 import * as styledBase from 'styled-components';
 import styledBase__default from 'styled-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useEffect, useState, useCallback, useMemo } from 'react';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -524,6 +524,34 @@ var renderEnumSelect = (context) => {
     error && /* @__PURE__ */ jsx(ErrorMessage, { children: error })
   ] });
 };
+var FormRoot = ({
+  children,
+  onSubmit
+}) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children });
+};
+var SuiteButton = ({
+  children,
+  disabled,
+  type,
+  onClick,
+  "data-signifier": dataSignifier
+}) => {
+  return createElement(
+    "button",
+    {
+      type: type ?? "button",
+      disabled,
+      onClick: type === "submit" ? void 0 : onClick,
+      "data-signifier": dataSignifier
+    },
+    children
+  );
+};
 var webSuite = {
   renderers: {
     string: renderString,
@@ -535,6 +563,13 @@ var webSuite = {
     relation_array: renderRelationArray,
     custom_single: renderCustomSingle,
     custom_array: renderCustomArray
+  },
+  primitives: {
+    FormRoot,
+    FieldWrapper,
+    ErrorMessage,
+    Label: ({ children, htmlFor }) => createElement("label", { htmlFor }, children),
+    Button: SuiteButton
   }
 };
 var resolvedWebSuite = resolveSuite(void 0, webSuite);
@@ -685,34 +720,43 @@ var useFormEngine = (initialValues = {}, typeInfo, options) => {
     setErrors
   };
 };
-var AutoField = (props) => {
-  return webAutoField({
-    field: props.field,
-    fieldKey: props.fieldKey,
-    value: props.value,
-    onChange: props.onChange,
-    error: props.error,
-    disabled: props.disabled,
-    onRelationAction: props.onRelationAction,
-    onCustomTypeAction: props.onCustomTypeAction
-  });
+var fallbackFormRoot = ({
+  children,
+  onSubmit
+}) => {
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, children });
+};
+var fallbackButton = ({
+  children,
+  disabled,
+  type,
+  onClick
+}) => {
+  return /* @__PURE__ */ jsx("button", { type: type ?? "button", disabled, onClick, children });
 };
 var AutoFormView = ({
   controller,
   onSubmit,
+  renderer,
   submitDisabled,
   onRelationAction,
   onCustomTypeAction
 }) => {
-  const handleSubmit = (e) => {
-    e.preventDefault();
+  const FormRoot2 = renderer.suite.primitives?.FormRoot ?? fallbackFormRoot;
+  const Button = renderer.suite.primitives?.Button ?? fallbackButton;
+  const AutoField2 = renderer.AutoField;
+  const submit = () => {
     if (controller.validate()) {
       onSubmit(controller.values);
     }
   };
-  return /* @__PURE__ */ jsxs(FormContainer, { onSubmit: handleSubmit, children: [
+  return /* @__PURE__ */ jsx(FormRoot2, { onSubmit: submit, children: /* @__PURE__ */ jsxs(Fragment, { children: [
     controller.fields.filter((fieldController) => !fieldController.hidden).map((fieldController) => /* @__PURE__ */ jsx(
-      AutoField,
+      AutoField2,
       {
         field: fieldController.field,
         fieldKey: fieldController.key,
@@ -725,12 +769,13 @@ var AutoFormView = ({
       },
       fieldController.key
     )),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: submitDisabled, children: "Submit" })
-  ] });
+    /* @__PURE__ */ jsx(Button, { type: "submit", onClick: submit, disabled: submitDisabled, children: /* @__PURE__ */ jsx(Fragment, { children: "Submit" }) })
+  ] }) });
 };
 var AutoForm = ({
   typeInfo,
   onSubmit,
+  renderer,
   initialValues,
   onValuesChange,
   onRelationAction,
@@ -749,19 +794,13 @@ var AutoForm = ({
     {
       controller,
       onSubmit,
+      renderer,
       onRelationAction,
       onCustomTypeAction,
       submitDisabled
     }
   );
 };
-var FormContainer = styled_default("form")`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 1em;
-`;
 
 // src/web/forms/createWebFormRenderer.ts
 var createWebFormRenderer = (options) => {
@@ -770,6 +809,25 @@ var createWebFormRenderer = (options) => {
     suite: options?.suite
   });
 };
+var defaultWebRenderer = createWebFormRenderer();
+var AutoField = (props) => {
+  return webAutoField({
+    field: props.field,
+    fieldKey: props.fieldKey,
+    value: props.value,
+    onChange: props.onChange,
+    error: props.error,
+    disabled: props.disabled,
+    onRelationAction: props.onRelationAction,
+    onCustomTypeAction: props.onCustomTypeAction
+  });
+};
+var AutoFormView2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoFormView, { ...props, renderer: defaultWebRenderer });
+};
+var AutoForm2 = (props) => {
+  return /* @__PURE__ */ jsx(AutoForm, { ...props, renderer: defaultWebRenderer });
+};
 
 // src/app/utils/easy-layout/parseTemplate.ts
 var parseTrackSpec = (token) => {
@@ -1018,4 +1076,4 @@ var getEasyLayout = (extendFrom, areasExtendFrom, options = {}) => {
   return createEasyLayout(styledFactory, extendFrom, areasExtendFrom, options);
 };
 
-export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm, AutoFormView, ErrorMessage, FieldWrapper, createWebFormRenderer, getEasyLayout, webAutoField, webSuite };
+export { ArrayContainer, ArrayItemWrapper, AutoField, AutoForm2 as AutoForm, AutoFormView2 as AutoFormView, ErrorMessage, FieldWrapper, createWebFormRenderer, getEasyLayout, webAutoField, webSuite };