@dxos/react-ui-form 0.7.5-labs.ea4b4c2 → 0.7.5-labs.f400bbc

package/dist/lib/browser/index.mjs

@@ -29,7 +29,7 @@ var translations_default = [
         "format hostname": "Hostname",
         "format integer": "Integer",
         "format json": "JSON",
-        "format latlng": "LatLng",
+        "format latlng": "Geopoint",
         "format markdown": "Markdown",
         "format percent": "Percent",
         "format ref": "Reference",
@@ -99,14 +99,14 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React12, { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo5, useState as useState3 } from "react";
+import React12, { 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 log2 } from "@dxos/log";
 import { useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
 
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-import React2, { createContext, useContext } from "react";
+import React2, { createContext, useContext, useEffect as useEffect2, useMemo as useMemo2 } from "react";
 import { raise } from "@dxos/debug";
 import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -122,7 +122,7 @@ var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/ho
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
   invariant(AST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
-    L: 91,
+    L: 92,
     S: void 0,
     A: [
       "AST.isTypeLiteral(schema.ast)",
@@ -165,7 +165,12 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
-  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors
+  const formIsValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [
+    errors
+  ]);
+  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors.
   !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
     touched,
     errors,
@@ -198,10 +203,12 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   }, [
     errors
   ]);
-  const getFormValue = (path) => {
+  const getFormValue = useCallback((path) => {
     return getValue(values, createJsonPath(path));
-  };
-  const onValueChange = (path, type, value) => {
+  }, [
+    values
+  ]);
+  const onValueChange = useCallback((path, type, value) => {
     const jsonPath = createJsonPath(path);
     let parsedValue = value;
     try {
@@ -211,7 +218,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 193,
+        L: 202,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -232,7 +239,13 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
         changed
       });
     }
-  };
+  }, [
+    values,
+    onValuesChanged,
+    validate,
+    onValid,
+    changed
+  ]);
   const onTouched = useCallback((path) => {
     const jsonPath = createJsonPath(path);
     setTouched((touched2) => ({
@@ -244,25 +257,39 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     validate,
     values
   ]);
-  return {
+  return useMemo(() => ({
     // State.
     values,
     errors,
     touched,
     changed,
     canSave,
+    formIsValid,
+    // Actions.
     handleSave,
     // Field utils.
     getStatus,
     getValue: getFormValue,
     onValueChange,
     onTouched
-  };
+  }), [
+    values,
+    errors,
+    touched,
+    changed,
+    canSave,
+    formIsValid,
+    handleSave,
+    getStatus,
+    getFormValue,
+    onValueChange,
+    onTouched
+  ]);
 };
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 235,
+    L: 264,
     S: void 0,
     A: [
       "obj",
@@ -296,22 +323,62 @@ var useFormValues = (path = []) => {
 };
 var useInputProps = (path = []) => {
   const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type, value) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path)
-  };
+  const stablePath = useMemo2(() => path, [
+    Array.isArray(path) ? path.join(".") : path
+  ]);
+  return useMemo2(() => ({
+    getStatus: () => getStatus(stablePath),
+    getValue: () => getFormValue(stablePath),
+    onValueChange: (type, value) => onValueChange(stablePath, type, value),
+    onBlur: () => onTouched(stablePath)
+  }), [
+    getStatus,
+    getFormValue,
+    onValueChange,
+    onTouched,
+    stablePath
+  ]);
 };
-var FormProvider = ({ children, ...formOptions }) => {
-  const formHandler = useForm(formOptions);
+var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
+  const form = useForm(formOptions);
+  useEffect2(() => {
+    if (!formRef?.current) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      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 shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
+      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
+      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
+        if (!autoSave && form.canSave) {
+          form.handleSave();
+        }
+        if (autoSave && form.formIsValid) {
+          event.target.blur();
+        }
+      }
+    };
+    const formElement = formRef.current;
+    formElement.addEventListener("keydown", handleKeyDown);
+    return () => formElement.removeEventListener("keydown", handleKeyDown);
+  }, [
+    formRef,
+    form.canSave,
+    form.formIsValid,
+    form.handleSave,
+    autoSave
+  ]);
   return /* @__PURE__ */ React2.createElement(FormContext.Provider, {
-    value: formHandler
+    value: form
   }, children);
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-import React4 from "react";
+import React4, { useCallback as useCallback2, useState as useState2, useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import { GeoLocation } from "@dxos/echo-schema";
 import { Input as Input2, useTranslation } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
@@ -338,51 +405,88 @@ var InputHeader = ({ children, error }) => {
 var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue3() ?? [];
+  const geoPoint = useMemo3(() => getValue3() ?? [
+    0,
+    0
+  ], [
+    getValue3
+  ]);
+  const geoLocation = useMemo3(() => GeoLocation.fromGeoPoint(geoPoint), [
+    geoPoint
+  ]);
+  const [longitudeText, setLongitudeText] = useState2(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState2(geoLocation.latitude?.toString());
+  useEffect3(() => {
+    const location = GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude.toString());
+    setLatitudeText(location.latitude.toString());
+  }, [
+    geoPoint
+  ]);
+  const handleCoordinateChange = useCallback2((coordinateType, setText) => (event) => {
+    const inputText = event.target.value;
+    setText(inputText);
+    if (inputText !== "" && inputText !== "-") {
+      const coord = safeParseFloat(inputText);
+      if (coord !== void 0 && !isNaN(coord)) {
+        const currentLocation = GeoLocation.fromGeoPoint(getValue3() ?? [
+          0,
+          0
+        ]);
+        const newLocation = {
+          ...currentLocation,
+          [coordinateType]: coord
+        };
+        const newValue = GeoLocation.toGeoPoint(newLocation);
+        onValueChange(type, newValue);
+      }
+    }
+  }, [
+    getValue3,
+    onValueChange,
+    type
+  ]);
   return /* @__PURE__ */ React4.createElement(Input2.Root, {
     validationValence: status
   }, /* @__PURE__ */ React4.createElement(InputHeader, {
     error
   }, /* @__PURE__ */ React4.createElement(Input2.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
     className: "grid grid-cols-2 gap-2"
   }, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
-    type: "number",
+    type: "text",
+    pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
-    placeholder: t("placeholder longitude"),
-    value: lng,
-    onChange: (event) => onValueChange(type, [
-      lat,
-      safeParseFloat(event.target.value, 0)
-    ]),
+    placeholder: t("placeholder latitude"),
+    value: latitudeText,
+    onChange: handleCoordinateChange("latitude", setLatitudeText),
     onBlur
   }), /* @__PURE__ */ React4.createElement(Input2.TextInput, {
-    type: "number",
+    type: "text",
+    pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
-    placeholder: t("placeholder latitude"),
-    value: lat,
-    onChange: (event) => onValueChange(type, [
-      safeParseFloat(event.target.value, 0),
-      lng
-    ]),
+    placeholder: t("placeholder longitude"),
+    value: longitudeText,
+    onChange: handleCoordinateChange("longitude", setLongitudeText),
     onBlur
   })));
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/SelectOptionsInput.tsx
-import React5, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
+import React5, { useCallback as useCallback3, useEffect as useEffect4, useState as useState3, useRef } from "react";
 import { PublicKey } from "@dxos/keys";
 import { Icon as Icon2, IconButton, Input as Input3, Tag, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
-import { HuePickerToolbarButton } from "@dxos/react-ui-pickers";
-import { hueTokenThemes, mx as mx2 } from "@dxos/react-ui-theme";
+import { HuePicker } from "@dxos/react-ui-pickers";
+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);
+  const [selected, setSelectedId] = useState3(null);
+  const [isNewOption, setIsNewOption] = useState3(false);
   const inputRef = useRef(null);
   const { t } = useTranslation2(translationKey);
   const { status, error } = getStatus();
   const options = getValue3();
-  useEffect2(() => {
+  useEffect4(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -393,16 +497,15 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
   ]);
   const randomHue = () => {
     const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const hueKeys = Object.keys(hueTokenThemes);
-    const unusedHues = hueKeys.filter((hue) => !usedHues.has(hue));
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
     if (unusedHues.length > 0) {
       return unusedHues[Math.floor(Math.random() * unusedHues.length)];
     }
     const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = hueKeys.filter((hue) => !lastThree.has(hue));
-    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hueKeys[Math.floor(Math.random() * hueKeys.length)];
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
+    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
   };
-  const handleAdd = useCallback2(() => {
+  const handleAdd = useCallback3(() => {
     const newId = PublicKey.random().truncate();
     const newOption = {
       id: newId,
@@ -420,7 +523,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleDelete = useCallback2((id) => {
+  const handleDelete = useCallback3((id) => {
     const newOptions = options?.filter((option) => option.id !== id) ?? [];
     onValueChange(type, newOptions);
     setSelectedId(null);
@@ -429,7 +532,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleMove = useCallback2((from, to) => {
+  const handleMove = useCallback3((from, to) => {
     if (!options) {
       return;
     }
@@ -444,10 +547,10 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleClick = useCallback2((id) => {
+  const handleClick = useCallback3((id) => {
     setSelectedId((current) => current === id ? null : id);
   }, []);
-  const handleTitleChange = useCallback2((id) => (e) => {
+  const handleTitleChange = useCallback3((id) => (e) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       title: e.target.value
@@ -458,12 +561,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleKeyDown = useCallback2((e) => {
+  const handleKeyDown = useCallback3((e) => {
     if (e.key === "Enter") {
       setSelectedId(null);
     }
   }, []);
-  const handleColorChange = useCallback2((id) => (hue) => {
+  const handleColorChange = useCallback3((id) => (hue) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       color: hue
@@ -474,7 +577,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  useEffect2(() => {
+  useEffect4(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -525,12 +628,13 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     value: item.title,
     onChange: handleTitleChange(item.id),
     onKeyDown: handleKeyDown,
-    classNames: "flex-1"
+    classNames: "flex-1",
+    "data-no-submit": true
   }), /* @__PURE__ */ React5.createElement(Toolbar.Root, {
     classNames: "p-0 m-0 !is-auto"
-  }, /* @__PURE__ */ React5.createElement(HuePickerToolbarButton, {
-    hue: item.color,
-    onChangeHue: handleColorChange(item.id)
+  }, /* @__PURE__ */ React5.createElement(HuePicker, {
+    value: item.color,
+    onChange: handleColorChange(item.id)
   })), /* @__PURE__ */ React5.createElement(IconButton, {
     icon: "ph--trash--fill",
     iconOnly: true,
@@ -585,7 +689,7 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 };
 
 // packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-import React7 from "react";
+import React7, { useCallback as useCallback4, useEffect as useEffect5, useRef as useRef2 } from "react";
 import { Input as Input5, Select } from "@dxos/react-ui";
 var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
@@ -649,9 +753,48 @@ var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, get
     }, label2 ?? String(value))
   )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
 };
+var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef2(null);
+  const adjustHeight = useCallback4(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    adjustHeight
+  ]);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    getValue3(),
+    adjustHeight
+  ]);
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.TextArea, {
+    ref: textareaRef,
+    disabled,
+    placeholder,
+    value: getValue3() ?? "",
+    classNames: "min-bs-auto max-h-40 overflow-auto",
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur,
+    style: {
+      resize: "none"
+    },
+    spellCheck: false
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.Validation, null, error));
+};
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React11, { useEffect as useEffect3, useMemo as useMemo4 } from "react";
+import React11, { 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
@@ -685,7 +828,7 @@ 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 React10, { useMemo as useMemo3 } from "react";
+import React10, { 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 mx6 } from "@dxos/react-ui-theme";
@@ -695,7 +838,7 @@ import { isNotFalsy } from "@dxos/util";
 // packages/ui/react-ui-form/src/components/Form/ArrayField.tsx
 import { pipe } from "effect";
 import { capitalize } from "effect/String";
-import React9, { useCallback as useCallback3, useMemo as useMemo2 } from "react";
+import React9, { 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 { invariant as invariant2 } from "@dxos/invariant";
@@ -731,7 +874,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       prop.defaultValue
     ]));
   };
-  const newValue = useMemo2(() => {
+  const newValue = useMemo4(() => {
     if (type === "object" && elementType) {
       return getDefaultObjectValue(elementType);
     } else {
@@ -741,7 +884,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     type,
     elementType
   ]);
-  const handleAdd = useCallback3(() => {
+  const handleAdd = useCallback5(() => {
     inputProps.onValueChange(type, [
       ...values,
       newValue
@@ -753,7 +896,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     newValue,
     values
   ]);
-  const handleRemove = useCallback3((index) => {
+  const handleRemove = useCallback5((index) => {
     const newValues = values.filter((_, i) => i !== index);
     inputProps.onValueChange(type, newValues);
   }, [
@@ -811,8 +954,10 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
 import { FormatEnum } from "@dxos/echo-schema";
 var getInputComponent = (type, format) => {
   switch (format) {
-    case FormatEnum.LatLng:
+    case FormatEnum.GeoPoint:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
   switch (type) {
     case "string":
@@ -828,11 +973,11 @@ var getInputComponent = (type, format) => {
 var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
   const inputProps = useInputProps(path);
   const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = useMemo3(() => title ?? pipe2(name, capitalize2), [
+  const label = useMemo5(() => title ?? pipe2(name, capitalize2), [
     title,
     name
   ]);
-  const placeholder = useMemo3(() => examples?.length ? `Example: "${examples[0]}"` : description, [
+  const placeholder = useMemo5(() => examples?.length ? `Example: "${examples[0]}"` : description, [
     examples,
     description
   ]);
@@ -856,20 +1001,15 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
   const jsonPath = createJsonPath3(path ?? []);
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
-    return (
-      // TODO(ZaymonFC): We should try to remove this div wrapper.
-      /* @__PURE__ */ React10.createElement("div", {
-        role: "none"
-      }, /* @__PURE__ */ React10.createElement(CustomComponent, {
-        type,
-        format,
-        label,
-        inputOnly: inline,
-        placeholder,
-        disabled: readonly,
-        ...inputProps
-      }))
-    );
+    return /* @__PURE__ */ React10.createElement(CustomComponent, {
+      type,
+      format,
+      label,
+      inputOnly: inline,
+      placeholder,
+      disabled: readonly,
+      ...inputProps
+    });
   }
   if (array) {
     return /* @__PURE__ */ React10.createElement(ArrayField, {
@@ -929,7 +1069,7 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
 };
 var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
   const values = useFormValues(path);
-  const properties = useMemo3(() => {
+  const properties = useMemo5(() => {
     const props = getSchemaProperties2(schema.ast, values);
     const filtered = filter ? filter(props) : props;
     return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
@@ -959,13 +1099,14 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
 
 // 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, lookupComponent, Custom }) => {
-  const onValid = useMemo4(() => autoSave ? onSave : void 0, [
+  const formRef = useRef3(null);
+  const onValid = useMemo6(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
-  useEffect3(() => {
-    if (autoFocus) {
-      const input = document.querySelector("input");
+  useEffect6(() => {
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector("input");
       if (input) {
         input.focus();
       }
@@ -974,13 +1115,16 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     autoFocus
   ]);
   return /* @__PURE__ */ React11.createElement(FormProvider, {
+    formRef,
     schema,
+    autoSave,
     initialValues,
     onValuesChanged,
     onValidate,
     onValid,
     onSave
   }, /* @__PURE__ */ React11.createElement("div", {
+    ref: formRef,
     role: "none",
     className: mx7("p-2", classNames),
     "data-testid": testId
@@ -1002,13 +1146,13 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
 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 } = useTranslation5(translationKey);
-  const [props, setProps] = useState3(projection.getFieldProjection(field.id).props);
-  useEffect4(() => 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] = useState3([]);
-  useEffect4(() => {
+  const [schemas, setSchemas] = useState4([]);
+  useEffect7(() => {
     if (!registry) {
       return;
     }
@@ -1026,17 +1170,17 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = useState3();
-  useEffect4(() => {
+  const [referenceSchema, setReferenceSchema] = useState4();
+  useEffect7(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
   ]);
-  const [{ fieldSchema }, setFieldSchema] = useState3({
+  const [{ fieldSchema }, setFieldSchema] = useState4({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const handleValuesChanged = useCallback4((_props) => {
+  const handleValuesChanged = useCallback6((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = getFormatSchema(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -1071,7 +1215,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = useCallback4(({ property }) => {
+  const handleValidate = useCallback6(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -1084,7 +1228,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     view.fields,
     field
   ]);
-  const handleSave = useCallback4((props2) => {
+  const handleSave = useCallback6((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
@@ -1095,13 +1239,13 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     field,
     onSave
   ]);
-  const handleCancel = useCallback4(() => {
+  const handleCancel = useCallback6(() => {
     requestAnimationFrame(() => onCancel?.());
     onSave();
   }, [
     onSave
   ]);
-  const Custom = useMemo5(() => ({
+  const Custom = useMemo7(() => ({
     ["format"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
@@ -1127,7 +1271,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = useCallback4((props2) => props2.filter((p) => p.name !== "type"), []);
+  const propIsNotType = useCallback6((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
@@ -1158,7 +1302,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React13, { useCallback as useCallback5, useMemo as useMemo6, useState as useState4 } from "react";
+import React13, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
 import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
 import { IconButton as IconButton4, useTranslation as useTranslation6 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
@@ -1169,18 +1313,18 @@ var ViewMetaSchema = S2.Struct({
   name: S2.String.annotations({
     [AST4.TitleAnnotationId]: "View"
   }),
-  typename: Format.DXN.annotations({
+  typename: Format.URL.annotations({
     [AST4.TitleAnnotationId]: "Typename"
   })
 }).pipe(S2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
   const { t } = useTranslation6(translationKey);
-  const projection = useMemo6(() => new ViewProjection(schema, view), [
+  const projection = useMemo8(() => new ViewProjection(schema, view), [
     schema,
     view
   ]);
-  const [field, setField] = useState4();
-  const viewValues = useMemo6(() => {
+  const [field, setField] = useState5();
+  const viewValues = useMemo8(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -1190,7 +1334,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = useCallback5(({ name, typename }) => {
+  const handleViewUpdate = useCallback7(({ name, typename }) => {
     requestAnimationFrame(() => {
       if (view.name !== name) {
         view.name = name;
@@ -1204,16 +1348,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     onTypenameChanged
   ]);
-  const handleSelect = useCallback5((field2) => {
+  const handleSelect = useCallback7((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = useCallback5(() => {
+  const handleAdd = useCallback7(() => {
     const field2 = projection.createFieldProjection();
     setField(field2);
   }, [
     view
   ]);
-  const handleMove = useCallback5((fromIndex, toIndex) => {
+  const handleMove = useCallback7((fromIndex, toIndex) => {
     const fields = [
       ...view.fields
     ];
@@ -1223,12 +1367,11 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view.fields
   ]);
-  const handleClose = useCallback5(() => setField(void 0), []);
+  const handleClose = useCallback7(() => setField(void 0), []);
   return /* @__PURE__ */ React13.createElement("div", {
     role: "none",
     className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
   }, /* @__PURE__ */ React13.createElement(Form, {
-    autoFocus: true,
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
@@ -1279,7 +1422,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
 };
 
 // packages/ui/react-ui-form/src/util/field.ts
-import { FormatEnum as FormatEnum3, TypeEnum } from "@dxos/echo-schema";
+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;
@@ -1333,6 +1476,26 @@ var parseValue = ({ type, format, value }) => {
       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;
     }
@@ -1391,7 +1554,7 @@ var pathNotUniqueError = (path) => ({
 });
 
 // packages/ui/react-ui-form/src/util/formatting.ts
-import { FormatEnum as FormatEnum4, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
+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) {
@@ -1444,6 +1607,16 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
         return date.toLocaleTimeString(locale);
       }
     }
+    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 "";
@@ -1492,6 +1665,16 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
       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);
     }
@@ -1505,6 +1688,7 @@ export {
   Form,
   GeoPointInput,
   InputHeader,
+  MarkdownInput,
   NumberInput,
   SelectInput,
   SelectOptionInput,