@dxos/react-ui-form 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

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

@@ -183,8 +183,8 @@ 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 { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
+import React14, { useCallback as useCallback8, useEffect as useEffect8, useMemo as useMemo7, useState as useState5 } from "react";
+import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo-schema";
 import { log as log3 } from "@dxos/log";
 import { useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
@@ -203,15 +203,15 @@ var InputHeader = ({ children, error }) => {
   return /* @__PURE__ */ React3.createElement("div", {
     role: "none",
     className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-    asChild: true
+  }, children, error && /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: error,
+    side: "bottom"
   }, /* @__PURE__ */ React3.createElement(Icon, {
     icon: "ph--warning--regular",
     size: 4,
     classNames: errorText
-  })), /* @__PURE__ */ React3.createElement(Tooltip.Content, {
-    side: "bottom"
-  }, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null), error)));
+  })));
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
@@ -548,23 +548,28 @@ var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, on
 };
 var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
+  const value = getValue3();
+  const handleValueChange = useCallback3((value2) => onValueChange(type, value2), [
+    type,
+    onValueChange
+  ]);
   return /* @__PURE__ */ React7.createElement(Input6.Root, {
     validationValence: status
   }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Select.Root, {
-    value: getValue3(),
-    onValueChange: (value) => onValueChange(type, value)
+    value,
+    onValueChange: handleValueChange
   }, /* @__PURE__ */ React7.createElement(Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ React7.createElement(Select.Portal, null, /* @__PURE__ */ React7.createElement(Select.Content, null, /* @__PURE__ */ React7.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+  }), /* @__PURE__ */ React7.createElement(Select.Portal, null, /* @__PURE__ */ React7.createElement(Select.Content, null, /* @__PURE__ */ React7.createElement(Select.Viewport, null, options?.map(({ value: value2, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
     /* @__PURE__ */ React7.createElement(Select.Option, {
-      key: String(value),
-      value: String(value)
-    }, label2 ?? String(value))
+      key: String(value2),
+      value: String(value2)
+    }, label2 ?? String(value2))
   )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
 };
 var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
@@ -617,13 +622,13 @@ import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@d
 import { mx as mx5 } 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";
+import React8, { createContext, useContext, useEffect as useEffect6, useMemo as useMemo3 } 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/hooks/useForm.ts
-import { SchemaAST as AST } from "effect";
+import { SchemaAST } from "effect";
 import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
 import { getValue, setValue } from "@dxos/echo-schema";
 import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
@@ -632,12 +637,12 @@ 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, {
+  invariant(SchemaAST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
     L: 93,
     S: void 0,
     A: [
-      "AST.isTypeLiteral(schema.ast)",
+      "SchemaAST.isTypeLiteral(schema.ast)",
       ""
     ]
   });
@@ -738,7 +743,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 212,
+        L: 213,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -809,7 +814,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 274,
+    L: 275,
     S: void 0,
     A: [
       "obj",
@@ -831,6 +836,81 @@ var flatMap = (errors) => {
   }, {});
 };
 
+// packages/ui/react-ui-form/src/hooks/useRefQueryLookupHandler.ts
+import { useCallback as useCallback5 } from "react";
+import { getDXN } from "@dxos/echo-schema";
+import { Filter } from "@dxos/react-client/echo";
+import { isNonNullable } from "@dxos/util";
+var useRefQueryLookupHandler = ({ space }) => {
+  const handleRefQueryLookup = useCallback5(async (typeInfo) => {
+    if (!space) {
+      return [];
+    }
+    const query = space.db.query(Filter.typename(typeInfo.typename));
+    const { objects } = await query.run();
+    return objects.map((object) => {
+      const dxn = getDXN(object);
+      if (!dxn) {
+        return void 0;
+      }
+      const item = {
+        dxn,
+        label: object?.name ?? object?.id ?? ""
+      };
+      return item;
+    }).filter(isNonNullable);
+  }, [
+    space
+  ]);
+  return handleRefQueryLookup;
+};
+
+// packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts
+import { useEffect as useEffect5, useState as useState4 } from "react";
+import { log as log2 } from "@dxos/log";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
+var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
+  const [options, setOptions] = useState4([]);
+  const [loading, setLoading] = useState4(false);
+  useEffect5(() => {
+    if (!refTypeInfo || !onQueryRefOptions) {
+      return;
+    }
+    const fetchOptions = async () => {
+      setLoading(true);
+      try {
+        const fetchedOptions = await onQueryRefOptions(refTypeInfo);
+        setOptions(fetchedOptions.map((option) => {
+          const dxn = option.dxn.toString();
+          return {
+            id: dxn,
+            label: option.label ?? dxn,
+            hue: "neutral"
+          };
+        }));
+      } catch (error) {
+        log2.error("Failed to fetch ref options:", error, {
+          F: __dxlog_file2,
+          L: 42,
+          S: void 0,
+          C: (f, a) => f(...a)
+        });
+        setOptions([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+    void fetchOptions();
+  }, [
+    refTypeInfo,
+    onQueryRefOptions
+  ]);
+  return {
+    options,
+    loading
+  };
+};
+
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
 var FormContext = /* @__PURE__ */ createContext(void 0);
 var useFormContext = () => {
@@ -861,7 +941,7 @@ var useInputProps = (path = []) => {
 };
 var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
   const form = useForm(formOptions);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!formRef?.current) {
       return;
     }
@@ -869,7 +949,7 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
       const keyIsEnter = event.key === "Enter";
       const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
       const inputIsTextarea = event.target.tagName.toLowerCase() === "textarea";
-      const inputOptOut = event.target.hasAttribute("data-no-submit");
+      const inputOptOut = event.target.hasAttribute("data-no-submit") || event.target.closest("[data-no-submit]") !== null;
       const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
       const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
       if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
@@ -922,252 +1002,587 @@ var FormActions = ({ onCancel, readonly }) => {
 };
 
 // packages/ui/react-ui-form/src/components/Form/FormContent.tsx
-import { pipe as pipe2 } from "effect";
+import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
 import React12, { 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 { createJsonPath as createJsonPath3, findNode as findNode3, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
 import { mx as mx7 } 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 { SchemaAST as SchemaAST3, pipe } from "effect";
 import { capitalize } from "effect/String";
-import React10, { useCallback as useCallback5, useMemo as useMemo4 } from "react";
-import { AST as AST2 } from "@dxos/echo-schema";
-import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
+import React10, { useCallback as useCallback6 } from "react";
+import { findNode as findNode2, 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 { 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 ?? []) ?? [];
-  invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
-    F: __dxlog_file2,
-    L: 39,
-    S: void 0,
-    A: [
-      "Array.isArray(values)",
-      "`Values at path ${path?.join('.')} must be an array.`"
-    ]
-  });
-  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 = useMemo4(() => {
-    if (type === "object" && elementType) {
-      return getDefaultObjectValue(elementType);
-    } else {
-      return SimpleType.getDefaultValue(type);
-    }
-  }, [
-    type,
-    elementType
-  ]);
-  const handleAdd = useCallback5(() => {
-    inputProps.onValueChange(type, [
-      ...values,
-      newValue
-    ]);
-  }, [
-    type,
-    elementType,
-    inputProps,
-    newValue,
-    values
-  ]);
-  const handleRemove = useCallback5((index) => {
-    const newValues = values.filter((_, i) => i !== index);
-    inputProps.onValueChange(type, newValues);
-  }, [
-    type,
-    inputProps,
-    values
-  ]);
-  if (!elementType) {
-    return null;
-  }
-  return /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: mx6(padding)
-  }, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ React10.createElement("div", {
-    key: index,
-    role: "none",
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "flex-1"
-  }, /* @__PURE__ */ React10.createElement(FormField, {
-    property: {
-      ...property,
-      array: false,
-      ast: elementType
-    },
-    path: [
-      ...path ?? [],
-      index
-    ],
-    readonly,
-    inline: true,
-    Custom,
-    lookupComponent
-  })), /* @__PURE__ */ React10.createElement(IconButton3, {
-    icon: "ph--trash--regular",
-    iconOnly: true,
-    label: t("button remove"),
-    onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ React10.createElement(IconButton3, {
-    icon: "ph--plus--regular",
-    iconOnly: true,
-    label: t("button add"),
-    onClick: handleAdd
-  })));
-};
 
-// 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;
+// packages/ui/react-ui-form/src/util/field.ts
+import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
+var parseValue = ({ type, format, value }) => {
+  if (value === void 0 || value === null || value === "") {
+    return void 0;
   }
-  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 parseScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum.Boolean: {
+        if (typeof value === "string") {
+          const lowercaseValue = value.toLowerCase();
+          if (lowercaseValue === "0" || lowercaseValue === "false") {
+            return false;
+          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
+            return true;
+          }
+        }
+        return Boolean(value);
       }
-    };
-    const handleGetValue2 = () => {
-      const formValue = getValue3();
-      if (typeof formValue === "string") {
-        return formValue;
+      case TypeEnum.Number: {
+        const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
+        const num = Number(cleaned);
+        return Number.isNaN(num) ? null : num;
       }
-      if (formValue instanceof RefImpl) {
-        return formValue.dxn.toString();
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value);
+      default: {
+        return value;
       }
-      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) => {
-  switch (format) {
-    case FormatEnum.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum.Markdown:
-      return MarkdownInput;
+  if (!format) {
+    return parseScalar(type);
   }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
+  switch (format) {
+    case FormatEnum.Boolean:
+      return parseScalar(TypeEnum.Boolean);
+    case FormatEnum.Number:
+    case FormatEnum.Percent:
+    case FormatEnum.Currency:
+      return parseScalar(TypeEnum.Number);
+    case FormatEnum.String:
+    case FormatEnum.Markdown: {
+      return parseScalar(TypeEnum.String);
+    }
+    case FormatEnum.Ref:
+      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
+    case FormatEnum.DateTime:
+    case FormatEnum.Date:
+    case FormatEnum.Time:
+    case FormatEnum.Timestamp: {
+      const date = new Date(value);
+      return isNaN(date.getTime()) ? null : date;
+    }
+    case FormatEnum.GeoPoint: {
+      if (typeof value === "string") {
+        const cleaned = value.replace(/[^0-9.,-]+/g, "");
+        const parts = cleaned.split(",");
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation2.toGeoPoint({
+              latitude: lat,
+              longitude: long
+            });
+          }
+        }
+      }
+      return [
+        0,
+        0
+      ];
+    }
+    default: {
+      return value;
+    }
   }
 };
-
-// packages/ui/react-ui-form/src/components/Form/FormContent.tsx
+var cellClassesForFieldType = ({ type, format }) => {
+  if (!format) {
+    switch (type) {
+      case TypeEnum.Number:
+        return [
+          "text-right",
+          "font-mono"
+        ];
+      case TypeEnum.Boolean:
+        return [
+          "text-right",
+          "font-mono"
+        ];
+      case TypeEnum.String:
+        return void 0;
+      case TypeEnum.Ref:
+        return void 0;
+      default: {
+        return void 0;
+      }
+    }
+  }
+  switch (format) {
+    case FormatEnum.Markdown:
+      return void 0;
+    case FormatEnum.Time:
+    case FormatEnum.Timestamp:
+    case FormatEnum.DateTime:
+    case FormatEnum.Date:
+    case FormatEnum.Duration:
+      return [
+        "font-mono",
+        "text-right"
+      ];
+    case FormatEnum.Currency:
+      return [
+        "text-right"
+      ];
+    case FormatEnum.JSON:
+    case FormatEnum.DID:
+      return [
+        "font-mono"
+      ];
+    default:
+      return void 0;
+  }
+};
+var pathNotUniqueError = (path) => ({
+  path: "path",
+  message: `'${path}' is already present`
+});
+
+// packages/ui/react-ui-form/src/util/formatting.ts
+import { format as formatDate } from "date-fns/format";
+import { FormatEnum as FormatEnum2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
+var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
+  const formatScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum2.Boolean:
+        return value.toLocaleString().toUpperCase();
+      case TypeEnum2.Number:
+        return value.toLocaleString(locale);
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value);
+      default: {
+        return String(value);
+      }
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  switch (format) {
+    case FormatEnum2.Boolean: {
+      return formatScalar(TypeEnum2.Boolean);
+    }
+    case FormatEnum2.Number: {
+      return formatScalar(TypeEnum2.Number);
+    }
+    case FormatEnum2.String:
+    case FormatEnum2.Ref: {
+      return formatScalar(TypeEnum2.String);
+    }
+    case FormatEnum2.Percent: {
+      return `${value * 100}%`;
+    }
+    case FormatEnum2.Currency: {
+      return value.toLocaleString(locale, {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    }
+    case FormatEnum2.Date: {
+      try {
+        return formatDate(new Date(value), "yyyy-MM-dd");
+      } catch (error) {
+        return "Invalid Date";
+      }
+    }
+    case FormatEnum2.Time: {
+      try {
+        return formatDate(new Date(value), "HH:mm:ss");
+      } catch (error) {
+        return "Invalid Time";
+      }
+    }
+    case FormatEnum2.DateTime: {
+      try {
+        return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
+      } catch (error) {
+        return "Invalid DateTime";
+      }
+    }
+    case FormatEnum2.GeoPoint: {
+      if (value === null || value === void 0) {
+        return "";
+      }
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
+        return `${latitude},${longitude}`;
+      }
+      return String(value);
+    }
+    default: {
+      if (value === null || value === "undefined") {
+        return "";
+      }
+      return String(value);
+    }
+  }
+};
+var formatForEditing = ({ type, format, value, locale = void 0 }) => {
+  const formatScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum2.Boolean:
+      case TypeEnum2.Number:
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value);
+      default:
+        return String(value);
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  switch (format) {
+    case FormatEnum2.Boolean:
+    case FormatEnum2.Number:
+    case FormatEnum2.String:
+    case FormatEnum2.Ref: {
+      return formatScalar(type);
+    }
+    case FormatEnum2.Percent: {
+      return String(value * 100);
+    }
+    case FormatEnum2.Currency: {
+      return String(value);
+    }
+    case FormatEnum2.DateTime: {
+      const date = new Date(value);
+      return date.toISOString();
+    }
+    case FormatEnum2.Date: {
+      const date = new Date(value);
+      return date.toISOString().split("T")[0];
+    }
+    case FormatEnum2.Time: {
+      const date = new Date(value);
+      return date.toISOString().split("T")[1].split(".")[0];
+    }
+    case FormatEnum2.GeoPoint: {
+      if (value === null || value === void 0) {
+        return "";
+      }
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
+        return `${latitude},${longitude}`;
+      }
+      return String(value);
+    }
+    default: {
+      return String(value);
+    }
+  }
+};
+
+// packages/ui/react-ui-form/src/util/refs.ts
+import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo-schema";
+import { findAnnotation } from "@dxos/effect";
+
+// packages/ui/react-ui-form/src/util/schema.ts
+import { SchemaAST as SchemaAST2 } from "effect";
+import { findNode } from "@dxos/effect";
+var findArrayElementType = (ast) => {
+  const tupleType = findNode(ast, SchemaAST2.isTupleType);
+  const elementType = tupleType?.rest[0]?.type;
+  return elementType;
+};
+
+// packages/ui/react-ui-form/src/util/refs.ts
+var getRefProps = (property) => {
+  const { ast, format, array } = property;
+  if (format === FormatEnum3.Ref) {
+    return {
+      ast,
+      isArray: false
+    };
+  }
+  if (array) {
+    const elementType = findArrayElementType(ast);
+    if (elementType) {
+      const annotation = findAnnotation(elementType, ReferenceAnnotationId);
+      if (annotation) {
+        return {
+          ast: elementType,
+          isArray: true
+        };
+      }
+    }
+  }
+  return void 0;
+};
+
+// packages/ui/react-ui-form/src/components/Form/ArrayField.tsx
+var __dxlog_file3 = "/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 ?? []) ?? [];
+  invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
+    F: __dxlog_file3,
+    L: 39,
+    S: void 0,
+    A: [
+      "Array.isArray(values)",
+      "`Values at path ${path?.join('.')} must be an array.`"
+    ]
+  });
+  const label = title ?? pipe(name, capitalize);
+  const elementType = findArrayElementType(ast);
+  const getDefaultObjectValue = (typeNode) => {
+    const baseNode = findNode2(typeNode, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode2(typeNode, SchemaAST3.isTypeLiteral);
+    if (!typeLiteral) {
+      return {};
+    }
+    return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
+      prop.name,
+      prop.defaultValue
+    ]));
+  };
+  const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
+  const handleAdd = useCallback6(() => {
+    inputProps.onValueChange(type, [
+      ...values,
+      getDefaultValue()
+    ]);
+  }, [
+    type,
+    elementType,
+    inputProps,
+    values
+  ]);
+  const handleRemove = useCallback6((index) => {
+    const newValues = values.filter((_, i) => i !== index);
+    inputProps.onValueChange(type, newValues);
+  }, [
+    type,
+    inputProps,
+    values
+  ]);
+  if (!elementType) {
+    return null;
+  }
+  return /* @__PURE__ */ React10.createElement("div", {
+    role: "none",
+    className: mx6(padding)
+  }, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-1"
+  }, values.map((_value, index) => /* @__PURE__ */ React10.createElement("div", {
+    key: index,
+    role: "none",
+    className: "flex items-center gap-1"
+  }, /* @__PURE__ */ React10.createElement("div", {
+    role: "none",
+    className: "flex-1"
+  }, /* @__PURE__ */ React10.createElement(FormField, {
+    property: {
+      ...property,
+      array: false,
+      ast: elementType
+    },
+    path: [
+      ...path ?? [],
+      index
+    ],
+    readonly,
+    inline: true,
+    Custom,
+    lookupComponent
+  })), /* @__PURE__ */ React10.createElement(IconButton3, {
+    icon: "ph--trash--regular",
+    iconOnly: true,
+    label: t("button remove"),
+    onClick: () => handleRemove(index)
+  })))), /* @__PURE__ */ React10.createElement("div", {
+    role: "none",
+    className: "flex justify-between items-center plb-1"
+  }, /* @__PURE__ */ React10.createElement(IconButton3, {
+    icon: "ph--plus--regular",
+    iconOnly: true,
+    label: t("button add"),
+    onClick: handleAdd
+  })));
+};
+
+// packages/ui/react-ui-form/src/components/Form/RefField.tsx
+import React11, { useCallback as useCallback7, useMemo as useMemo4 } from "react";
+import { Expando, getTypeAnnotation, Ref, ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo-schema";
+import { findAnnotation as findAnnotation2 } from "@dxos/effect";
+import { DXN } from "@dxos/keys";
+import { Input as Input7 } from "@dxos/react-ui";
+import { TagPicker } from "@dxos/react-ui-tag-picker";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
+var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, onValueChange, ...restInputProps }) => {
+  const refTypeInfo = useMemo4(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
+    ast
+  ]);
+  const { options: availableOptions, loading: _loading } = useQueryRefOptions({
+    refTypeInfo,
+    onQueryRefOptions
+  });
+  if (refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
+    return /* @__PURE__ */ React11.createElement(RefFieldFallback, {
+      type,
+      label,
+      placeholder,
+      disabled,
+      inputOnly,
+      getValue: getValue3,
+      onBlur,
+      onValueChange,
+      ...restInputProps
+    });
+  }
+  const handleGetValue = useCallback7(() => {
+    const formValue = getValue3();
+    const unknownToRefOption = (val) => {
+      if (Ref.isRef(val)) {
+        const dxnString = val.dxn.toString();
+        const matchingOption = availableOptions.find((option2) => option2.id === dxnString);
+        if (matchingOption) {
+          return matchingOption;
+        }
+      }
+      return void 0;
+    };
+    if (array && Array.isArray(formValue)) {
+      return formValue.map(unknownToRefOption).filter(isNonNullable2) ?? [];
+    }
+    const option = unknownToRefOption(formValue);
+    if (option) {
+      return [
+        option
+      ];
+    }
+    return [];
+  }, [
+    getValue3,
+    availableOptions,
+    array
+  ]);
+  const handleSearch = useCallback7((text, ids) => availableOptions.filter((option) => !ids.includes(option.id)).filter((option) => option.label.toLowerCase().includes(text.toLowerCase())).map((option) => ({
+    id: option.id,
+    label: option.label,
+    hue: option.hue
+  })), [
+    availableOptions
+  ]);
+  const handleUpdate = useCallback7((ids) => {
+    if (ids.length === 0) {
+      onValueChange("object", void 0);
+      return;
+    }
+    const refs = ids.map((id) => {
+      const item = availableOptions.find((option) => option.id === id);
+      if (item) {
+        const dxn = DXN.parse(item.id);
+        return Ref.fromDXN(dxn);
+      }
+      return null;
+    }).filter(isNonNullable2);
+    if (array) {
+      onValueChange("object", refs);
+    } else {
+      onValueChange("object", refs[0]);
+    }
+  }, [
+    availableOptions,
+    array,
+    onValueChange
+  ]);
+  const tagPickerMode = useMemo4(() => array ? "multi-select" : "single-select", [
+    array
+  ]);
+  if (!refTypeInfo) {
+    return null;
+  }
+  const { status, error } = restInputProps.getStatus();
+  return /* @__PURE__ */ React11.createElement(Input7.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React11.createElement(Input7.Label, null, label)), /* @__PURE__ */ React11.createElement("div", {
+    "data-no-submit": true
+  }, /* @__PURE__ */ React11.createElement(TagPicker, {
+    items: handleGetValue(),
+    mode: tagPickerMode,
+    onBlur: (event) => onBlur(event),
+    onUpdate: handleUpdate,
+    onSearch: handleSearch,
+    classNames: "rounded-sm bg-input p-1.5"
+  })), inputOnly && /* @__PURE__ */ React11.createElement(Input7.DescriptionAndValidation, null, error));
+};
+var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
+  const handleOnValueChange = (_type, dxnString) => {
+    const dxn = DXN.tryParse(dxnString);
+    if (dxn) {
+      onValueChange?.("object", Ref.fromDXN(dxn));
+    } else if (dxnString === "") {
+      onValueChange?.("object", void 0);
+    } else {
+      onValueChange?.("string", dxnString);
+    }
+  };
+  const handleGetValue = () => {
+    const formValue = getValue3();
+    if (typeof formValue === "string") {
+      return formValue;
+    }
+    if (Ref.isRef(formValue)) {
+      return formValue.dxn.toString();
+    }
+    return void 0;
+  };
+  return /* @__PURE__ */ React11.createElement(TextInput, {
+    type,
+    label,
+    disabled,
+    placeholder,
+    inputOnly,
+    getValue: handleGetValue,
+    onValueChange: handleOnValueChange,
+    ...restInputProps
+  });
+};
+
+// packages/ui/react-ui-form/src/components/Form/factory.tsx
+import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case FormatEnum4.GeoPoint:
+      return GeoPointInput;
+    case FormatEnum4.Markdown:
+      return MarkdownInput;
+  }
+  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, onQueryRefOptions, lookupComponent, Custom }) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
@@ -1181,7 +1596,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
   ]);
   const FoundComponent = lookupComponent?.({
     prop: name,
-    schema: S.make(ast),
+    schema: Schema.make(ast),
     inputProps: {
       type,
       format,
@@ -1209,6 +1624,21 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       ...inputProps
     });
   }
+  const refProps = getRefProps(property);
+  if (refProps) {
+    return /* @__PURE__ */ React12.createElement(RefField, {
+      ast: refProps.ast,
+      array: refProps.isArray,
+      type,
+      format,
+      label,
+      placeholder,
+      disabled: readonly,
+      inputOnly: inline,
+      onQueryRefOptions,
+      ...inputProps
+    });
+  }
   if (array) {
     return /* @__PURE__ */ React12.createElement(ArrayField, {
       property,
@@ -1249,28 +1679,16 @@ 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);
+    const baseNode = findNode3(ast, isDiscriminatedUnion2);
+    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode3(ast, SchemaAST4.isTypeLiteral);
     if (typeLiteral) {
       return /* @__PURE__ */ React12.createElement("div", {
         role: "none"
       }, !inline && /* @__PURE__ */ React12.createElement("h3", {
         className: "text-lg mbs-2 mbe-1"
       }, label), /* @__PURE__ */ React12.createElement(FormFields, {
-        schema: S.make(typeLiteral),
+        schema: Schema.make(typeLiteral),
         path,
         readonly,
         onQueryRefOptions,
@@ -1396,7 +1814,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   const [{ fieldSchema }, setFieldSchema] = useState5({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const handleValuesChanged = useCallback6((_props) => {
+  const handleValuesChanged = useCallback8((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = getFormatSchema(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -1431,7 +1849,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = useCallback6(({ property }) => {
+  const handleValidate = useCallback8(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -1444,7 +1862,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     view.fields,
     field
   ]);
-  const handleSave = useCallback6((props2) => {
+  const handleSave = useCallback8((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
@@ -1455,7 +1873,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     field,
     onSave
   ]);
-  const handleCancel = useCallback6(() => {
+  const handleCancel = useCallback8(() => {
     requestAnimationFrame(() => onCancel?.());
     onSave();
   }, [
@@ -1464,7 +1882,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   const Custom = useMemo7(() => ({
     ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
       ...props2,
-      options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
+      options: FormatEnums.filter((value) => value !== FormatEnum5.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
@@ -1487,7 +1905,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = useCallback6((props2) => props2.filter((p) => p.name !== "type"), []);
+  const propIsNotType = useCallback8((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     log3.warn("invalid format", {
       props
@@ -1518,8 +1936,9 @@ 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 { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
+import { Schema as Schema2, SchemaAST as SchemaAST5 } from "effect";
+import React15, { useCallback as useCallback9, useMemo as useMemo8, useState as useState6 } from "react";
+import { Format, isMutable, toJsonSchema } 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";
@@ -1527,21 +1946,22 @@ import { ghostHover, inputTextLabel, mx as mx9 } 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 grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
-var ViewMetaSchema = S2.Struct({
-  name: S2.String.annotations({
-    [AST4.TitleAnnotationId]: "View"
+var ViewMetaSchema = Schema2.Struct({
+  name: Schema2.String.annotations({
+    [SchemaAST5.TitleAnnotationId]: "View"
   }),
   typename: Format.URL.annotations({
-    [AST4.TitleAnnotationId]: "Typename"
+    [SchemaAST5.TitleAnnotationId]: "Typename"
   })
-}).pipe(S2.mutable);
+}).pipe(Schema2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = useTranslation7(translationKey);
-  const projection = useMemo8(() => new ViewProjection(schema.jsonSchema, view), [
+  const projection = useMemo8(() => new ViewProjection(toJsonSchema(schema), view), [
     schema,
     view
   ]);
   const [field, setField] = useState6();
+  const immutable = readonly || !isMutable(schema);
   const viewValues = useMemo8(() => {
     return {
       name: view.name,
@@ -1552,16 +1972,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleSelect = useCallback7((field2) => {
+  const handleSelect = useCallback9((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = useCallback7(() => {
-    invariant3(!schema.readonly, void 0, {
+  const handleAdd = useCallback9(() => {
+    invariant3(!immutable, void 0, {
       F: __dxlog_file5,
-      L: 76,
+      L: 78,
       S: void 0,
       A: [
-        "!schema.readonly",
+        "!immutable",
         ""
       ]
     });
@@ -1571,13 +1991,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view
   ]);
-  const handleUpdate = useCallback7(({ name, typename }) => {
-    invariant3(!schema.readonly, void 0, {
+  const handleUpdate = useCallback9(({ name, typename }) => {
+    invariant3(!immutable, void 0, {
       F: __dxlog_file5,
-      L: 83,
+      L: 85,
       S: void 0,
       A: [
-        "!schema.readonly",
+        "!immutable",
         ""
       ]
     });
@@ -1594,13 +2014,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     view,
     onTypenameChanged
   ]);
-  const handleDelete = useCallback7((fieldId) => {
-    invariant3(!schema.readonly, void 0, {
+  const handleDelete = useCallback9((fieldId) => {
+    invariant3(!immutable, void 0, {
       F: __dxlog_file5,
-      L: 99,
+      L: 101,
       S: void 0,
       A: [
-        "!schema.readonly",
+        "!immutable",
         ""
       ]
     });
@@ -1613,13 +2033,13 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     field,
     onDelete
   ]);
-  const handleMove = useCallback7((fromIndex, toIndex) => {
-    invariant3(!schema.readonly, void 0, {
+  const handleMove = useCallback9((fromIndex, toIndex) => {
+    invariant3(!immutable, void 0, {
       F: __dxlog_file5,
-      L: 111,
+      L: 113,
       S: void 0,
       A: [
-        "!schema.readonly",
+        "!immutable",
         ""
       ]
     });
@@ -1633,15 +2053,15 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     view.fields
   ]);
-  const handleClose = useCallback7(() => setField(void 0), []);
+  const handleClose = useCallback9(() => setField(void 0), []);
   const hiddenProperties = projection.getHiddenProperties();
-  const handleHide = useCallback7((fieldId) => {
+  const handleHide = useCallback9((fieldId) => {
     setField(void 0);
     projection.hideFieldProjection(fieldId);
   }, [
     projection
   ]);
-  const handleShow = useCallback7((property) => {
+  const handleShow = useCallback9((property) => {
     setField(void 0);
     projection.showFieldProjection(property);
   }, [
@@ -1649,22 +2069,26 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   ]);
   return /* @__PURE__ */ React15.createElement("div", {
     role: "none",
-    className: mx9("flex flex-col w-full divide-y divide-separator", classNames)
+    className: mx9("grid grid-rows-[1fr_1fr] min-bs-0", classNames)
   }, /* @__PURE__ */ React15.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
-    onSave: schema.readonly ? void 0 : handleUpdate
-  }), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("div", {
+    onSave: immutable ? void 0 : handleUpdate,
+    classNames: "min-bs-0 overflow-y-auto"
+  }), /* @__PURE__ */ React15.createElement("div", {
+    role: "none",
+    className: "border-bs border-separator min-bs-0 overflow-y-auto"
+  }, /* @__PURE__ */ React15.createElement("div", {
     role: "none",
     className: "p-2"
   }, /* @__PURE__ */ React15.createElement("label", {
     className: mx9(inputTextLabel)
   }, t("fields label"))), /* @__PURE__ */ React15.createElement(List2.Root, {
     items: view.fields,
-    isItem: S2.is(FieldSchema),
+    isItem: Schema2.is(FieldSchema),
     getId: (field2) => field2.id,
-    onMove: schema.readonly ? void 0 : handleMove
+    onMove: immutable ? void 0 : handleMove
   }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("div", {
     role: "heading",
     className: grid
@@ -1685,7 +2109,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleHide(field2.id)
-  }), !schema.readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
+  }), !immutable && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
     icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleDelete(field2.id)
@@ -1720,281 +2144,11 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, /* @__PURE__ */ React15.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("button add property"),
-    onClick: schema.readonly ? void 0 : handleAdd,
+    onClick: immutable ? void 0 : handleAdd,
     // TODO(burdon): Show field limit in ux (not tooltip).
     disabled: view.fields.length >= VIEW_FIELD_LIMIT
   })));
 };
-
-// packages/ui/react-ui-form/src/util/field.ts
-import { FormatEnum as FormatEnum3, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
-var parseValue = ({ type, format, value }) => {
-  if (value === void 0 || value === null || value === "") {
-    return void 0;
-  }
-  const parseScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum.Boolean: {
-        if (typeof value === "string") {
-          const lowercaseValue = value.toLowerCase();
-          if (lowercaseValue === "0" || lowercaseValue === "false") {
-            return false;
-          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
-            return true;
-          }
-        }
-        return Boolean(value);
-      }
-      case TypeEnum.Number: {
-        const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
-        const num = Number(cleaned);
-        return Number.isNaN(num) ? null : num;
-      }
-      case TypeEnum.String:
-      case TypeEnum.Ref:
-        return String(value);
-      default: {
-        return value;
-      }
-    }
-  };
-  if (!format) {
-    return parseScalar(type);
-  }
-  switch (format) {
-    case FormatEnum3.Boolean:
-      return parseScalar(TypeEnum.Boolean);
-    case FormatEnum3.Number:
-    case FormatEnum3.Percent:
-    case FormatEnum3.Currency:
-      return parseScalar(TypeEnum.Number);
-    case FormatEnum3.String:
-    case FormatEnum3.Markdown: {
-      return parseScalar(TypeEnum.String);
-    }
-    case FormatEnum3.Ref:
-      throw new Error(`unexpected format: ${FormatEnum3.Ref}`);
-    case FormatEnum3.DateTime:
-    case FormatEnum3.Date:
-    case FormatEnum3.Time:
-    case FormatEnum3.Timestamp: {
-      const date = new Date(value);
-      return isNaN(date.getTime()) ? null : date;
-    }
-    case FormatEnum3.GeoPoint: {
-      if (typeof value === "string") {
-        const cleaned = value.replace(/[^0-9.,-]+/g, "");
-        const parts = cleaned.split(",");
-        if (parts.length === 2) {
-          const lat = parseFloat(parts[0]);
-          const long = parseFloat(parts[1]);
-          if (!isNaN(lat) && !isNaN(long)) {
-            return GeoLocation2.toGeoPoint({
-              latitude: lat,
-              longitude: long
-            });
-          }
-        }
-      }
-      return [
-        0,
-        0
-      ];
-    }
-    default: {
-      return value;
-    }
-  }
-};
-var cellClassesForFieldType = ({ type, format }) => {
-  if (!format) {
-    switch (type) {
-      case TypeEnum.Number:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case TypeEnum.Boolean:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case TypeEnum.String:
-        return void 0;
-      case TypeEnum.Ref:
-        return void 0;
-      default: {
-        return void 0;
-      }
-    }
-  }
-  switch (format) {
-    case FormatEnum3.Markdown:
-      return void 0;
-    case FormatEnum3.Time:
-    case FormatEnum3.Timestamp:
-    case FormatEnum3.DateTime:
-    case FormatEnum3.Date:
-    case FormatEnum3.Duration:
-      return [
-        "font-mono",
-        "text-right"
-      ];
-    case FormatEnum3.Currency:
-      return [
-        "text-right"
-      ];
-    case FormatEnum3.JSON:
-    case FormatEnum3.DID:
-      return [
-        "font-mono"
-      ];
-    default:
-      return void 0;
-  }
-};
-var pathNotUniqueError = (path) => ({
-  path: "path",
-  message: `'${path}' is already present`
-});
-
-// packages/ui/react-ui-form/src/util/formatting.ts
-import { format as formatDate } from "date-fns/format";
-import { FormatEnum as FormatEnum4, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
-var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-        return value.toLocaleString().toUpperCase();
-      case TypeEnum2.Number:
-        return value.toLocaleString(locale);
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value);
-      default: {
-        return String(value);
-      }
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  switch (format) {
-    case FormatEnum4.Boolean: {
-      return formatScalar(TypeEnum2.Boolean);
-    }
-    case FormatEnum4.Number: {
-      return formatScalar(TypeEnum2.Number);
-    }
-    case FormatEnum4.String:
-    case FormatEnum4.Ref: {
-      return formatScalar(TypeEnum2.String);
-    }
-    case FormatEnum4.Percent: {
-      return `${value * 100}%`;
-    }
-    case FormatEnum4.Currency: {
-      return value.toLocaleString(locale, {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      });
-    }
-    case FormatEnum4.Date: {
-      try {
-        return formatDate(new Date(value), "yyyy-MM-dd");
-      } catch (error) {
-        return "Invalid Date";
-      }
-    }
-    case FormatEnum4.Time: {
-      try {
-        return formatDate(new Date(value), "HH:mm:ss");
-      } catch (error) {
-        return "Invalid Time";
-      }
-    }
-    case FormatEnum4.DateTime: {
-      try {
-        return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
-      } catch (error) {
-        return "Invalid DateTime";
-      }
-    }
-    case FormatEnum4.GeoPoint: {
-      if (value === null || value === void 0) {
-        return "";
-      }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
-        return `${latitude},${longitude}`;
-      }
-      return String(value);
-    }
-    default: {
-      if (value === null || value === "undefined") {
-        return "";
-      }
-      return String(value);
-    }
-  }
-};
-var formatForEditing = ({ type, format, value, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-      case TypeEnum2.Number:
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value);
-      default:
-        return String(value);
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  switch (format) {
-    case FormatEnum4.Boolean:
-    case FormatEnum4.Number:
-    case FormatEnum4.String:
-    case FormatEnum4.Ref: {
-      return formatScalar(type);
-    }
-    case FormatEnum4.Percent: {
-      return String(value * 100);
-    }
-    case FormatEnum4.Currency: {
-      return String(value);
-    }
-    case FormatEnum4.DateTime: {
-      const date = new Date(value);
-      return date.toISOString();
-    }
-    case FormatEnum4.Date: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[0];
-    }
-    case FormatEnum4.Time: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[1].split(".")[0];
-    }
-    case FormatEnum4.GeoPoint: {
-      if (value === null || value === void 0) {
-        return "";
-      }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
-        return `${latitude},${longitude}`;
-      }
-      return String(value);
-    }
-    default: {
-      return String(value);
-    }
-  }
-};
 export {
   BooleanInput,
   ControlFrame,
@@ -2022,14 +2176,18 @@ export {
   ViewEditor,
   cellClassesForFieldType,
   controlItemClasses,
+  findArrayElementType,
   formatForDisplay,
   formatForEditing,
+  getRefProps,
   parseValue,
   pathNotUniqueError,
   translations_default as translations,
   useForm,
   useFormContext,
   useFormValues,
-  useInputProps
+  useInputProps,
+  useQueryRefOptions,
+  useRefQueryLookupHandler
 };
 //# sourceMappingURL=index.mjs.map