@dxos/react-ui-form 0.7.5-labs.8a82073 → 0.7.5-labs.c0e040f

package/dist/lib/browser/index.mjs

@@ -99,34 +99,275 @@ 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 useCallback5, useEffect as useEffect6, useMemo as useMemo5, useState as useState3 } 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, useEffect as useEffect2 } 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 { useCallback, useEffect, useMemo, useState } from "react";
+import { getValue, setValue } from "@dxos/echo-schema";
+import { AST, createJsonPath, fromEffectValidationPath } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { log } from "@dxos/log";
+import { validateSchema } from "@dxos/schema";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
+var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
+  invariant(AST.isTypeLiteral(schema.ast), void 0, {
+    F: __dxlog_file,
+    L: 92,
+    S: void 0,
+    A: [
+      "AST.isTypeLiteral(schema.ast)",
+      ""
+    ]
+  });
+  const [values, setValues] = useState(initialValues);
+  useEffect(() => {
+    setValues(initialValues);
+  }, [
+    initialValues
+  ]);
+  const [touched, setTouched] = useState(createKeySet(initialValues, false));
+  const [changed, setChanged] = useState(createKeySet(initialValues, false));
+  const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+  const validate = useCallback((values2) => {
+    let errors2 = validateSchema(schema, values2) ?? [];
+    if (errors2.length === 0 && onValidate) {
+      const validatedValues = values2;
+      errors2 = onValidate(validatedValues) ?? [];
+    }
+    setErrors(flatMap(errors2));
+    const valid = errors2.length === 0;
+    return valid;
+  }, [
+    schema,
+    onValidate
+  ]);
+  const [schemaDirty, setSchemaDirty] = useState(false);
+  useEffect(() => setSchemaDirty(true), [
+    schema
+  ]);
+  useEffect(() => {
+    if (schemaDirty) {
+      validate(values);
+      setSchemaDirty(false);
+    }
+  }, [
+    values,
+    schemaDirty
+  ]);
+  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,
+    saving
+  ]);
+  const handleSave = useCallback(async () => {
+    if (validate(values)) {
+      setSaving(true);
+      try {
+        await onSave?.(values, {
+          changed
+        });
+      } finally {
+        setSaving(false);
+      }
+    }
+  }, [
+    values,
+    validate,
+    onSave,
+    changed
+  ]);
+  const getStatus = useCallback((path) => {
+    const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
+    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
+    return {
+      status: matchingError ? "error" : void 0,
+      error: matchingError ? matchingError[1] : void 0
+    };
+  }, [
+    errors
+  ]);
+  const getFormValue = (path) => {
+    return getValue(values, createJsonPath(path));
+  };
+  const onValueChange = (path, type, value) => {
+    const jsonPath = createJsonPath(path);
+    let parsedValue = value;
+    try {
+      if (type === "number") {
+        parsedValue = parseFloat(value) || 0;
+      }
+    } catch (err) {
+      log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 198,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      parsedValue = void 0;
+    }
+    const newValues = {
+      ...setValue(values, jsonPath, parsedValue)
+    };
+    setValues(newValues);
+    setChanged((prev) => ({
+      ...prev,
+      [jsonPath]: true
+    }));
+    onValuesChanged?.(newValues);
+    const isValid = validate(newValues);
+    if (isValid && onValid) {
+      onValid(newValues, {
+        changed
+      });
+    }
+  };
+  const onTouched = useCallback((path) => {
+    const jsonPath = createJsonPath(path);
+    setTouched((touched2) => ({
+      ...touched2,
+      [jsonPath]: true
+    }));
+    validate(values);
+  }, [
+    validate,
+    values
+  ]);
+  return {
+    // State.
+    values,
+    errors,
+    touched,
+    changed,
+    canSave,
+    handleSave,
+    formIsValid,
+    // Field utils.
+    getStatus,
+    getValue: getFormValue,
+    onValueChange,
+    onTouched
+  };
+};
+var createKeySet = (obj, value) => {
+  invariant(obj, void 0, {
+    F: __dxlog_file,
+    L: 241,
+    S: void 0,
+    A: [
+      "obj",
+      ""
+    ]
+  });
+  return Object.keys(obj).reduce((acc, key) => ({
+    ...acc,
+    [key]: value
+  }), {});
+};
+var flatMap = (errors) => {
+  return errors.reduce((result, { path, message }) => {
+    const jsonPath = fromEffectValidationPath(path);
+    if (!(jsonPath in result)) {
+      result[jsonPath] = message;
+    }
+    return result;
+  }, {});
+};
+
+// packages/ui/react-ui-form/src/components/Form/FormContext.tsx
+var FormContext = /* @__PURE__ */ createContext(void 0);
+var useFormContext = () => {
+  return useContext(FormContext) ?? raise(new Error("Missing FormContext"));
+};
+var useFormValues = (path = []) => {
+  const { values: formValues } = useFormContext();
+  const jsonPath = createJsonPath2(path);
+  return getValue2(formValues, jsonPath);
+};
+var useInputProps = (path = []) => {
+  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
+  return {
+    getStatus: () => getStatus(path),
+    getValue: () => getFormValue(path),
+    onValueChange: (type, value) => onValueChange(path, type, value),
+    onBlur: () => onTouched(path)
+  };
+};
+var FormProvider = ({ children, 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: form
+  }, children);
+};
+
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-import React3 from "react";
+import React4 from "react";
 import { Input as Input2, useTranslation } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
 // packages/ui/react-ui-form/src/components/Form/Input.tsx
-import React2 from "react";
+import React3 from "react";
 import { Icon, Tooltip } from "@dxos/react-ui";
 import { errorText } from "@dxos/react-ui-theme";
 var InputHeader = ({ children, error }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
+  return /* @__PURE__ */ React3.createElement("div", {
     role: "none",
     className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+  }, children, error && /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Icon, {
+  }, /* @__PURE__ */ React3.createElement(Icon, {
     icon: "ph--warning--regular",
     size: 4,
     classNames: errorText
-  })), /* @__PURE__ */ React2.createElement(Tooltip.Content, {
+  })), /* @__PURE__ */ React3.createElement(Tooltip.Content, {
     side: "bottom"
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error)));
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null), error)));
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
@@ -134,13 +375,13 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
   const { t } = useTranslation(translationKey);
   const { status, error } = getStatus();
   const [lng = 0, lat = 0] = getValue3() ?? [];
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
+  return /* @__PURE__ */ React4.createElement(Input2.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React3.createElement(InputHeader, {
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(Input2.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
     className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+  }, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
     type: "number",
     disabled,
     placeholder: t("placeholder longitude"),
@@ -150,7 +391,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
       safeParseFloat(event.target.value, 0)
     ]),
     onBlur
-  }), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+  }), /* @__PURE__ */ React4.createElement(Input2.TextInput, {
     type: "number",
     disabled,
     placeholder: t("placeholder latitude"),
@@ -164,20 +405,20 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/SelectOptionsInput.tsx
-import React4, { useCallback, useEffect, useState, useRef } from "react";
+import React5, { useCallback as useCallback2, useEffect as useEffect3, useState as useState2, 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 { hues, mx as mx2 } from "@dxos/react-ui-theme";
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  const [selected, setSelectedId] = useState(null);
-  const [isNewOption, setIsNewOption] = useState(false);
+  const [selected, setSelectedId] = useState2(null);
+  const [isNewOption, setIsNewOption] = useState2(false);
   const inputRef = useRef(null);
   const { t } = useTranslation2(translationKey);
   const { status, error } = getStatus();
   const options = getValue3();
-  useEffect(() => {
+  useEffect3(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -188,16 +429,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 = useCallback(() => {
+  const handleAdd = useCallback2(() => {
     const newId = PublicKey.random().truncate();
     const newOption = {
       id: newId,
@@ -215,7 +455,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleDelete = useCallback((id) => {
+  const handleDelete = useCallback2((id) => {
     const newOptions = options?.filter((option) => option.id !== id) ?? [];
     onValueChange(type, newOptions);
     setSelectedId(null);
@@ -224,7 +464,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleMove = useCallback((from, to) => {
+  const handleMove = useCallback2((from, to) => {
     if (!options) {
       return;
     }
@@ -239,10 +479,10 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleClick = useCallback((id) => {
+  const handleClick = useCallback2((id) => {
     setSelectedId((current) => current === id ? null : id);
   }, []);
-  const handleTitleChange = useCallback((id) => (e) => {
+  const handleTitleChange = useCallback2((id) => (e) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       title: e.target.value
@@ -253,12 +493,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleKeyDown = useCallback((e) => {
+  const handleKeyDown = useCallback2((e) => {
     if (e.key === "Enter") {
       setSelectedId(null);
     }
   }, []);
-  const handleColorChange = useCallback((id) => (hue) => {
+  const handleColorChange = useCallback2((id) => (hue) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       color: hue
@@ -269,7 +509,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  useEffect(() => {
+  useEffect3(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -278,76 +518,77 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     selected,
     isNewOption
   ]);
-  return /* @__PURE__ */ React4.createElement(Input3.Root, {
+  return /* @__PURE__ */ React5.createElement(Input3.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+  }, /* @__PURE__ */ React5.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement(Input3.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
     role: "none"
-  }, options && /* @__PURE__ */ React4.createElement(List.Root, {
+  }, options && /* @__PURE__ */ React5.createElement(List.Root, {
     items: options,
     isItem: (item) => true,
     onMove: handleMove
-  }, ({ items }) => /* @__PURE__ */ React4.createElement("div", {
+  }, ({ items }) => /* @__PURE__ */ React5.createElement("div", {
     role: "list",
     className: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ React4.createElement("div", {
+  }, items?.map((item) => /* @__PURE__ */ React5.createElement("div", {
     key: item.id
-  }, /* @__PURE__ */ React4.createElement(List.Item, {
+  }, /* @__PURE__ */ React5.createElement(List.Item, {
     role: "button",
     item,
     classNames: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center"
-  }, /* @__PURE__ */ React4.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React4.createElement(List.ItemTitle, {
+  }, /* @__PURE__ */ React5.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React5.createElement(List.ItemTitle, {
     onClick: () => handleClick(item.id),
     classNames: "flex-1"
-  }, /* @__PURE__ */ React4.createElement(Tag, {
+  }, /* @__PURE__ */ React5.createElement(Tag, {
     palette: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ React4.createElement(Icon2, {
+  }, item.title || "\u200B")), /* @__PURE__ */ React5.createElement(Icon2, {
     icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
     onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ React4.createElement("div", {
+  })), selected === item.id && /* @__PURE__ */ React5.createElement("div", {
     className: "mis-4 mbs-2 flex flex-col gap-1"
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React5.createElement(Input3.Label, {
     classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ React4.createElement("div", {
+  }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
     className: "flex flex-row items-center gap-1"
-  }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
+  }, /* @__PURE__ */ React5.createElement(Input3.TextInput, {
     placeholder: t("select option label placeholder"),
     ref: selected === item.id ? inputRef : void 0,
     value: item.title,
     onChange: handleTitleChange(item.id),
     onKeyDown: handleKeyDown,
-    classNames: "flex-1"
-  }), /* @__PURE__ */ React4.createElement(Toolbar.Root, {
+    classNames: "flex-1",
+    "data-no-submit": true
+  }), /* @__PURE__ */ React5.createElement(Toolbar.Root, {
     classNames: "p-0 m-0 !is-auto"
-  }, /* @__PURE__ */ React4.createElement(HuePickerToolbarButton, {
+  }, /* @__PURE__ */ React5.createElement(HuePickerToolbarButton, {
     hue: item.color,
     onChangeHue: handleColorChange(item.id)
-  })), /* @__PURE__ */ React4.createElement(IconButton, {
+  })), /* @__PURE__ */ React5.createElement(IconButton, {
     icon: "ph--trash--fill",
     iconOnly: true,
     label: t("select option delete"),
     onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ React4.createElement("div", {
+  })))))), /* @__PURE__ */ React5.createElement("div", {
     role: "listitem"
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "button",
     className: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
     onClick: handleAdd
-  }, /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement("div", {
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React4.createElement(Icon2, {
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
     icon: "ph--plus--regular"
-  }), /* @__PURE__ */ React4.createElement("span", {
+  }), /* @__PURE__ */ React5.createElement("span", {
     className: "text-sm"
   }, t("select option add")))))))));
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
-import React5 from "react";
+import React6 from "react";
 import { Input as Input4 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
@@ -360,13 +601,13 @@ var gridCols = [
 var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
   const values = getValue3() ?? {};
-  return /* @__PURE__ */ React5.createElement(Input4.Root, {
+  return /* @__PURE__ */ React6.createElement(Input4.Root, {
     validationValence: status
-  }, /* @__PURE__ */ React5.createElement(InputHeader, {
+  }, /* @__PURE__ */ React6.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement(Input4.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
     className: mx3("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React5.createElement(Input4.TextInput, {
+  }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input4.TextInput, {
     key: prop,
     type: "number",
     disabled,
@@ -380,286 +621,118 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 };
 
 // packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-import React6 from "react";
+import React7, { useCallback as useCallback3, useEffect as useEffect4, 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();
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.TextInput, {
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.TextInput, {
     disabled,
     placeholder,
     value: getValue3() ?? "",
     onChange: (event) => onValueChange(type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.Validation, null, error));
 };
 var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.TextInput, {
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.TextInput, {
     type: "number",
     disabled,
     placeholder,
     value: getValue3() ?? 0,
     onChange: (event) => onValueChange(type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
 };
 var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
   const checked = Boolean(getValue3());
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Input5.Switch, {
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.Switch, {
     checked,
     onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ React6.createElement(Input5.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
 };
 var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
   const { status, error } = getStatus();
-  return /* @__PURE__ */ React6.createElement(Input5.Root, {
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement(Select.Root, {
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Select.Root, {
     value: getValue3(),
     onValueChange: (value) => onValueChange(type, value)
-  }, /* @__PURE__ */ React6.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React7.createElement(Select.TriggerButton, {
     classNames: "is-full",
     disabled,
     placeholder
-  }), /* @__PURE__ */ React6.createElement(Select.Portal, null, /* @__PURE__ */ React6.createElement(Select.Content, null, /* @__PURE__ */ React6.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, label: label2 }) => (
     // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React6.createElement(Select.Option, {
+    /* @__PURE__ */ React7.createElement(Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ React6.createElement(Input5.DescriptionAndValidation, null, error));
+  )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
 };
-
-// packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React11, { useEffect as useEffect3, useMemo as useMemo4 } from "react";
-import { mx as mx7 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-form/src/components/Form/FormActions.tsx
-import React8 from "react";
-import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-import React7, { createContext, useContext } from "react";
-import { raise } from "@dxos/debug";
-import { getValue as getValue2 } from "@dxos/echo-schema";
-import { createJsonPath as createJsonPath2 } from "@dxos/effect";
-
-// packages/ui/react-ui-form/src/hooks/useForm.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
-import { getValue, setValue } from "@dxos/echo-schema";
-import { AST, createJsonPath, fromEffectValidationPath } from "@dxos/effect";
-import { invariant } from "@dxos/invariant";
-import { log } from "@dxos/log";
-import { validateSchema } from "@dxos/schema";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
-var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
-  invariant(AST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 91,
-    S: void 0,
-    A: [
-      "AST.isTypeLiteral(schema.ast)",
-      ""
-    ]
-  });
-  const [values, setValues] = useState2(initialValues);
-  useEffect2(() => {
-    setValues(initialValues);
-  }, [
-    initialValues
-  ]);
-  const [touched, setTouched] = useState2(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState2(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState2({});
-  const [saving, setSaving] = useState2(false);
-  const validate = useCallback2((values2) => {
-    let errors2 = validateSchema(schema, values2) ?? [];
-    if (errors2.length === 0 && onValidate) {
-      const validatedValues = values2;
-      errors2 = onValidate(validatedValues) ?? [];
-    }
-    setErrors(flatMap(errors2));
-    const valid = errors2.length === 0;
-    return valid;
-  }, [
-    schema,
-    onValidate
-  ]);
-  const [schemaDirty, setSchemaDirty] = useState2(false);
-  useEffect2(() => setSchemaDirty(true), [
-    schema
-  ]);
-  useEffect2(() => {
-    if (schemaDirty) {
-      validate(values);
-      setSchemaDirty(false);
-    }
-  }, [
-    values,
-    schemaDirty
-  ]);
-  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors
-  !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
-    touched,
-    errors,
-    saving
-  ]);
-  const handleSave = useCallback2(async () => {
-    if (validate(values)) {
-      setSaving(true);
-      try {
-        await onSave?.(values, {
-          changed
-        });
-      } finally {
-        setSaving(false);
-      }
+var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef2(null);
+  const adjustHeight = useCallback3(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
     }
+  }, []);
+  useEffect4(() => {
+    adjustHeight();
   }, [
-    values,
-    validate,
-    onSave,
-    changed
-  ]);
-  const getStatus = useCallback2((path) => {
-    const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
-    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
-    return {
-      status: matchingError ? "error" : void 0,
-      error: matchingError ? matchingError[1] : void 0
-    };
-  }, [
-    errors
+    adjustHeight
   ]);
-  const getFormValue = (path) => {
-    return getValue(values, createJsonPath(path));
-  };
-  const onValueChange = (path, type, value) => {
-    const jsonPath = createJsonPath(path);
-    let parsedValue = value;
-    try {
-      if (type === "number") {
-        parsedValue = parseFloat(value) || 0;
-      }
-    } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 193,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      parsedValue = void 0;
-    }
-    const newValues = {
-      ...setValue(values, jsonPath, parsedValue)
-    };
-    setValues(newValues);
-    setChanged((prev) => ({
-      ...prev,
-      [jsonPath]: true
-    }));
-    onValuesChanged?.(newValues);
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, {
-        changed
-      });
-    }
-  };
-  const onTouched = useCallback2((path) => {
-    const jsonPath = createJsonPath(path);
-    setTouched((touched2) => ({
-      ...touched2,
-      [jsonPath]: true
-    }));
-    validate(values);
+  useEffect4(() => {
+    adjustHeight();
   }, [
-    validate,
-    values
+    getValue3(),
+    adjustHeight
   ]);
-  return {
-    // State.
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    handleSave,
-    // Field utils.
-    getStatus,
-    getValue: getFormValue,
-    onValueChange,
-    onTouched
-  };
-};
-var createKeySet = (obj, value) => {
-  invariant(obj, void 0, {
-    F: __dxlog_file,
-    L: 235,
-    S: void 0,
-    A: [
-      "obj",
-      ""
-    ]
-  });
-  return Object.keys(obj).reduce((acc, key) => ({
-    ...acc,
-    [key]: value
-  }), {});
-};
-var flatMap = (errors) => {
-  return errors.reduce((result, { path, message }) => {
-    const jsonPath = fromEffectValidationPath(path);
-    if (!(jsonPath in result)) {
-      result[jsonPath] = message;
-    }
-    return result;
-  }, {});
+  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 overflow-hidden",
+    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/FormContext.tsx
-var FormContext = /* @__PURE__ */ createContext(void 0);
-var useFormContext = () => {
-  return useContext(FormContext) ?? raise(new Error("Missing FormContext"));
-};
-var useFormValues = (path = []) => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath2(path);
-  return getValue2(formValues, jsonPath);
-};
-var useInputProps = (path = []) => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type, value) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path)
-  };
-};
-var FormProvider = ({ children, ...formOptions }) => {
-  const formHandler = useForm(formOptions);
-  return /* @__PURE__ */ React7.createElement(FormContext.Provider, {
-    value: formHandler
-  }, children);
-};
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+import React11, { useEffect as useEffect5, useMemo as useMemo4, 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 React8 from "react";
+import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 var FormActions = ({ onCancel, readonly }) => {
   const { t } = useTranslation3(translationKey);
   const { canSave, handleSave } = useFormContext();
@@ -697,7 +770,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 useCallback4, useMemo as useMemo2 } from "react";
 import { AST as AST2 } from "@dxos/echo-schema";
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
 import { invariant as invariant2 } from "@dxos/invariant";
@@ -743,7 +816,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     type,
     elementType
   ]);
-  const handleAdd = useCallback3(() => {
+  const handleAdd = useCallback4(() => {
     inputProps.onValueChange(type, [
       ...values,
       newValue
@@ -755,7 +828,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     newValue,
     values
   ]);
-  const handleRemove = useCallback3((index) => {
+  const handleRemove = useCallback4((index) => {
     const newValues = values.filter((_, i) => i !== index);
     inputProps.onValueChange(type, newValues);
   }, [
@@ -815,6 +888,8 @@ var getInputComponent = (type, format) => {
   switch (format) {
     case FormatEnum.LatLng:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
   switch (type) {
     case "string":
@@ -858,20 +933,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, {
@@ -961,13 +1031,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 formRef = useRef3(null);
   const onValid = useMemo4(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
-  useEffect3(() => {
-    if (autoFocus) {
-      const input = document.querySelector("input");
+  useEffect5(() => {
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector("input");
       if (input) {
         input.focus();
       }
@@ -976,13 +1047,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
@@ -1005,12 +1079,12 @@ var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/c
 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), [
+  useEffect6(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
   const [schemas, setSchemas] = useState3([]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (!registry) {
       return;
     }
@@ -1029,7 +1103,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     registry
   ]);
   const [referenceSchema, setReferenceSchema] = useState3();
-  useEffect4(() => {
+  useEffect6(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
@@ -1038,7 +1112,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   const [{ fieldSchema }, setFieldSchema] = useState3({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const handleValuesChanged = useCallback4((_props) => {
+  const handleValuesChanged = useCallback5((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = getFormatSchema(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -1073,7 +1147,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = useCallback4(({ property }) => {
+  const handleValidate = useCallback5(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -1086,7 +1160,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     view.fields,
     field
   ]);
-  const handleSave = useCallback4((props2) => {
+  const handleSave = useCallback5((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
@@ -1097,7 +1171,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     field,
     onSave
   ]);
-  const handleCancel = useCallback4(() => {
+  const handleCancel = useCallback5(() => {
     requestAnimationFrame(() => onCancel?.());
     onSave();
   }, [
@@ -1129,7 +1203,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = useCallback4((props2) => props2.filter((p) => p.name !== "type"), []);
+  const propIsNotType = useCallback5((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
@@ -1160,7 +1234,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 useCallback6, useMemo as useMemo6, useState as useState4 } 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";
@@ -1171,7 +1245,7 @@ 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);
@@ -1192,7 +1266,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = useCallback5(({ name, typename }) => {
+  const handleViewUpdate = useCallback6(({ name, typename }) => {
     requestAnimationFrame(() => {
       if (view.name !== name) {
         view.name = name;
@@ -1206,16 +1280,16 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     onTypenameChanged
   ]);
-  const handleSelect = useCallback5((field2) => {
+  const handleSelect = useCallback6((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = useCallback5(() => {
+  const handleAdd = useCallback6(() => {
     const field2 = projection.createFieldProjection();
     setField(field2);
   }, [
     view
   ]);
-  const handleMove = useCallback5((fromIndex, toIndex) => {
+  const handleMove = useCallback6((fromIndex, toIndex) => {
     const fields = [
       ...view.fields
     ];
@@ -1225,12 +1299,11 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view.fields
   ]);
-  const handleClose = useCallback5(() => setField(void 0), []);
+  const handleClose = useCallback6(() => 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,
@@ -1507,6 +1580,7 @@ export {
   Form,
   GeoPointInput,
   InputHeader,
+  MarkdownInput,
   NumberInput,
   SelectInput,
   SelectOptionInput,
@@ -1520,6 +1594,7 @@ export {
   parseValue,
   pathNotUniqueError,
   translations_default as translations,
-  useForm
+  useForm,
+  useFormValues
 };
 //# sourceMappingURL=index.mjs.map