@dxos/react-ui-form 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/dist/lib/node-esm/index.mjs

@@ -67,7 +67,7 @@ import { mx, textBlockWidth } from "@dxos/react-ui-theme";
 var DeprecatedFormContainer = ({ children, classNames }) => {
   return /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto"
+    className: "w-full p-4 justify-center overflow-x-hidden overflow-y-auto"
   }, /* @__PURE__ */ React.createElement("div", {
     role: "form",
     className: mx("flex flex-col", textBlockWidth, classNames)
@@ -101,23 +101,9 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   return primary;
 };
 
-// packages/ui/react-ui-form/src/components/ControlSection/ControlSection.tsx
+// packages/ui/react-ui-form/src/components/ControlSection.tsx
 import React2 from "react";
-import { Button, Input as Input2, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var ControlPage = ({ children, classNames, ...props }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: mx2("pli-2", classNames),
-    ...props
-  }, children);
-};
-var ControlSection = ({ title, description, children }) => {
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
-    title,
-    description
-  }), children);
-};
+import { toLocalizedString, useTranslation, Input as Input2 } from "@dxos/react-ui";
 var ControlSectionHeading = ({ title, description }) => {
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
@@ -126,18 +112,15 @@ var ControlSectionHeading = ({ title, description }) => {
     className: "pli-4 mlb-4 container-max-width text-description"
   }, toLocalizedString(description, t)));
 };
-var ControlGroupButton = ({ classNames, ...props }) => {
-  return /* @__PURE__ */ React2.createElement(Button, {
-    ...props,
-    classNames: [
-      "md:col-span-2",
-      classNames
-    ]
-  });
+var ControlSection = ({ title, description, children }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
+    title,
+    description
+  }), children);
 };
-var ControlGroup = ({ children, classNames }) => /* @__PURE__ */ React2.createElement("div", {
+var ControlGroup = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
   role: "none",
-  className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4", classNames)
+  className: "group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4"
 }, children);
 var ControlFrame = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
   role: "none",
@@ -183,9 +166,9 @@ var ControlFrameItem = ({ title, description, children }) => {
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React14, { useCallback as useCallback6, useEffect as useEffect8, useMemo as useMemo7, useState as useState5 } from "react";
+import React13, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useState as useState4 } from "react";
 import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
-import { log as log3 } from "@dxos/log";
+import { log as log2 } from "@dxos/log";
 import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
 
@@ -291,7 +274,7 @@ import { PublicKey } from "@dxos/keys";
 import { Icon as Icon2, IconButton, Input as Input4, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
-import { hues, mx as mx3 } from "@dxos/react-ui-theme";
+import { hues, mx as mx2 } from "@dxos/react-ui-theme";
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
   const [selected, setSelectedId] = useState2(null);
   const [isNewOption, setIsNewOption] = useState2(false);
@@ -417,7 +400,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
   }, /* @__PURE__ */ React5.createElement(List.Item, {
     role: "button",
     item,
-    classNames: mx3("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    classNames: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     "aria-expanded": selected === item.id
   }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center"
@@ -458,7 +441,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     role: "listitem"
   }, /* @__PURE__ */ React5.createElement("div", {
     role: "button",
-    className: mx3("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    className: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     onClick: handleAdd
   }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center gap-1"
@@ -472,7 +455,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
 // packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
 import React6 from "react";
 import { Input as Input5 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -488,7 +471,7 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
   }, /* @__PURE__ */ React6.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
-    className: mx4("grid gap-2", gridCols[binding.length - 1])
+    className: mx3("grid gap-2", gridCols[binding.length - 1])
   }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input5.TextInput, {
     key: prop,
     type: "number",
@@ -608,13 +591,13 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React13, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
-import { mx as mx8 } from "@dxos/react-ui-theme";
+import React12, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { mx as mx7 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
 import React9 from "react";
 import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
 import React8, { createContext, useContext, useEffect as useEffect5, useMemo as useMemo3 } from "react";
@@ -905,7 +888,7 @@ var FormActions = ({ onCancel, readonly }) => {
     className: "mt-2 flex justify-center"
   }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: mx5(onCancel && !readonly && "grid grid-cols-2 gap-2")
+    className: mx4(onCancel && !readonly && "grid grid-cols-2 gap-2")
   }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
@@ -924,10 +907,10 @@ var FormActions = ({ onCancel, readonly }) => {
 // packages/ui/react-ui-form/src/components/Form/FormContent.tsx
 import { pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
-import React12, { useMemo as useMemo5 } from "react";
+import React11, { useMemo as useMemo5 } 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 mx7 } from "@dxos/react-ui-theme";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
@@ -939,17 +922,17 @@ 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 IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { mx as mx6 } from "@dxos/react-ui-theme";
+import { mx as mx5 } 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";
 var padding = "px-2";
 var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
   const { t } = useTranslation5(translationKey);
   const { ast, name, type, title } = property;
-  const values = useFormValues(path ?? []) ?? [];
+  const values = useFormValues(path ?? []);
   invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
     F: __dxlog_file2,
-    L: 39,
+    L: 37,
     S: void 0,
     A: [
       "Array.isArray(values)",
@@ -1005,7 +988,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   }
   return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
-    className: mx6(padding)
+    className: mx5(padding)
   }, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
@@ -1046,108 +1029,6 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   })));
 };
 
-// packages/ui/react-ui-form/src/components/Form/RefField.tsx
-import React11, { useEffect as useEffect6, useState as useState4 } from "react";
-import { Expando, getTypeAnnotation, ReferenceAnnotationId } from "@dxos/echo-schema";
-import { findAnnotation } from "@dxos/effect";
-import { DXN } from "@dxos/keys";
-import { refFromDXN, RefImpl } from "@dxos/live-object";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/RefField.tsx";
-var RefField = ({ ast, type, label, readonly, placeholder, inline, onQueryRefOptions, inputProps }) => {
-  const { getValue: getValue3, onValueChange, ...restInputProps } = inputProps;
-  const refTypeInfo = findAnnotation(ast, ReferenceAnnotationId);
-  const [refOptions, setRefOptions] = useState4([]);
-  const [loading, setLoading] = useState4(false);
-  useEffect6(() => {
-    if (!refTypeInfo || !onQueryRefOptions) {
-      return;
-    }
-    const fetchOptions = async () => {
-      setLoading(true);
-      try {
-        const options = await onQueryRefOptions(refTypeInfo);
-        setRefOptions(options.map((option) => ({
-          label: option.label,
-          value: option.dxn.toString()
-        })));
-      } catch (error) {
-        log2.error("Failed to fetch ref options:", error, {
-          F: __dxlog_file3,
-          L: 68,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setRefOptions([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-    void fetchOptions();
-  }, [
-    refTypeInfo,
-    onQueryRefOptions
-  ]);
-  if (!refTypeInfo) {
-    return null;
-  }
-  if (refTypeInfo.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-    const handleOnValueChange = (_type, dxnString) => {
-      const dxn = DXN.tryParse(dxnString);
-      if (dxn) {
-        onValueChange?.("object", refFromDXN(dxn));
-      } else if (dxnString === "") {
-        onValueChange?.("object", void 0);
-      } else {
-        onValueChange?.("string", dxnString);
-      }
-    };
-    const handleGetValue2 = () => {
-      const formValue = getValue3();
-      if (typeof formValue === "string") {
-        return formValue;
-      }
-      if (formValue instanceof RefImpl) {
-        return formValue.dxn.toString();
-      }
-      return void 0;
-    };
-    return /* @__PURE__ */ React11.createElement(TextInput, {
-      type,
-      label,
-      disabled: readonly,
-      placeholder,
-      inputOnly: inline,
-      getValue: handleGetValue2,
-      onValueChange: handleOnValueChange,
-      ...restInputProps
-    });
-  }
-  const handleGetValue = () => {
-    const formValue = getValue3();
-    if (formValue instanceof RefImpl) {
-      return formValue.dxn.toString();
-    }
-    return void 0;
-  };
-  const handleValueChanged = (_type, dxnString) => {
-    const dxn = DXN.parse(dxnString);
-    const ref = refFromDXN(dxn);
-    onValueChange("object", ref);
-  };
-  return /* @__PURE__ */ React11.createElement(SelectInput, {
-    type,
-    label,
-    disabled: readonly || loading,
-    placeholder: loading ? "Loading options..." : placeholder,
-    inputOnly: inline,
-    getValue: handleGetValue,
-    onValueChange: handleValueChanged,
-    options: refOptions,
-    ...restInputProps
-  });
-};
-
 // packages/ui/react-ui-form/src/components/Form/factory.tsx
 import { FormatEnum } from "@dxos/echo-schema";
 var getInputComponent = (type, format) => {
@@ -1168,7 +1049,7 @@ var getInputComponent = (type, format) => {
 };
 
 // packages/ui/react-ui-form/src/components/Form/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
+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 = useMemo5(() => title ?? pipe2(name, capitalize2), [
@@ -1192,14 +1073,14 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     }
   });
   if (FoundComponent) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
     }, FoundComponent);
   }
   const jsonPath = createJsonPath3(path ?? []);
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
-    return /* @__PURE__ */ React12.createElement(CustomComponent, {
+    return /* @__PURE__ */ React11.createElement(CustomComponent, {
       type,
       format,
       label,
@@ -1210,7 +1091,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     });
   }
   if (array) {
-    return /* @__PURE__ */ React12.createElement(ArrayField, {
+    return /* @__PURE__ */ React11.createElement(ArrayField, {
       property,
       path,
       inputProps,
@@ -1220,9 +1101,9 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
   }
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React12.createElement(InputComponent, {
+    }, /* @__PURE__ */ React11.createElement(InputComponent, {
       type,
       format,
       label,
@@ -1233,9 +1114,9 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     }));
   }
   if (options) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React12.createElement(SelectInput, {
+    }, /* @__PURE__ */ React11.createElement(SelectInput, {
       type,
       format,
       disabled: readonly,
@@ -1249,39 +1130,23 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       ...inputProps
     }));
   }
-  if (format === "ref") {
-    return /* @__PURE__ */ React12.createElement(RefField, {
-      ast,
-      type,
-      label,
-      readonly,
-      placeholder,
-      inline,
-      onQueryRefOptions,
-      inputProps
-    });
-  }
   if (type === "object") {
     const baseNode = findNode2(ast, isDiscriminatedUnion2);
     const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode2(ast, AST3.isTypeLiteral);
     if (typeLiteral) {
-      return /* @__PURE__ */ React12.createElement("div", {
+      return /* @__PURE__ */ React11.createElement("div", {
         role: "none"
-      }, !inline && /* @__PURE__ */ React12.createElement("h3", {
-        className: "text-lg mbs-2 mbe-1"
-      }, label), /* @__PURE__ */ React12.createElement(FormFields, {
+      }, !inline && /* @__PURE__ */ React11.createElement("div", null, label), /* @__PURE__ */ React11.createElement(FormFields, {
         schema: S.make(typeLiteral),
         path,
         readonly,
-        onQueryRefOptions,
-        Custom,
-        lookupComponent
+        Custom
       }));
     }
   }
   return null;
 };
-var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, lookupComponent, Custom }) => {
+var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
   const values = useFormValues(path);
   const properties = useMemo5(() => {
     const props = getSchemaProperties2(schema.ast, values);
@@ -1293,11 +1158,11 @@ var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, loo
     filter,
     sort
   ]);
-  return /* @__PURE__ */ React12.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     role: "form",
-    className: mx7("flex flex-col w-full gap-2")
+    className: mx6("flex flex-col w-full gap-2")
   }, properties.map((property) => {
-    return /* @__PURE__ */ React12.createElement(FormField, {
+    return /* @__PURE__ */ React11.createElement(FormField, {
       key: property.name,
       property,
       path: [
@@ -1305,7 +1170,6 @@ var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, loo
         property.name
       ],
       readonly,
-      onQueryRefOptions,
       lookupComponent,
       Custom
     });
@@ -1313,13 +1177,13 @@ var FormFields = ({ schema, path, filter, sort, readonly, onQueryRefOptions, loo
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, onQueryRefOptions, lookupComponent, Custom }) => {
+var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
   const formRef = useRef3(null);
   const onValid = useMemo6(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (autoFocus && formRef.current) {
       const input = formRef.current.querySelector("input");
       if (input) {
@@ -1329,7 +1193,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
   }, [
     autoFocus
   ]);
-  return /* @__PURE__ */ React13.createElement(FormProvider, {
+  return /* @__PURE__ */ React12.createElement(FormProvider, {
     formRef,
     schema,
     autoSave,
@@ -1338,37 +1202,36 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     onValidate,
     onValid,
     onSave
-  }, /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React12.createElement("div", {
     ref: formRef,
     role: "none",
-    className: mx8("p-2", classNames),
+    className: mx7("p-2", classNames),
     "data-testid": testId
-  }, /* @__PURE__ */ React13.createElement(FormFields, {
+  }, /* @__PURE__ */ React12.createElement(FormFields, {
     schema,
     path,
     readonly,
     filter,
     sort,
-    onQueryRefOptions,
     lookupComponent,
     Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React13.createElement(FormActions, {
+  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React12.createElement(FormActions, {
     onCancel,
     readonly
   })));
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/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 } = useTranslation6(translationKey);
-  const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
-  useEffect8(() => setProps(projection.getFieldProjection(field.id).props), [
+  const [props, setProps] = useState4(projection.getFieldProjection(field.id).props);
+  useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
-  const [schemas, setSchemas] = useState5([]);
-  useEffect8(() => {
+  const [schemas, setSchemas] = useState4([]);
+  useEffect7(() => {
     if (!registry) {
       return;
     }
@@ -1386,14 +1249,14 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = useState5();
-  useEffect8(() => {
+  const [referenceSchema, setReferenceSchema] = useState4();
+  useEffect7(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
   ]);
-  const [{ fieldSchema }, setFieldSchema] = useState5({
+  const [{ fieldSchema }, setFieldSchema] = useState4({
     fieldSchema: getFormatSchema(props?.format)
   });
   const handleValuesChanged = useCallback6((_props) => {
@@ -1462,26 +1325,26 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     onSave
   ]);
   const Custom = useMemo7(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
+    ["format"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
         value: p.name
       })) : []
     }),
-    ["options"]: (props2) => /* @__PURE__ */ React14.createElement(SelectOptionInput, props2)
+    ["options"]: (props2) => /* @__PURE__ */ React13.createElement(SelectOptionInput, props2)
   }), [
     t,
     schemas,
@@ -1489,17 +1352,17 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   ]);
   const propIsNotType = useCallback6((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
-    log3.warn("invalid format", {
+    log2.warn("invalid format", {
       props
     }, {
-      F: __dxlog_file4,
+      F: __dxlog_file3,
       L: 174,
       S: void 0,
       C: (f, a) => f(...a)
     });
     return null;
   }
-  return /* @__PURE__ */ React14.createElement(Form, {
+  return /* @__PURE__ */ React13.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
@@ -1518,14 +1381,14 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React15, { useCallback as useCallback7, useMemo as useMemo8, useState as useState6 } from "react";
+import React14, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
 import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
 import { IconButton as IconButton4, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
-import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
+import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = S2.Struct({
   name: S2.String.annotations({
@@ -1541,7 +1404,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view
   ]);
-  const [field, setField] = useState6();
+  const [field, setField] = useState5();
   const viewValues = useMemo8(() => {
     return {
       name: view.name,
@@ -1557,7 +1420,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, []);
   const handleAdd = useCallback7(() => {
     invariant3(!schema.readonly, void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file4,
       L: 76,
       S: void 0,
       A: [
@@ -1573,7 +1436,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   const handleUpdate = useCallback7(({ name, typename }) => {
     invariant3(!schema.readonly, void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file4,
       L: 83,
       S: void 0,
       A: [
@@ -1596,7 +1459,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   const handleDelete = useCallback7((fieldId) => {
     invariant3(!schema.readonly, void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file4,
       L: 99,
       S: void 0,
       A: [
@@ -1615,7 +1478,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   const handleMove = useCallback7((fromIndex, toIndex) => {
     invariant3(!schema.readonly, void 0, {
-      F: __dxlog_file5,
+      F: __dxlog_file4,
       L: 111,
       S: void 0,
       A: [
@@ -1647,77 +1510,77 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     projection
   ]);
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     role: "none",
-    className: mx9("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ React15.createElement(Form, {
+    className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ React14.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
     onSave: schema.readonly ? void 0 : handleUpdate
-  }), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("div", {
+  }), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React15.createElement("label", {
-    className: mx9(inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
+  }, /* @__PURE__ */ React14.createElement("label", {
+    className: mx8(inputTextLabel)
+  }, t("fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: view.fields,
     isItem: S2.is(FieldSchema),
     getId: (field2) => field2.id,
     onMove: schema.readonly ? void 0 : handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ React14.createElement(React14.Fragment, null, showHeading && /* @__PURE__ */ React14.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ React15.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ React14.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ React15.createElement(List2.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: field2.id,
     item: field2,
-    classNames: mx9(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
+    classNames: mx8(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React14.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ React15.createElement("div", {
+  }, field2.path), /* @__PURE__ */ React14.createElement("div", {
     className: "flex items-center gap-2 -ml-4"
-  }, /* @__PURE__ */ React15.createElement(List2.ItemButton, {
+  }, /* @__PURE__ */ React14.createElement(List2.ItemButton, {
     icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleHide(field2.id)
-  }), !schema.readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
+  }), !schema.readonly && /* @__PURE__ */ React14.createElement(List2.ItemDeleteButton, {
     icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleDelete(field2.id)
-  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("div", {
+  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React15.createElement("label", {
-    className: mx9(inputTextLabel)
-  }, t("hidden fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
+  }, /* @__PURE__ */ React14.createElement("label", {
+    className: mx8(inputTextLabel)
+  }, t("hidden fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: hiddenProperties,
     isItem: (item) => typeof item === "string",
     getId: (property) => property
-  }, ({ items: properties }) => /* @__PURE__ */ React15.createElement("div", {
+  }, ({ items: properties }) => /* @__PURE__ */ React14.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, properties?.map((property) => /* @__PURE__ */ React15.createElement(List2.Item, {
+  }, properties?.map((property) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: property,
     item: property,
-    classNames: mx9(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
+    classNames: mx8(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React14.createElement(List2.ItemButton, {
     icon: "ph--eye--regular",
     onClick: () => handleShow(property)
-  }))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ React14.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ React15.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ React14.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ React15.createElement(IconButton4, {
+  }, /* @__PURE__ */ React14.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: schema.readonly ? void 0 : handleAdd,
@@ -1902,25 +1765,13 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
       });
     }
     case FormatEnum4.Date: {
-      try {
-        return formatDate(new Date(value), "yyyy-MM-dd");
-      } catch (error) {
-        return "Invalid Date";
-      }
+      return formatDate(new Date(value), "yyyy-MM-dd");
     }
     case FormatEnum4.Time: {
-      try {
-        return formatDate(new Date(value), "HH:mm:ss");
-      } catch (error) {
-        return "Invalid Time";
-      }
+      return formatDate(new Date(value), "HH:mm:ss");
     }
     case FormatEnum4.DateTime: {
-      try {
-        return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
-      } catch (error) {
-        return "Invalid DateTime";
-      }
+      return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
     }
     case FormatEnum4.GeoPoint: {
       if (value === null || value === void 0) {
@@ -2000,10 +1851,8 @@ export {
   ControlFrame,
   ControlFrameItem,
   ControlGroup,
-  ControlGroupButton,
   ControlItem,
   ControlItemInput,
-  ControlPage,
   ControlSection,
   ControlSectionHeading,
   DeprecatedFormContainer,