@dxos/react-ui-form 0.7.4 → 0.7.5-feature-compute.4d9d99a

package/dist/lib/browser/index.mjs

@@ -80,27 +80,16 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React6, { useCallback as useCallback2, useEffect as useEffect3, 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 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/Form.tsx
-import { pipe } from "effect";
-import { capitalize } from "effect/String";
-import React5, { 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 } from "@dxos/react-ui-theme";
-import { getSchemaProperties } from "@dxos/schema";
-import { isNotFalsy } from "@dxos/util";
-
-// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
+// packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
 import React3 from "react";
-import { Input as Input2, Select } from "@dxos/react-ui";
+import { Input as Input2, useTranslation } from "@dxos/react-ui";
+import { safeParseFloat } from "@dxos/util";
 
 // packages/ui/react-ui-form/src/components/Form/Input.tsx
 import React2 from "react";
@@ -121,120 +110,156 @@ var InputHeader = ({ children, error }) => {
   }, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error)));
 };
 
-// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-var TextInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+// packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
+var GeoPointInput = ({ property, type, label, disabled, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { t } = useTranslation(translationKey);
   const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue2(property) ?? [];
   return /* @__PURE__ */ React3.createElement(Input2.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React3.createElement(InputHeader, {
+  }, /* @__PURE__ */ React3.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: lng,
+    onChange: (event) => onValueChange(property, type, [
+      lat,
+      safeParseFloat(event.target.value, 0)
+    ]),
+    onBlur
+  }), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: lat,
+    onChange: (event) => onValueChange(property, type, [
+      safeParseFloat(event.target.value, 0),
+      lng
+    ]),
+    onBlur
+  })));
+};
+
+// packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
+import React4 from "react";
+import { Input as Input3 } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
+var gridCols = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4"
+];
+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, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+    className: mx("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+    key: prop,
+    type: "number",
+    disabled,
+    value: values[prop],
+    onChange: (event) => onValueChange(property, type, {
+      ...values,
+      [prop]: safeParseFloat2(event.target.value, 0)
+    }),
+    onBlur
+  }))));
+};
+
+// 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 = ({ 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, {
+    error
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.TextInput, {
     disabled,
     placeholder,
-    value: getValue(property) ?? "",
+    value: getValue2(property) ?? "",
     onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ React3.createElement(Input2.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.Validation, null, error));
 };
-var NumberInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue, onValueChange, onBlur }) => {
+var NumberInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
+  return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React3.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.TextInput, {
     type: "number",
     disabled,
     placeholder,
-    value: getValue(property) ?? 0,
+    value: getValue2(property) ?? 0,
     onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ React3.createElement(Input2.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
 };
-var BooleanInput = ({ property, type, label, inputOnly, getStatus, getValue, onValueChange }) => {
+var BooleanInput = ({ property, type, label, inputOnly, getStatus, getValue: getValue2, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
+  return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React3.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Input2.Switch, {
-    checked: getValue(property),
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.Switch, {
+    checked: getValue2(property),
     onCheckedChange: (value) => onValueChange(property, type, value)
-  }), inputOnly && /* @__PURE__ */ React3.createElement(Input2.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
 };
-var SelectInput = ({ property, type, label, inputOnly, disabled, placeholder, options, getStatus, getValue, onValueChange }) => {
+var SelectInput = ({ property, type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue2, onValueChange }) => {
   const { status, error } = getStatus?.(property);
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
+  return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React3.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement(Select.Root, {
-    value: getValue(property),
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Select.Root, {
+    value: getValue2(property),
     onValueChange: (value) => onValueChange(property, type, value)
-  }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React5.createElement(Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ React5.createElement(Select.Portal, null, /* @__PURE__ */ React5.createElement(Select.Content, null, /* @__PURE__ */ React5.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React3.createElement(Select.Option, {
+    /* @__PURE__ */ React5.createElement(Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ React3.createElement(Input2.DescriptionAndValidation, null, error));
+  )))))), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
 };
 
-// packages/ui/react-ui-form/src/components/Form/factory.tsx
-import { FormatEnum } from "@dxos/echo-schema";
-
-// packages/ui/react-ui-form/src/components/Form/Custom.tsx
-import React4 from "react";
-import { Input as Input3, useTranslation } from "@dxos/react-ui";
-var GeiPointInput = ({ property, type, label, disabled, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus?.(property);
-  const [lng = 0, lat = 0] = getValue(property) ?? [];
-  return /* @__PURE__ */ React4.createElement(Input3.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder longitude"),
-    value: lng,
-    onChange: (event) => onValueChange(property, type, [
-      lat,
-      safeParseFloat(event.target.value, 0)
-    ]),
-    onBlur
-  }), /* @__PURE__ */ React4.createElement(Input3.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: lat,
-    onChange: (event) => onValueChange(property, type, [
-      safeParseFloat(event.target.value, 0),
-      lng
-    ]),
-    onBlur
-  })));
-};
-var safeParseFloat = (str, defaultValue) => {
-  try {
-    return parseFloat(str);
-  } catch {
-    return defaultValue ?? 0;
-  }
-};
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+import { pipe } from "effect";
+import { capitalize } from "effect/String";
+import React6, { useEffect as useEffect2, useMemo as useMemo2 } from "react";
+import { AST as AST2, 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/factory.tsx
+import { FormatEnum } from "@dxos/echo-schema";
 var getInputComponent = (type, format) => {
   switch (format) {
     case FormatEnum.LatLng:
-      return GeiPointInput;
+      return GeoPointInput;
   }
   switch (type) {
     case "string":
@@ -248,11 +273,22 @@ var getInputComponent = (type, format) => {
 
 // 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 } 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);
@@ -266,10 +302,12 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   const validate = useCallback((values2) => {
     let errors2 = validateSchema(schema, values2) ?? [];
     if (errors2.length === 0 && onValidate) {
-      errors2 = onValidate(values2) ?? [];
+      const validatedValues = values2;
+      errors2 = onValidate(validatedValues) ?? [];
     }
     setErrors(flatMap(errors2));
-    return errors2.length === 0;
+    const valid = errors2.length === 0;
+    return valid;
   }, [
     schema,
     onValidate
@@ -307,7 +345,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   }, [
     values,
     validate,
-    onSave
+    onSave,
+    changed
   ]);
   const getStatus = useCallback((property) => ({
     status: errors[property] ? "error" : void 0,
@@ -316,8 +355,8 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     touched,
     errors
   ]);
-  const getValue = (property) => {
-    return getByPath(values, property);
+  const getFormValue = (property) => {
+    return getValue(values, property);
   };
   const onValueChange = (property, type, value) => {
     let parsedValue = value;
@@ -328,13 +367,15 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 183,
+        L: 179,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
-    const newValues = setByPath(values, property, parsedValue);
+    const newValues = {
+      ...setValue(values, property, parsedValue)
+    };
     setValues(newValues);
     setChanged((prev) => ({
       ...prev,
@@ -372,7 +413,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     handleSave,
     // Field utils.
     getStatus,
-    getValue,
+    getValue: getFormValue,
     onValueChange,
     onBlur
   };
@@ -380,7 +421,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 234,
+    L: 230,
     S: void 0,
     A: [
       "obj",
@@ -400,25 +441,11 @@ var flatMap = (errors) => {
     return result;
   }, {});
 };
-var getByPath = (obj, path) => {
-  const [key, index] = path.split(".");
-  return index === void 0 ? obj[key] : obj[key][parseInt(index)];
-};
-var setByPath = (obj, path, value) => {
-  const [key, index] = path.split(".");
-  const newValue = index === void 0 ? value : [
-    ...obj[key]
-  ].map((v, i) => i === parseInt(index) ? value : v);
-  return {
-    ...obj,
-    [key]: newValue
-  };
-};
 
 // 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 Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, Custom }) => {
+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
@@ -450,7 +477,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         errors
       }, {
         F: __dxlog_file2,
-        L: 100,
+        L: 106,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -458,9 +485,9 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
   }, [
     errors
   ]);
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "form",
-    className: mx("flex flex-col w-full gap-2 py-2", classNames),
+    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;
@@ -470,14 +497,34 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     ];
     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__ */ React5.createElement("div", {
+        return /* @__PURE__ */ React6.createElement("div", {
           key: name,
           role: "none",
           className: padding
-        }, /* @__PURE__ */ React5.createElement(SelectInput, {
+        }, /* @__PURE__ */ React6.createElement(SelectInput, {
           type,
           format,
           property: name,
@@ -493,7 +540,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       }
       InputComponent = getInputComponent(type, format);
       if (array) {
-        return /* @__PURE__ */ React5.createElement(ArrayField, {
+        return /* @__PURE__ */ React6.createElement(ArrayField, {
           key: name,
           name,
           type,
@@ -512,15 +559,15 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     if (!InputComponent) {
       if (type === "object") {
         const baseNode = findNode(ast, isDiscriminatedUnion);
-        const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(ast, AST.isTypeLiteral);
+        const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(ast, AST2.isTypeLiteral);
         if (typeLiteral) {
           const schema2 = S.make(typeLiteral);
-          return /* @__PURE__ */ React5.createElement("div", {
+          return /* @__PURE__ */ React6.createElement("div", {
             key: name,
             role: "none"
-          }, /* @__PURE__ */ React5.createElement("div", {
+          }, /* @__PURE__ */ React6.createElement("div", {
             className: padding
-          }, label), /* @__PURE__ */ React5.createElement(Form, {
+          }, label), /* @__PURE__ */ React6.createElement(Form, {
             schema: schema2,
             path: key,
             values: values[name] ?? {},
@@ -536,17 +583,17 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
         type
       }, {
         F: __dxlog_file2,
-        L: 185,
+        L: 213,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return null;
     }
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React6.createElement("div", {
       key: name,
       role: "none",
       className: padding
-    }, /* @__PURE__ */ React5.createElement(InputComponent, {
+    }, /* @__PURE__ */ React6.createElement(InputComponent, {
       type,
       format,
       property: name,
@@ -555,7 +602,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
       placeholder,
       ...inputProps
     }));
-  }).filter(isNotFalsy), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React5.createElement(FormActions, {
+  }).filter(isNotFalsy), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React6.createElement(FormActions, {
     onCancel,
     onSubmit: handleSave,
     canSubmit: canSave,
@@ -568,33 +615,33 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
   const key = [
     name
   ];
-  const tupleType = findNode(ast, AST.isTupleType);
+  const tupleType = findNode(ast, AST2.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);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, values[name]) : findNode(elementType, AST2.isTypeLiteral);
     if (typeLiteral) {
       const schema = S.make(typeLiteral);
-      return /* @__PURE__ */ React5.createElement("div", {
+      return /* @__PURE__ */ React6.createElement("div", {
         key: name,
         role: "none",
-        className: mx(padding)
-      }, /* @__PURE__ */ React5.createElement(InputHeader, null, label), /* @__PURE__ */ React5.createElement("div", {
+        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__ */ React5.createElement("div", {
+        return /* @__PURE__ */ React6.createElement("div", {
           key: index,
           role: "none",
           className: "flex items-center gap-1"
-        }, /* @__PURE__ */ React5.createElement("div", {
+        }, /* @__PURE__ */ React6.createElement("div", {
           role: "none",
           className: "flex-1"
-        }, /* @__PURE__ */ React5.createElement(Form, {
+        }, /* @__PURE__ */ React6.createElement(Form, {
           schema,
           path: [
             ...key,
-            index.toString()
+            `[${index}]`
           ],
           values: value,
           onValuesChanged: (childValues) => {
@@ -605,7 +652,7 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
             inputProps.onValueChange(name, "object", newValues);
           },
           Custom
-        })), /* @__PURE__ */ React5.createElement(IconButton, {
+        })), /* @__PURE__ */ React6.createElement(IconButton, {
           icon: "ph--trash--regular",
           iconOnly: true,
           label: t("button remove"),
@@ -614,10 +661,10 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
             inputProps.onValueChange(name, type, newValues);
           }
         }));
-      })), /* @__PURE__ */ React5.createElement("div", {
+      })), /* @__PURE__ */ React6.createElement("div", {
         role: "none",
         className: "flex justify-between items-center plb-1"
-      }, /* @__PURE__ */ React5.createElement(IconButton, {
+      }, /* @__PURE__ */ React6.createElement(IconButton, {
         icon: "ph--plus--regular",
         iconOnly: true,
         label: t("button add"),
@@ -630,7 +677,7 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
         }
       })));
     }
-    return /* @__PURE__ */ React5.createElement("div", {
+    return /* @__PURE__ */ React6.createElement("div", {
       key: name,
       role: "none"
     }, "Nested form not supported in arrays, yet.");
@@ -639,30 +686,30 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
   if (!InputComponent) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     key: "meta-input",
-    className: mx(padding)
-  }, /* @__PURE__ */ React5.createElement(InputHeader, null, label), /* @__PURE__ */ React5.createElement("div", {
+    className: mx2(padding)
+  }, /* @__PURE__ */ React6.createElement(InputHeader, null, label), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, arrayValues.map((_, index) => /* @__PURE__ */ React5.createElement("div", {
+  }, arrayValues.map((_, index) => /* @__PURE__ */ React6.createElement("div", {
     key: index,
     role: "none",
     className: "flex items-start gap-1"
-  }, /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React5.createElement(InputComponent, {
+  }, /* @__PURE__ */ React6.createElement(InputComponent, {
     type,
     format,
     label,
     inputOnly: true,
-    property: `${name}.${index}`,
+    property: `${name}[${index}]`,
     disabled: readonly,
     placeholder,
     ...inputProps
-  })), /* @__PURE__ */ React5.createElement(IconButton, {
+  })), /* @__PURE__ */ React6.createElement(IconButton, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
@@ -670,10 +717,10 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
       const newValues = arrayValues.filter((_2, i) => i !== index);
       inputProps.onValueChange(name, type, newValues);
     }
-  })))), /* @__PURE__ */ React5.createElement("div", {
+  })))), /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ React5.createElement(IconButton, {
+  }, /* @__PURE__ */ React6.createElement(IconButton, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
@@ -688,18 +735,18 @@ var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholde
 };
 var FormActions = ({ onCancel, onSubmit, canSubmit, readonly }) => {
   const { t } = useTranslation2(translationKey);
-  return /* @__PURE__ */ React5.createElement("div", {
+  return /* @__PURE__ */ React6.createElement("div", {
     role: "none",
     className: "flex justify-center"
-  }, /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement("div", {
     role: "none",
-    className: mx(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ React5.createElement(IconButton, {
+    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__ */ React5.createElement(IconButton, {
+  }), onSubmit && /* @__PURE__ */ React6.createElement(IconButton, {
     type: "submit",
     "data-testid": "save-button",
     disabled: !canSubmit,
@@ -723,9 +770,11 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     if (!registry) {
       return;
     }
-    const subscription = registry.subscribe(setSchemas);
+    const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
+      fire: true
+    });
     const t2 = setTimeout(async () => {
-      const schemas2 = await registry.query();
+      const schemas2 = await registry.query().run();
       setSchemas(schemas2);
     });
     return () => {
@@ -735,9 +784,9 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [schema, setSchema] = useState2();
+  const [referenceSchema, setReferenceSchema] = useState2();
   useEffect3(() => {
-    setSchema(schemas.find((schema2) => schema2.typename === props?.referenceSchema));
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
@@ -746,14 +795,24 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     fieldSchema: getFormatSchema(props?.format)
   });
   const handleValuesChanged = useCallback2((_props) => {
-    if (_props.format !== props.format) {
-      setFieldSchema({
-        fieldSchema: getFormatSchema(_props.format)
-      });
-    }
-    if (_props.referenceSchema !== props.referenceSchema) {
-      setSchema(schemas.find((schema2) => schema2.typename === _props.referenceSchema));
-    }
+    setFieldSchema((prev) => {
+      const fieldSchema2 = getFormatSchema(_props.format);
+      if (prev.fieldSchema === fieldSchema2) {
+        return prev;
+      }
+      return {
+        fieldSchema: fieldSchema2
+      };
+    });
+    setReferenceSchema((prev) => {
+      if (_props.referenceSchema !== prev?.typename) {
+        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+        if (newSchema) {
+          return newSchema;
+        }
+      }
+      return prev;
+    });
     setProps((props2) => {
       const type = formatToType[_props.format];
       if (props2.type !== type) {
@@ -767,7 +826,8 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     });
   }, [
     schemas,
-    props
+    props.format,
+    props.referenceSchema
   ]);
   const handleValidate = useCallback2(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
@@ -799,23 +859,49 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     onSave
   ]);
+  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__ */ React7.createElement(SelectInput, {
+      ...props2,
+      options: schemas.map((schema) => ({
+        value: schema.typename
+      }))
+    }),
+    ["referencePath"]: (props2) => /* @__PURE__ */ React7.createElement(SelectInput, {
+      ...props2,
+      options: referenceSchema ? getSchemaProperties2(referenceSchema.ast).sort(sortProperties).map((p) => ({
+        value: p.name
+      })) : []
+    })
+  }), [
+    t,
+    schemas,
+    referenceSchema
+  ]);
+  const propIsNotType = useCallback2((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     log3.warn("invalid format", {
       props
     }, {
       F: __dxlog_file3,
-      L: 118,
+      L: 173,
       S: void 0,
       C: (f, a) => f(...a)
     });
     return null;
   }
-  return /* @__PURE__ */ React6.createElement(Form, {
+  return /* @__PURE__ */ React7.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
     schema: fieldSchema,
-    filter: (props2) => props2.filter((p) => p.name !== "type"),
+    filter: propIsNotType,
     sort: [
       "property",
       "format"
@@ -824,55 +910,35 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     onValidate: handleValidate,
     onSave: handleSave,
     onCancel: handleCancel,
-    Custom: {
-      ["format"]: (props2) => /* @__PURE__ */ React6.createElement(SelectInput, {
-        ...props2,
-        options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
-          value,
-          label: t(`format ${value}`)
-        }))
-      }),
-      ["referenceSchema"]: (props2) => /* @__PURE__ */ React6.createElement(SelectInput, {
-        ...props2,
-        options: schemas.map((schema2) => ({
-          value: schema2.typename
-        }))
-      }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ React6.createElement(SelectInput, {
-        ...props2,
-        options: schema ? getSchemaProperties2(schema.schema.ast).sort(sortProperties).map((p) => ({
-          value: p.name
-        })) : []
-      })
-    }
+    Custom
   });
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React7, { useCallback as useCallback3, useMemo as useMemo3, useState as useState3 } from "react";
-import { AST as AST2, Format, S as S2 } from "@dxos/echo-schema";
+import React8, { useCallback as useCallback3, useMemo as useMemo4, useState as useState3 } from "react";
+import { AST as AST3, 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 mx2 } 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({
-    [AST2.TitleAnnotationId]: "View"
+    [AST3.TitleAnnotationId]: "View"
   }),
   typename: Format.DXN.annotations({
-    [AST2.TitleAnnotationId]: "Typename"
+    [AST3.TitleAnnotationId]: "Typename"
   })
 }).pipe(S2.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onDelete }) => {
+var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = useTranslation4(translationKey);
-  const projection = useMemo3(() => new ViewProjection(schema, view), [
+  const projection = useMemo4(() => new ViewProjection(schema, view), [
     schema,
     view
   ]);
   const [field, setField] = useState3();
-  const viewValues = useMemo3(() => {
+  const viewValues = useMemo4(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -884,13 +950,17 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   const handleViewUpdate = useCallback3(({ name, typename }) => {
     requestAnimationFrame(() => {
-      view.name = name;
-      view.query.type = typename;
-      schema.updateTypename(typename);
+      if (view.name !== name) {
+        view.name = name;
+      }
+      if (view.query.type !== typename) {
+        onTypenameChanged(typename);
+      }
     });
   }, [
     view,
-    schema
+    schema,
+    onTypenameChanged
   ]);
   const handleSelect = useCallback3((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
@@ -907,52 +977,52 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     view.fields
   ]);
   const handleClose = useCallback3(() => setField(void 0), []);
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: mx2("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ React7.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__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement("div", {
+  }), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React7.createElement("label", {
-    className: mx2(inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ React7.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__ */ React7.createElement(React7.Fragment, null, showHeading && /* @__PURE__ */ React7.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ React8.createElement(React8.Fragment, null, showHeading && /* @__PURE__ */ React8.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ React7.createElement("div", null), /* @__PURE__ */ React7.createElement("div", {
+  }, /* @__PURE__ */ React8.createElement("div", null), /* @__PURE__ */ React8.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ React7.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ React8.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ React7.createElement(List.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ React8.createElement(List.Item, {
     key: field2.id,
     item: field2,
-    classNames: mx2(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React7.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React7.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__ */ React7.createElement(List.ItemDeleteButton, {
+  }, field2.path), /* @__PURE__ */ React8.createElement(List.ItemDeleteButton, {
     disabled: view.fields.length <= 1,
     onClick: () => onDelete(field2.id)
-  }))))))), field && /* @__PURE__ */ React7.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ React8.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ React7.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ React8.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ React7.createElement(IconButton2, {
+  }, /* @__PURE__ */ React8.createElement(IconButton2, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: handleAdd,
@@ -1186,11 +1256,12 @@ export {
   FieldEditor,
   Form,
   FormActions,
-  GeiPointInput,
+  GeoPointInput,
   InputHeader,
   NumberInput,
   SelectInput,
   TextInput,
+  TupleInput,
   ViewEditor,
   cellClassesForFieldType,
   cellClassesForRowSelection,