@dxos/react-ui-form 0.7.5-labs.a279d8c → 0.7.5-main.2567c87

package/dist/lib/browser/index.mjs

@@ -80,11 +80,11 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React11, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo5, useState as useState2 } from "react";
+import React7, { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo3, useState as useState2 } from "react";
 import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
-import { log as log2 } from "@dxos/log";
-import { useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
+import { log as log3 } from "@dxos/log";
+import { useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { getFormatSchema, getSchemaProperties as getSchemaProperties2, sortProperties } from "@dxos/schema";
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
 import React3 from "react";
@@ -111,10 +111,10 @@ var InputHeader = ({ children, error }) => {
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+var GeoPointInput = ({ property, type, label, disabled, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
   const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue3() ?? [];
+  const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue2(property) ?? [];
   return /* @__PURE__ */ React3.createElement(Input2.Root, {
     validationValence: status
   }, /* @__PURE__ */ React3.createElement(InputHeader, {
@@ -126,7 +126,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     disabled,
     placeholder: t("placeholder longitude"),
     value: lng,
-    onChange: (event) => onValueChange(type, [
+    onChange: (event) => onValueChange(property, type, [
       lat,
       safeParseFloat(event.target.value, 0)
     ]),
@@ -136,7 +136,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     disabled,
     placeholder: t("placeholder latitude"),
     value: lat,
-    onChange: (event) => onValueChange(type, [
+    onChange: (event) => onValueChange(property, type, [
       safeParseFloat(event.target.value, 0),
       lng
     ]),
@@ -155,9 +155,9 @@ var gridCols = [
   "grid-cols-3",
   "grid-cols-4"
 ];
-var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  const values = getValue3() ?? {};
+var TupleInput = ({ binding, property, type, label, disabled, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  const values = getValue2(property) ?? {};
   return /* @__PURE__ */ React4.createElement(Input3.Root, {
     validationValence: status
   }, /* @__PURE__ */ React4.createElement(InputHeader, {
@@ -169,7 +169,7 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
     type: "number",
     disabled,
     value: values[prop],
-    onChange: (event) => onValueChange(type, {
+    onChange: (event) => onValueChange(property, type, {
       ...values,
       [prop]: safeParseFloat2(event.target.value, 0)
     }),
@@ -180,8 +180,8 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 // packages/ui/react-ui-form/src/components/Form/Defaults.tsx
 import React5 from "react";
 import { Input as Input4, Select } from "@dxos/react-ui";
-var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
+var TextInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
   }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
@@ -189,13 +189,13 @@ var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, get
   }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.TextInput, {
     disabled,
     placeholder,
-    value: getValue3() ?? "",
-    onChange: (event) => onValueChange(type, event.target.value),
+    value: getValue2(property) ?? "",
+    onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
   }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.Validation, null, error));
 };
-var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
+var NumberInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
   }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
@@ -204,31 +204,31 @@ var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, g
     type: "number",
     disabled,
     placeholder,
-    value: getValue3() ?? 0,
-    onChange: (event) => onValueChange(type, event.target.value),
+    value: getValue2(property) ?? 0,
+    onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
   }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
+var BooleanInput = ({ property, type, label, inputOnly, getStatus, getValue: getValue2, onValueChange }) => {
+  const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
   }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.Switch, {
-    checked: getValue3(),
-    onCheckedChange: (value) => onValueChange(type, value)
+    checked: getValue2(property),
+    onCheckedChange: (value) => onValueChange(property, type, value)
   }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
 };
-var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
+var SelectInput = ({ property, type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue2, onValueChange }) => {
+  const { status, error } = getStatus?.(property);
   return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
   }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Select.Root, {
-    value: getValue3(),
-    onValueChange: (value) => onValueChange(type, value)
+    value: getValue2(property),
+    onValueChange: (value) => onValueChange(property, type, value)
   }, /* @__PURE__ */ React5.createElement(Select.TriggerButton, {
     classNames: "is-full",
     disabled,
@@ -243,38 +243,42 @@ var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, get
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React10, { useMemo as useMemo4 } from "react";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-form/src/components/Form/FormActions.tsx
-import React7 from "react";
+import { pipe } from "effect";
+import { capitalize } from "effect/String";
+import React6, { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { AST, S } from "@dxos/echo-schema";
+import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
+import { log as log2 } from "@dxos/log";
 import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/react-ui-theme";
+import { getSchemaProperties } from "@dxos/schema";
+import { isNotFalsy } from "@dxos/util";
 
-// packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-import React6, { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-import { getValue as getValue2 } from "@dxos/echo-schema";
-import { createJsonPath as createJsonPath2 } from "@dxos/effect";
+// packages/ui/react-ui-form/src/components/Form/factory.tsx
+import { FormatEnum } from "@dxos/echo-schema";
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case FormatEnum.LatLng:
+      return GeoPointInput;
+  }
+  switch (type) {
+    case "string":
+      return TextInput;
+    case "number":
+      return NumberInput;
+    case "boolean":
+      return BooleanInput;
+  }
+};
 
 // packages/ui/react-ui-form/src/hooks/useForm.ts
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { getValue, setValue } from "@dxos/echo-schema";
-import { AST, createJsonPath, fromEffectValidationPath } from "@dxos/effect";
 import { invariant } from "@dxos/invariant";
 import { log } from "@dxos/log";
 import { validateSchema } from "@dxos/schema";
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
-  invariant(AST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 91,
-    S: void 0,
-    A: [
-      "AST.isTypeLiteral(schema.ast)",
-      ""
-    ]
-  });
   const [values, setValues] = useState(initialValues);
   useEffect(() => {
     setValues(initialValues);
@@ -311,8 +315,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
-  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors
-  !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
+  const canSave = useMemo(() => !saving && Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
+    values,
     touched,
     errors,
     saving
@@ -334,21 +338,17 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     onSave,
     changed
   ]);
-  const getStatus = useCallback((path) => {
-    const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
-    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
-    return {
-      status: matchingError ? "error" : void 0,
-      error: matchingError ? matchingError[1] : void 0
-    };
-  }, [
+  const getStatus = useCallback((property) => ({
+    status: errors[property] ? "error" : void 0,
+    error: errors[property] ? errors[property] : void 0
+  }), [
+    touched,
     errors
   ]);
-  const getFormValue = (path) => {
-    return getValue(values, createJsonPath(path));
+  const getFormValue = (property) => {
+    return getValue(values, property);
   };
-  const onValueChange = (path, type, value) => {
-    const jsonPath = createJsonPath(path);
+  const onValueChange = (property, type, value) => {
     let parsedValue = value;
     try {
       if (type === "number") {
@@ -357,19 +357,19 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 194,
+        L: 178,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
     const newValues = {
-      ...setValue(values, jsonPath, parsedValue)
+      ...setValue(values, property, parsedValue)
     };
     setValues(newValues);
     setChanged((prev) => ({
       ...prev,
-      [jsonPath]: true
+      [property]: true
     }));
     onValuesChanged?.(newValues);
     const isValid = validate(newValues);
@@ -379,12 +379,15 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
       });
     }
   };
-  const onTouched = useCallback((path) => {
-    const jsonPath = createJsonPath(path);
+  const onBlur = useCallback((event) => {
+    const { name } = event.target;
     setTouched((touched2) => ({
       ...touched2,
-      [jsonPath]: true
+      [name]: true
     }));
+    if (event.relatedTarget?.getAttribute("type") === "submit") {
+      setTouched(createKeySet(values, true));
+    }
     validate(values);
   }, [
     validate,
@@ -402,13 +405,13 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     getStatus,
     getValue: getFormValue,
     onValueChange,
-    onTouched
+    onBlur
   };
 };
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 236,
+    L: 229,
     S: void 0,
     A: [
       "obj",
@@ -422,359 +425,338 @@ var createKeySet = (obj, value) => {
 };
 var flatMap = (errors) => {
   return errors.reduce((result, { path, message }) => {
-    const jsonPath = fromEffectValidationPath(path);
-    if (!(jsonPath in result)) {
-      result[jsonPath] = message;
+    if (!(path in result)) {
+      result[path] = message;
     }
     return result;
   }, {});
 };
 
-// packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-var FormContext = /* @__PURE__ */ createContext(void 0);
-var useFormContext = () => {
-  return useContext(FormContext) ?? raise(new Error("Missing FormContext"));
-};
-var useFormValues = (path = []) => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath2(path);
-  return getValue2(formValues, jsonPath);
-};
-var useInputProps = (path = []) => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type, value) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path)
-  };
-};
-var FormProvider = ({ children, ...formOptions }) => {
-  const formHandler = useForm(formOptions);
-  return /* @__PURE__ */ React6.createElement(FormContext.Provider, {
-    value: formHandler
-  }, children);
-};
-
-// packages/ui/react-ui-form/src/components/Form/FormActions.tsx
-var FormActions = ({ onCancel, readonly }) => {
-  const { t } = useTranslation2(translationKey);
-  const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: "flex justify-center"
-  }, /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
-    className: mx2(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ React7.createElement(IconButton, {
-    "data-testid": "cancel-button",
-    icon: "ph--x--regular",
-    label: t("button cancel"),
-    onClick: onCancel
-  }), handleSave && /* @__PURE__ */ React7.createElement(IconButton, {
-    type: "submit",
-    "data-testid": "save-button",
-    disabled: !canSave,
-    icon: "ph--check--regular",
-    label: t("button save"),
-    onClick: handleSave
-  })));
-};
-
-// packages/ui/react-ui-form/src/components/Form/FormContent.tsx
-import { pipe as pipe2 } from "effect";
-import { capitalize as capitalize2 } from "effect/String";
-import React9, { useMemo as useMemo3 } from "react";
-import { AST as AST3, S } from "@dxos/echo-schema";
-import { createJsonPath as createJsonPath3, findNode as findNode2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
-import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-form/src/components/Form/ArrayField.tsx
-import { pipe } from "effect";
-import { capitalize } from "effect/String";
-import React8, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
-import { AST as AST2 } from "@dxos/echo-schema";
-import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-import { getSchemaProperties } from "@dxos/schema";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/Form.tsx";
 var padding = "px-2";
-var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  const { t } = useTranslation3(translationKey);
-  const { ast, name, type, title } = property;
-  const values = useFormValues(path ?? []);
-  invariant2(Array.isArray(values), void 0, {
-    F: __dxlog_file2,
-    L: 37,
-    S: void 0,
-    A: [
-      "Array.isArray(values)",
-      ""
-    ]
-  });
-  const label = title ?? pipe(name, capitalize);
-  const tupleType = findNode(ast, AST2.isTupleType);
-  const elementType = tupleType?.rest[0]?.type;
-  const getDefaultObjectValue = (typeNode) => {
-    const baseNode = findNode(typeNode, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, AST2.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-    return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
-      prop.name,
-      prop.defaultValue
-    ]));
-  };
-  const newValue = useMemo2(() => {
-    if (type === "object" && elementType) {
-      return getDefaultObjectValue(elementType);
-    } else {
-      return SimpleType.getDefaultValue(type);
-    }
-  }, [
-    type,
-    elementType
+var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
+  const onValid = useMemo2(() => autoSave ? onSave : void 0, [
+    autoSave,
+    onSave
   ]);
-  const handleAdd = useCallback2(() => {
-    inputProps.onValueChange(type, [
-      ...values,
-      newValue
-    ]);
+  const { canSave, values, errors, handleSave, ...inputProps } = useForm({
+    schema,
+    initialValues,
+    onValuesChanged,
+    onValidate,
+    onValid,
+    onSave
+  });
+  const properties = useMemo2(() => {
+    const props = getSchemaProperties(schema.ast, values);
+    const filtered = filter ? filter(props) : props;
+    const findIndex = (props2, prop) => {
+      const idx = props2.findIndex((p) => p === prop);
+      return idx === -1 ? Infinity : idx;
+    };
+    return sort ? filtered.sort(({ name: a }, { name: b }) => findIndex(sort, a) - findIndex(sort, b)) : filtered;
   }, [
-    type,
-    elementType,
-    inputProps,
-    newValue,
+    schema,
+    filter,
     values
   ]);
-  const handleRemove = useCallback2((index) => {
-    const newValues = values.filter((_, i) => i !== index);
-    inputProps.onValueChange(type, newValues);
+  useEffect2(() => {
+    if (errors && Object.keys(errors).length) {
+      log2.warn("validation", {
+        errors
+      }, {
+        F: __dxlog_file2,
+        L: 106,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
   }, [
-    type,
-    inputProps,
-    values
+    errors
   ]);
-  if (!elementType) {
+  return /* @__PURE__ */ React6.createElement("div", {
+    role: "form",
+    className: mx2("flex flex-col w-full gap-2 py-2", classNames),
+    "data-testid": testId
+  }, properties.map((property) => {
+    const { ast, name, type, format, title, description, examples, options, array } = property;
+    const key = [
+      ...path,
+      name
+    ];
+    const label = title ?? pipe(name, capitalize);
+    const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+    const FoundComponent = lookupComponent?.({
+      prop: name,
+      schema: S.make(ast),
+      inputProps: {
+        property: name,
+        type,
+        format,
+        label,
+        disabled: readonly,
+        placeholder,
+        ...inputProps
+      }
+    });
+    if (FoundComponent) {
+      return /* @__PURE__ */ React6.createElement("div", {
+        key: name,
+        role: "none",
+        className: padding
+      }, FoundComponent);
+    }
+    let InputComponent = Custom?.[key.join(".")];
+    if (!InputComponent) {
+      if (options) {
+        return /* @__PURE__ */ React6.createElement("div", {
+          key: name,
+          role: "none",
+          className: padding
+        }, /* @__PURE__ */ React6.createElement(SelectInput, {
+          type,
+          format,
+          property: name,
+          disabled: readonly,
+          label,
+          options: options.map((option) => ({
+            value: option,
+            label: String(option)
+          })),
+          placeholder,
+          ...inputProps
+        }));
+      }
+      InputComponent = getInputComponent(type, format);
+      if (array) {
+        return /* @__PURE__ */ React6.createElement(ArrayField, {
+          key: name,
+          name,
+          type,
+          array: true,
+          label,
+          ast,
+          values,
+          format,
+          readonly,
+          placeholder,
+          inputProps,
+          Custom
+        });
+      }
+    }
+    if (!InputComponent) {
+      if (type === "object") {
+        const baseNode = findNode(ast, isDiscriminatedUnion);
+        const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(ast, AST.isTypeLiteral);
+        if (typeLiteral) {
+          const schema2 = S.make(typeLiteral);
+          return /* @__PURE__ */ React6.createElement("div", {
+            key: name,
+            role: "none"
+          }, /* @__PURE__ */ React6.createElement("div", {
+            className: padding
+          }, label), /* @__PURE__ */ React6.createElement(Form, {
+            schema: schema2,
+            path: key,
+            values: values[name] ?? {},
+            onValuesChanged: (childValues) => {
+              inputProps.onValueChange(name, "object", childValues);
+            },
+            Custom
+          }));
+        }
+      }
+      log2("no renderer for property", {
+        name,
+        type
+      }, {
+        F: __dxlog_file2,
+        L: 213,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return null;
+    }
+    return /* @__PURE__ */ React6.createElement("div", {
+      key: name,
+      role: "none",
+      className: padding
+    }, /* @__PURE__ */ React6.createElement(InputComponent, {
+      type,
+      format,
+      property: name,
+      disabled: readonly,
+      label,
+      placeholder,
+      ...inputProps
+    }));
+  }).filter(isNotFalsy), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React6.createElement(FormActions, {
+    onCancel,
+    onSubmit: handleSave,
+    canSubmit: canSave,
+    readonly
+  }));
+};
+var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholder, inputProps, Custom }) => {
+  const { t } = useTranslation2(translationKey);
+  const arrayValues = values[name] ?? [];
+  const key = [
+    name
+  ];
+  const tupleType = findNode(ast, AST.isTupleType);
+  const elementType = tupleType?.rest[0]?.type;
+  if (type === "object" && elementType) {
+    const baseNode = findNode(elementType, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(elementType, AST.isTypeLiteral);
+    if (typeLiteral) {
+      const schema = S.make(typeLiteral);
+      return /* @__PURE__ */ React6.createElement("div", {
+        key: name,
+        role: "none",
+        className: mx2(padding)
+      }, /* @__PURE__ */ React6.createElement(InputHeader, null, label), /* @__PURE__ */ React6.createElement("div", {
+        role: "none",
+        className: "flex flex-col gap-1"
+      }, arrayValues.map((value, index) => {
+        return /* @__PURE__ */ React6.createElement("div", {
+          key: index,
+          role: "none",
+          className: "flex items-center gap-1"
+        }, /* @__PURE__ */ React6.createElement("div", {
+          role: "none",
+          className: "flex-1"
+        }, /* @__PURE__ */ React6.createElement(Form, {
+          schema,
+          path: [
+            ...key,
+            `[${index}]`
+          ],
+          values: value,
+          onValuesChanged: (childValues) => {
+            const newValues = [
+              ...arrayValues
+            ];
+            newValues[index] = childValues;
+            inputProps.onValueChange(name, "object", newValues);
+          },
+          Custom
+        })), /* @__PURE__ */ React6.createElement(IconButton, {
+          icon: "ph--trash--regular",
+          iconOnly: true,
+          label: t("button remove"),
+          onClick: () => {
+            const newValues = arrayValues.filter((_, i) => i !== index);
+            inputProps.onValueChange(name, type, newValues);
+          }
+        }));
+      })), /* @__PURE__ */ React6.createElement("div", {
+        role: "none",
+        className: "flex justify-between items-center plb-1"
+      }, /* @__PURE__ */ React6.createElement(IconButton, {
+        icon: "ph--plus--regular",
+        iconOnly: true,
+        label: t("button add"),
+        onClick: () => {
+          const newValues = [
+            ...arrayValues,
+            {}
+          ];
+          inputProps.onValueChange(name, type, newValues);
+        }
+      })));
+    }
+    return /* @__PURE__ */ React6.createElement("div", {
+      key: name,
+      role: "none"
+    }, "Nested form not supported in arrays, yet.");
+  }
+  const InputComponent = getInputComponent(type, format);
+  if (!InputComponent) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx3(padding)
-  }, /* @__PURE__ */ React8.createElement(InputHeader, null, label), /* @__PURE__ */ React8.createElement("div", {
+    key: "meta-input",
+    className: mx2(padding)
+  }, /* @__PURE__ */ React6.createElement(InputHeader, null, label), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ React8.createElement("div", {
+  }, arrayValues.map((_, index) => /* @__PURE__ */ React6.createElement("div", {
     key: index,
     role: "none",
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React8.createElement("div", {
+    className: "flex items-start gap-1"
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React8.createElement(FormField, {
-    property: {
-      ...property,
-      array: false,
-      ast: elementType
-    },
-    path: [
-      ...path ?? [],
-      index
-    ],
-    readonly,
-    inline: true,
-    Custom,
-    lookupComponent
-  })), /* @__PURE__ */ React8.createElement(IconButton2, {
+  }, /* @__PURE__ */ React6.createElement(InputComponent, {
+    type,
+    format,
+    label,
+    inputOnly: true,
+    property: `${name}[${index}]`,
+    disabled: readonly,
+    placeholder,
+    ...inputProps
+  })), /* @__PURE__ */ React6.createElement(IconButton, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
-    onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ React8.createElement("div", {
+    onClick: () => {
+      const newValues = arrayValues.filter((_2, i) => i !== index);
+      inputProps.onValueChange(name, type, newValues);
+    }
+  })))), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ React8.createElement(IconButton2, {
+  }, /* @__PURE__ */ React6.createElement(IconButton, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
-    onClick: handleAdd
-  })));
-};
-
-// packages/ui/react-ui-form/src/components/Form/factory.tsx
-import { FormatEnum } from "@dxos/echo-schema";
-var getInputComponent = (type, format) => {
-  switch (format) {
-    case FormatEnum.LatLng:
-      return GeoPointInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
-  }
-};
-
-// packages/ui/react-ui-form/src/components/Form/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
-  const inputProps = useInputProps(path);
-  const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = useMemo3(() => title ?? pipe2(name, capitalize2), [
-    title,
-    name
-  ]);
-  const placeholder = useMemo3(() => examples?.length ? `Example: "${examples[0]}"` : description, [
-    examples,
-    description
-  ]);
-  if (array) {
-    return /* @__PURE__ */ React9.createElement(ArrayField, {
-      property,
-      path,
-      inputProps,
-      readonly,
-      Custom
-    });
-  }
-  const FoundComponent = lookupComponent?.({
-    prop: name,
-    schema: S.make(ast),
-    inputProps: {
-      type,
-      format,
-      label,
-      disabled: readonly,
-      placeholder,
-      ...inputProps
-    }
-  });
-  if (FoundComponent) {
-    return /* @__PURE__ */ React9.createElement("div", null, FoundComponent);
-  }
-  const jsonPath = createJsonPath3(path ?? []);
-  const InputComponent = Custom?.[jsonPath] || getInputComponent(type, format);
-  if (InputComponent) {
-    return /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(InputComponent, {
-      type,
-      format,
-      label,
-      inputOnly: inline,
-      placeholder,
-      disabled: readonly,
-      ...inputProps
-    }));
-  }
-  if (options) {
-    return /* @__PURE__ */ React9.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React9.createElement(SelectInput, {
-      type,
-      format,
-      disabled: readonly,
-      inputOnly: inline,
-      label,
-      options: options.map((option) => ({
-        value: option,
-        label: String(option)
-      })),
-      placeholder,
-      ...inputProps
-    }));
-  }
-  if (type === "object") {
-    const baseNode = findNode2(ast, isDiscriminatedUnion2);
-    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode2(ast, AST3.isTypeLiteral);
-    if (typeLiteral) {
-      return /* @__PURE__ */ React9.createElement("div", null, !inline && /* @__PURE__ */ React9.createElement("div", null, label), /* @__PURE__ */ React9.createElement(FormFields, {
-        schema: S.make(typeLiteral),
-        path,
-        readonly,
-        Custom
-      }));
+    onClick: () => {
+      const newValues = [
+        ...arrayValues,
+        SimpleType.getDefaultValue(type)
+      ];
+      inputProps.onValueChange(name, type, newValues);
     }
-  }
-  return null;
-};
-var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
-  const values = useFormValues(path);
-  const properties = useMemo3(() => {
-    const props = getSchemaProperties2(schema.ast, values);
-    const filtered = filter ? filter(props) : props;
-    return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-  }, [
-    schema,
-    values,
-    filter,
-    sort
-  ]);
-  return /* @__PURE__ */ React9.createElement("div", {
-    role: "form",
-    className: mx4("flex flex-col w-full gap-2 py-2")
-  }, properties.map((property) => {
-    return /* @__PURE__ */ React9.createElement(FormField, {
-      key: property.name,
-      property,
-      path: [
-        ...path ?? [],
-        property.name
-      ],
-      readonly,
-      lookupComponent,
-      Custom
-    });
-  }).filter(isNotFalsy));
+  })));
 };
-
-// packages/ui/react-ui-form/src/components/Form/Form.tsx
-var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
-  const onValid = useMemo4(() => autoSave ? onSave : void 0, [
-    autoSave,
-    onSave
-  ]);
-  return /* @__PURE__ */ React10.createElement(FormProvider, {
-    schema,
-    initialValues,
-    onValuesChanged,
-    onValidate,
-    onValid,
-    onSave
-  }, /* @__PURE__ */ React10.createElement("div", {
+var FormActions = ({ onCancel, onSubmit, canSubmit, readonly }) => {
+  const { t } = useTranslation2(translationKey);
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx5("p-2", classNames),
-    "data-testid": testId
-  }, /* @__PURE__ */ React10.createElement(FormFields, {
-    schema,
-    path,
-    readonly,
-    filter,
-    sort,
-    lookupComponent,
-    Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React10.createElement(FormActions, {
-    onCancel,
-    readonly
+    className: "flex justify-center"
+  }, /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: mx2(onCancel && !readonly && "grid grid-cols-2 gap-2")
+  }, onCancel && !readonly && /* @__PURE__ */ React6.createElement(IconButton, {
+    "data-testid": "cancel-button",
+    icon: "ph--x--regular",
+    label: t("button cancel"),
+    onClick: onCancel
+  }), onSubmit && /* @__PURE__ */ React6.createElement(IconButton, {
+    type: "submit",
+    "data-testid": "save-button",
+    disabled: !canSubmit,
+    icon: "ph--check--regular",
+    label: t("button save"),
+    onClick: onSubmit
   })));
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
-  const { t } = useTranslation4(translationKey);
+  const { t } = useTranslation3(translationKey);
   const [props, setProps] = useState2(projection.getFieldProjection(field.id).props);
-  useEffect2(() => setProps(projection.getFieldProjection(field.id).props), [
+  useEffect3(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
   const [schemas, setSchemas] = useState2([]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!registry) {
       return;
     }
@@ -793,7 +775,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     registry
   ]);
   const [referenceSchema, setReferenceSchema] = useState2();
-  useEffect2(() => {
+  useEffect3(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
@@ -802,7 +784,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   const [{ fieldSchema }, setFieldSchema] = useState2({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const handleValuesChanged = useCallback3((_props) => {
+  const handleValuesChanged = useCallback2((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = getFormatSchema(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -837,7 +819,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = useCallback3(({ property }) => {
+  const handleValidate = useCallback2(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -850,7 +832,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     view.fields,
     field
   ]);
-  const handleSave = useCallback3((props2) => {
+  const handleSave = useCallback2((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
@@ -861,29 +843,29 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     field,
     onSave
   ]);
-  const handleCancel = useCallback3(() => {
+  const handleCancel = useCallback2(() => {
     requestAnimationFrame(() => onCancel?.());
     onSave();
   }, [
     onSave
   ]);
-  const Custom = useMemo5(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React11.createElement(SelectInput, {
+  const Custom = useMemo3(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React11.createElement(SelectInput, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React11.createElement(SelectInput, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
       ...props2,
-      options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
+      options: referenceSchema ? getSchemaProperties2(referenceSchema.ast).sort(sortProperties).map((p) => ({
         value: p.name
       })) : []
     })
@@ -892,9 +874,9 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = useCallback3((props2) => props2.filter((p) => p.name !== "type"), []);
+  const propIsNotType = useCallback2((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
-    log2.warn("invalid format", {
+    log3.warn("invalid format", {
       props
     }, {
       F: __dxlog_file3,
@@ -904,7 +886,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     });
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(Form, {
+  return /* @__PURE__ */ React7.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
@@ -923,30 +905,30 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React12, { useCallback as useCallback4, useMemo as useMemo6, useState as useState3 } from "react";
-import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
-import { IconButton as IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import React8, { useCallback as useCallback3, useMemo as useMemo4, useState as useState3 } from "react";
+import { AST as AST2, Format, S as S2 } from "@dxos/echo-schema";
+import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
-import { ghostHover, inputTextLabel, mx as mx6 } from "@dxos/react-ui-theme";
+import { ghostHover, inputTextLabel, mx as mx3 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
 import { arrayMove } from "@dxos/util";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = S2.Struct({
   name: S2.String.annotations({
-    [AST4.TitleAnnotationId]: "View"
+    [AST2.TitleAnnotationId]: "View"
   }),
   typename: Format.DXN.annotations({
-    [AST4.TitleAnnotationId]: "Typename"
+    [AST2.TitleAnnotationId]: "Typename"
   })
 }).pipe(S2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = useTranslation5(translationKey);
-  const projection = useMemo6(() => new ViewProjection(schema, view), [
+  const { t } = useTranslation4(translationKey);
+  const projection = useMemo4(() => new ViewProjection(schema, view), [
     schema,
     view
   ]);
   const [field, setField] = useState3();
-  const viewValues = useMemo6(() => {
+  const viewValues = useMemo4(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -956,7 +938,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = useCallback4(({ name, typename }) => {
+  const handleViewUpdate = useCallback3(({ name, typename }) => {
     requestAnimationFrame(() => {
       if (view.name !== name) {
         view.name = name;
@@ -970,67 +952,67 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     onTypenameChanged
   ]);
-  const handleSelect = useCallback4((field2) => {
+  const handleSelect = useCallback3((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = useCallback4(() => {
+  const handleAdd = useCallback3(() => {
     const field2 = projection.createFieldProjection();
     setField(field2);
   }, [
     view
   ]);
-  const handleMove = useCallback4((fromIndex, toIndex) => {
+  const handleMove = useCallback3((fromIndex, toIndex) => {
     arrayMove(view.fields, fromIndex, toIndex);
   }, [
     view.fields
   ]);
-  const handleClose = useCallback4(() => setField(void 0), []);
-  return /* @__PURE__ */ React12.createElement("div", {
+  const handleClose = useCallback3(() => setField(void 0), []);
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: mx6("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ React12.createElement(Form, {
+    className: mx3("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ React8.createElement(Form, {
     autoFocus: true,
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
     onSave: handleViewUpdate
-  }), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", {
+  }), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React12.createElement("label", {
-    className: mx6(inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ React12.createElement(List.Root, {
+  }, /* @__PURE__ */ React8.createElement("label", {
+    className: mx3(inputTextLabel)
+  }, t("fields label"))), /* @__PURE__ */ React8.createElement(List.Root, {
     items: view.fields,
     isItem: S2.is(FieldSchema),
     getId: (field2) => field2.id,
     onMove: handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ React12.createElement(React12.Fragment, null, showHeading && /* @__PURE__ */ React12.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, showHeading && /* @__PURE__ */ React8.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ React12.createElement("div", null), /* @__PURE__ */ React12.createElement("div", {
+  }, /* @__PURE__ */ React8.createElement("div", null), /* @__PURE__ */ React8.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ React12.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ React8.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ React12.createElement(List.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ React8.createElement(List.Item, {
     key: field2.id,
     item: field2,
-    classNames: mx6(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React12.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React12.createElement(List.ItemTitle, {
+    classNames: mx3(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React8.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React8.createElement(List.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ React12.createElement(List.ItemDeleteButton, {
+  }, field2.path), /* @__PURE__ */ React8.createElement(List.ItemDeleteButton, {
     disabled: view.fields.length <= 1,
     onClick: () => onDelete(field2.id)
-  }))))))), field && /* @__PURE__ */ React12.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ React8.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ React12.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ React8.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ React12.createElement(IconButton3, {
+  }, /* @__PURE__ */ React8.createElement(IconButton2, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: handleAdd,
@@ -1263,6 +1245,7 @@ export {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  FormActions,
   GeoPointInput,
   InputHeader,
   NumberInput,