@dxos/react-ui-form 0.8.1-main.ae460ac → 0.8.1-staging.31c3ee1

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

@@ -7,6 +7,7 @@ var translations_default = [
     "en-US": {
       [translationKey]: {
         "fields label": "Fields",
+        "hidden fields label": "Hidden Fields",
         // TODO(burdon): Standardize field/property.
         "button add property": "Add property",
         "field property label": "Property",
@@ -100,289 +101,81 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   return primary;
 };
 
-// packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-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, 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";
-
-// packages/ui/react-ui-form/src/hooks/useForm.ts
-import { SchemaAST as AST } from "effect";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { getValue, setValue } from "@dxos/echo-schema";
-import { 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: 93,
-    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 = useCallback((path) => {
-    return getValue(values, createJsonPath(path));
-  }, [
-    values
-  ]);
-  const onValueChange = useCallback((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: 203,
-        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
-      });
-    }
-  }, [
-    values,
-    onValuesChanged,
-    validate,
-    onValid,
-    changed
-  ]);
-  const onTouched = useCallback((path) => {
-    const jsonPath = createJsonPath(path);
-    setTouched((touched2) => ({
-      ...touched2,
-      [jsonPath]: true
-    }));
-    validate(values);
-  }, [
-    validate,
-    values
-  ]);
-  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: 265,
-    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/ControlSection.tsx
+import React2 from "react";
+import { toLocalizedString, useTranslation, Input as Input2 } from "@dxos/react-ui";
+var ControlSectionHeading = ({ title, description }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
+    className: "pli-4 container-max-width text-xl mbs-6 mbe-4"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    className: "pli-4 mlb-4 container-max-width text-description"
+  }, toLocalizedString(description, t)));
 };
-
-// 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 ControlSection = ({ title, description, children }) => {
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
+    title,
+    description
+  }), children);
 };
-var useFormValues = (path = []) => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath2(path);
-  return getValue2(formValues, jsonPath);
+var ControlGroup = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
+  role: "none",
+  className: "group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4"
+}, children);
+var ControlFrame = ({ children }) => /* @__PURE__ */ React2.createElement("div", {
+  role: "none",
+  className: "p-4 border border-separator rounded-lg container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-2 md:gap-8"
+}, children);
+var controlItemClasses = "p-4 border border-separator rounded-lg container-max-width grid md:col-span-2 grid-cols-subgrid items-center";
+var controlItemTitleClasses = "text-lg font-normal mbe-2";
+var controlItemDescriptionClasses = "text-base mlb-2 md:mbe-0 text-description";
+var ControlItem = ({ title, description, children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React2.createElement("h3", {
+    className: controlItemTitleClasses
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    className: controlItemDescriptionClasses
+  }, toLocalizedString(description, t))), children);
 };
-var useInputProps = (path = []) => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  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 ControlItemInput = ({ title, description, children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(Input2.Root, null, /* @__PURE__ */ React2.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React2.createElement(Input2.Label, {
+    classNames: controlItemTitleClasses
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Description, {
+    classNames: controlItemDescriptionClasses
+  }, toLocalizedString(description, t)))), children));
 };
-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);
+var ControlFrameItem = ({ title, description, children }) => {
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "group",
+    className: "min-is-0"
+  }, /* @__PURE__ */ React2.createElement("h3", {
+    className: "text-lg mbe-2"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    className: "mlb-2 md:mbe-0 text-description"
+  }, toLocalizedString(description, t)), children);
 };
 
+// packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
+import React13, { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useState as useState4 } from "react";
+import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
+import { log as log2 } from "@dxos/log";
+import { useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
+
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-import React4, { useCallback as useCallback2, useState as useState2, useEffect as useEffect3, useMemo as useMemo3 } from "react";
+import React4, { useCallback, useState, useEffect, useMemo } from "react";
 import { GeoLocation } from "@dxos/echo-schema";
-import { Input as Input2, useTranslation } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
 // packages/ui/react-ui-form/src/components/Form/Input.tsx
@@ -406,27 +199,27 @@ var InputHeader = ({ children, error }) => {
 
 // packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
 var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation2(translationKey);
   const { status, error } = getStatus();
-  const geoPoint = useMemo3(() => getValue3() ?? [
+  const geoPoint = useMemo(() => getValue3() ?? [
     0,
     0
   ], [
     getValue3
   ]);
-  const geoLocation = useMemo3(() => GeoLocation.fromGeoPoint(geoPoint), [
+  const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [
     geoPoint
   ]);
-  const [longitudeText, setLongitudeText] = useState2(geoLocation.longitude?.toString());
-  const [latitudeText, setLatitudeText] = useState2(geoLocation.latitude?.toString());
-  useEffect3(() => {
+  const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
+  useEffect(() => {
     const location = GeoLocation.fromGeoPoint(geoPoint);
     setLongitudeText(location.longitude.toString());
     setLatitudeText(location.latitude.toString());
   }, [
     geoPoint
   ]);
-  const handleCoordinateChange = useCallback2((coordinateType, setText) => (event) => {
+  const handleCoordinateChange = useCallback((coordinateType, setText) => (event) => {
     const inputText = event.target.value;
     setText(inputText);
     if (inputText !== "" && inputText !== "-") {
@@ -449,14 +242,14 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     onValueChange,
     type
   ]);
-  return /* @__PURE__ */ React4.createElement(Input2.Root, {
+  return /* @__PURE__ */ React4.createElement(Input3.Root, {
     validationValence: status
   }, /* @__PURE__ */ React4.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React4.createElement(Input2.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
     role: "none",
     className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
+  }, /* @__PURE__ */ React4.createElement(Input3.TextInput, {
     type: "text",
     pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
@@ -464,7 +257,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     value: latitudeText,
     onChange: handleCoordinateChange("latitude", setLatitudeText),
     onBlur
-  }), /* @__PURE__ */ React4.createElement(Input2.TextInput, {
+  }), /* @__PURE__ */ React4.createElement(Input3.TextInput, {
     type: "text",
     pattern: "^-?[0-9]*\\.?[0-9]*$",
     disabled,
@@ -476,20 +269,20 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
 };
 
 // packages/ui/react-ui-form/src/components/Form/custom/SelectOptionsInput.tsx
-import React5, { useCallback as useCallback3, useEffect as useEffect4, useState as useState3, useRef } from "react";
+import React5, { useCallback as useCallback2, useEffect as useEffect2, 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 { Icon as Icon2, IconButton, Input as Input4, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
 import { hues, mx as mx2 } from "@dxos/react-ui-theme";
 var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  const [selected, setSelectedId] = useState3(null);
-  const [isNewOption, setIsNewOption] = useState3(false);
+  const [selected, setSelectedId] = useState2(null);
+  const [isNewOption, setIsNewOption] = useState2(false);
   const inputRef = useRef(null);
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation3(translationKey);
   const { status, error } = getStatus();
   const options = getValue3();
-  useEffect4(() => {
+  useEffect2(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -508,7 +301,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     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 = useCallback3(() => {
+  const handleAdd = useCallback2(() => {
     const newId = PublicKey.random().truncate();
     const newOption = {
       id: newId,
@@ -526,7 +319,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleDelete = useCallback3((id) => {
+  const handleDelete = useCallback2((id) => {
     const newOptions = options?.filter((option) => option.id !== id) ?? [];
     onValueChange(type, newOptions);
     setSelectedId(null);
@@ -535,7 +328,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleMove = useCallback3((from, to) => {
+  const handleMove = useCallback2((from, to) => {
     if (!options) {
       return;
     }
@@ -550,10 +343,10 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleClick = useCallback3((id) => {
+  const handleClick = useCallback2((id) => {
     setSelectedId((current) => current === id ? null : id);
   }, []);
-  const handleTitleChange = useCallback3((id) => (e) => {
+  const handleTitleChange = useCallback2((id) => (e) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       title: e.target.value
@@ -564,12 +357,12 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  const handleKeyDown = useCallback3((e) => {
+  const handleKeyDown = useCallback2((e) => {
     if (e.key === "Enter") {
       setSelectedId(null);
     }
   }, []);
-  const handleColorChange = useCallback3((id) => (hue) => {
+  const handleColorChange = useCallback2((id) => (hue) => {
     const newOptions = options?.map((o) => o.id === id ? {
       ...o,
       color: hue
@@ -580,7 +373,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     type,
     onValueChange
   ]);
-  useEffect4(() => {
+  useEffect2(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -589,11 +382,11 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     selected,
     isNewOption
   ]);
-  return /* @__PURE__ */ React5.createElement(Input3.Root, {
+  return /* @__PURE__ */ React5.createElement(Input4.Root, {
     validationValence: status
   }, /* @__PURE__ */ React5.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React5.createElement(Input3.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
     role: "none"
   }, options && /* @__PURE__ */ React5.createElement(List.Root, {
     items: options,
@@ -621,11 +414,11 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     onClick: () => handleClick(item.id)
   })), selected === item.id && /* @__PURE__ */ React5.createElement("div", {
     className: "mis-4 mbs-2 flex flex-col gap-1"
-  }, /* @__PURE__ */ React5.createElement(Input3.Label, {
+  }, /* @__PURE__ */ React5.createElement(Input4.Label, {
     classNames: "text-xs"
   }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
     className: "flex flex-row items-center gap-1"
-  }, /* @__PURE__ */ React5.createElement(Input3.TextInput, {
+  }, /* @__PURE__ */ React5.createElement(Input4.TextInput, {
     placeholder: t("select option label placeholder"),
     ref: selected === item.id ? inputRef : void 0,
     value: item.title,
@@ -637,7 +430,8 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
     classNames: "p-0 m-0 !is-auto"
   }, /* @__PURE__ */ React5.createElement(HuePicker, {
     value: item.color,
-    onChange: handleColorChange(item.id)
+    onChange: handleColorChange(item.id),
+    rootVariant: "toolbar-button"
   })), /* @__PURE__ */ React5.createElement(IconButton, {
     icon: "ph--trash--fill",
     iconOnly: true,
@@ -660,7 +454,7 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
 
 // packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
 import React6 from "react";
-import { Input as Input4 } from "@dxos/react-ui";
+import { Input as Input5 } from "@dxos/react-ui";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
 var gridCols = [
@@ -672,13 +466,13 @@ var gridCols = [
 var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
   const { status, error } = getStatus();
   const values = getValue3() ?? {};
-  return /* @__PURE__ */ React6.createElement(Input4.Root, {
+  return /* @__PURE__ */ React6.createElement(Input5.Root, {
     validationValence: status
   }, /* @__PURE__ */ React6.createElement(InputHeader, {
     error
-  }, /* @__PURE__ */ React6.createElement(Input4.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
+  }, /* @__PURE__ */ React6.createElement(Input5.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
     className: mx3("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input4.TextInput, {
+  }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input5.TextInput, {
     key: prop,
     type: "number",
     disabled,
@@ -690,135 +484,417 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
     onBlur
   }))));
 };
-
-// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-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();
-  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.TextInput, {
-    disabled,
-    placeholder,
-    value: getValue3() ?? "",
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur
-  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.Validation, null, error));
+
+// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
+import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Input as Input6, Select } from "@dxos/react-ui";
+var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.TextInput, {
+    disabled,
+    placeholder,
+    value: getValue3() ?? "",
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.Validation, null, error));
+};
+var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.TextInput, {
+    type: "number",
+    disabled,
+    placeholder,
+    value: getValue3() ?? 0,
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
+};
+var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
+  const { status, error } = getStatus();
+  const checked = Boolean(getValue3());
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.Switch, {
+    checked,
+    onCheckedChange: (value) => onValueChange(type, value)
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input6.DescriptionAndValidation, null, error));
+};
+var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
+  const { status, error } = getStatus();
+  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)
+  }, /* @__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 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ React7.createElement(Select.Option, {
+      key: String(value),
+      value: String(value)
+    }, label2 ?? String(value))
+  )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input6.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 = useCallback3(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+  useEffect3(() => {
+    adjustHeight();
+  }, [
+    adjustHeight
+  ]);
+  useEffect3(() => {
+    adjustHeight();
+  }, [
+    getValue3(),
+    adjustHeight
+  ]);
+  return /* @__PURE__ */ React7.createElement(Input6.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input6.Label, null, label)), /* @__PURE__ */ React7.createElement(Input6.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(Input6.Validation, null, error));
+};
+
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+import React12, { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { mx as mx7 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-form/src/components/Form/FormActions.tsx
+import React9 from "react";
+import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-form/src/components/Form/FormContext.tsx
+import React8, { createContext, useContext, useEffect as useEffect5, useMemo as useMemo3 } from "react";
+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 { 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";
+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: 93,
+    S: void 0,
+    A: [
+      "AST.isTypeLiteral(schema.ast)",
+      ""
+    ]
+  });
+  const [values, setValues] = useState3(initialValues);
+  useEffect4(() => {
+    setValues(initialValues);
+  }, [
+    initialValues
+  ]);
+  const [touched, setTouched] = useState3(createKeySet(initialValues, false));
+  const [changed, setChanged] = useState3(createKeySet(initialValues, false));
+  const [errors, setErrors] = useState3({});
+  const [saving, setSaving] = useState3(false);
+  const validate = useCallback4((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] = useState3(false);
+  useEffect4(() => setSchemaDirty(true), [
+    schema
+  ]);
+  useEffect4(() => {
+    if (schemaDirty) {
+      validate(values);
+      setSchemaDirty(false);
+    }
+  }, [
+    values,
+    schemaDirty
+  ]);
+  const formIsValid = useMemo2(() => {
+    return Object.keys(errors).length === 0;
+  }, [
+    errors
+  ]);
+  const canSave = useMemo2(() => !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 = useCallback4(async () => {
+    if (validate(values)) {
+      setSaving(true);
+      try {
+        await onSave?.(values, {
+          changed
+        });
+      } finally {
+        setSaving(false);
+      }
+    }
+  }, [
+    values,
+    validate,
+    onSave,
+    changed
+  ]);
+  const getStatus = useCallback4((path) => {
+    const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
+    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
+    const isTouched = touched[jsonPath];
+    if (!isTouched) {
+      return {
+        status: void 0,
+        error: void 0
+      };
+    }
+    return {
+      status: matchingError ? "error" : void 0,
+      error: matchingError ? matchingError[1] : void 0
+    };
+  }, [
+    errors,
+    touched
+  ]);
+  const getFormValue = useCallback4((path) => {
+    return getValue(values, createJsonPath(path));
+  }, [
+    values
+  ]);
+  const onValueChange = useCallback4((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: 212,
+        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
+      });
+    }
+  }, [
+    values,
+    onValuesChanged,
+    validate,
+    onValid,
+    changed
+  ]);
+  const onTouched = useCallback4((path) => {
+    const jsonPath = createJsonPath(path);
+    setTouched((touched2) => ({
+      ...touched2,
+      [jsonPath]: true
+    }));
+    validate(values);
+  }, [
+    validate,
+    values
+  ]);
+  return useMemo2(() => ({
+    // 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: 274,
+    S: void 0,
+    A: [
+      "obj",
+      ""
+    ]
+  });
+  return Object.keys(obj).reduce((acc, key) => ({
+    ...acc,
+    [key]: value
+  }), {});
 };
-var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  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.TextInput, {
-    type: "number",
-    disabled,
-    placeholder,
-    value: getValue3() ?? 0,
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur
-  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
+var flatMap = (errors) => {
+  return errors.reduce((result, { path, message }) => {
+    const jsonPath = fromEffectValidationPath(path);
+    if (!(jsonPath in result)) {
+      result[jsonPath] = message;
+    }
+    return result;
+  }, {});
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  const checked = Boolean(getValue3());
-  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.Switch, {
-    checked,
-    onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, 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 SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ React7.createElement(Input5.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Select.Root, {
-    value: getValue3(),
-    onValueChange: (value) => onValueChange(type, value)
-  }, /* @__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 }) => (
-    // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React7.createElement(Select.Option, {
-      key: String(value),
-      value: String(value)
-    }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
+var useFormValues = (path = []) => {
+  const { values: formValues } = useFormContext();
+  const jsonPath = createJsonPath2(path);
+  return getValue2(formValues, jsonPath);
 };
-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
+var useInputProps = (path = []) => {
+  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
+  const stablePath = useMemo3(() => path, [
+    Array.isArray(path) ? path.join(".") : path
+  ]);
+  return useMemo3(() => ({
+    getStatus: () => getStatus(stablePath),
+    getValue: () => getFormValue(stablePath),
+    onValueChange: (type, value) => onValueChange(stablePath, type, value),
+    onBlur: () => onTouched(stablePath)
+  }), [
+    getStatus,
+    getFormValue,
+    onValueChange,
+    onTouched,
+    stablePath
   ]);
+};
+var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
+  const form = useForm(formOptions);
   useEffect5(() => {
-    adjustHeight();
+    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);
   }, [
-    getValue3(),
-    adjustHeight
+    formRef,
+    form.canSave,
+    form.formIsValid,
+    form.handleSave,
+    autoSave
   ]);
-  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));
+  return /* @__PURE__ */ React8.createElement(FormContext.Provider, {
+    value: form
+  }, children);
 };
 
-// packages/ui/react-ui-form/src/components/Form/Form.tsx
-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
-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 { t } = useTranslation4(translationKey);
   const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "mt-2 flex justify-center"
-  }, /* @__PURE__ */ React8.createElement("div", {
+  }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: mx4(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ React8.createElement(IconButton2, {
+  }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
+  }), handleSave && /* @__PURE__ */ React9.createElement(IconButton2, {
     type: "submit",
     "data-testid": "save-button",
     disabled: !canSave,
@@ -831,7 +907,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 useMemo5 } from "react";
+import React11, { useMemo as useMemo5 } from "react";
 import { AST as AST3, S } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath3, findNode as findNode2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
 import { mx as mx6 } from "@dxos/react-ui-theme";
@@ -841,17 +917,17 @@ 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 useCallback5, useMemo as useMemo4 } from "react";
+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 { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { IconButton as IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 import { getSchemaProperties } from "@dxos/schema";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
 var padding = "px-2";
 var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  const { t } = useTranslation4(translationKey);
+  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.`, {
@@ -910,20 +986,20 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: mx5(padding)
-  }, /* @__PURE__ */ React9.createElement(InputHeader, null, label), /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement(InputHeader, null, label), /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ React9.createElement("div", {
+  }, values.map((_value, index) => /* @__PURE__ */ React10.createElement("div", {
     key: index,
     role: "none",
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React9.createElement(FormField, {
+  }, /* @__PURE__ */ React10.createElement(FormField, {
     property: {
       ...property,
       array: false,
@@ -937,15 +1013,15 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     inline: true,
     Custom,
     lookupComponent
-  })), /* @__PURE__ */ React9.createElement(IconButton3, {
+  })), /* @__PURE__ */ React10.createElement(IconButton3, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
     onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ React9.createElement("div", {
+  })))), /* @__PURE__ */ React10.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ React9.createElement(IconButton3, {
+  }, /* @__PURE__ */ React10.createElement(IconButton3, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
@@ -997,14 +1073,14 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }
   });
   if (FoundComponent) {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
     }, FoundComponent);
   }
   const jsonPath = createJsonPath3(path ?? []);
   const CustomComponent = Custom?.[jsonPath];
   if (CustomComponent) {
-    return /* @__PURE__ */ React10.createElement(CustomComponent, {
+    return /* @__PURE__ */ React11.createElement(CustomComponent, {
       type,
       format,
       label,
@@ -1015,7 +1091,7 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     });
   }
   if (array) {
-    return /* @__PURE__ */ React10.createElement(ArrayField, {
+    return /* @__PURE__ */ React11.createElement(ArrayField, {
       property,
       path,
       inputProps,
@@ -1025,9 +1101,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
   }
   const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React10.createElement(InputComponent, {
+    }, /* @__PURE__ */ React11.createElement(InputComponent, {
       type,
       format,
       label,
@@ -1038,9 +1114,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }));
   }
   if (options) {
-    return /* @__PURE__ */ React10.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React10.createElement(SelectInput, {
+    }, /* @__PURE__ */ React11.createElement(SelectInput, {
       type,
       format,
       disabled: readonly,
@@ -1058,9 +1134,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     const baseNode = findNode2(ast, isDiscriminatedUnion2);
     const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode2(ast, AST3.isTypeLiteral);
     if (typeLiteral) {
-      return /* @__PURE__ */ React10.createElement("div", {
+      return /* @__PURE__ */ React11.createElement("div", {
         role: "none"
-      }, !inline && /* @__PURE__ */ React10.createElement("div", null, label), /* @__PURE__ */ React10.createElement(FormFields, {
+      }, !inline && /* @__PURE__ */ React11.createElement("div", null, label), /* @__PURE__ */ React11.createElement(FormFields, {
         schema: S.make(typeLiteral),
         path,
         readonly,
@@ -1082,11 +1158,11 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
     filter,
     sort
   ]);
-  return /* @__PURE__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React11.createElement("div", {
     role: "form",
     className: mx6("flex flex-col w-full gap-2")
   }, properties.map((property) => {
-    return /* @__PURE__ */ React10.createElement(FormField, {
+    return /* @__PURE__ */ React11.createElement(FormField, {
       key: property.name,
       property,
       path: [
@@ -1117,7 +1193,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
   }, [
     autoFocus
   ]);
-  return /* @__PURE__ */ React11.createElement(FormProvider, {
+  return /* @__PURE__ */ React12.createElement(FormProvider, {
     formRef,
     schema,
     autoSave,
@@ -1126,12 +1202,12 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     onValidate,
     onValid,
     onSave
-  }, /* @__PURE__ */ React11.createElement("div", {
+  }, /* @__PURE__ */ React12.createElement("div", {
     ref: formRef,
     role: "none",
     className: mx7("p-2", classNames),
     "data-testid": testId
-  }, /* @__PURE__ */ React11.createElement(FormFields, {
+  }, /* @__PURE__ */ React12.createElement(FormFields, {
     schema,
     path,
     readonly,
@@ -1139,7 +1215,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     sort,
     lookupComponent,
     Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React11.createElement(FormActions, {
+  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React12.createElement(FormActions, {
     onCancel,
     readonly
   })));
@@ -1148,7 +1224,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
-  const { t } = useTranslation5(translationKey);
+  const { t } = useTranslation6(translationKey);
   const [props, setProps] = useState4(projection.getFieldProjection(field.id).props);
   useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
@@ -1249,26 +1325,26 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     onSave
   ]);
   const Custom = useMemo7(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
+    ["format"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
       ...props2,
       options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
         value: p.name
       })) : []
     }),
-    ["options"]: (props2) => /* @__PURE__ */ React12.createElement(SelectOptionInput, props2)
+    ["options"]: (props2) => /* @__PURE__ */ React13.createElement(SelectOptionInput, props2)
   }), [
     t,
     schemas,
@@ -1286,7 +1362,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     });
     return null;
   }
-  return /* @__PURE__ */ React12.createElement(Form, {
+  return /* @__PURE__ */ React13.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
@@ -1305,12 +1381,14 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React13, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
+import React14, { useCallback as useCallback7, useMemo as useMemo8, useState as useState5 } from "react";
 import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
-import { IconButton as IconButton4, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { IconButton as IconButton4, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { List as List2 } from "@dxos/react-ui-list";
 import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
+var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = S2.Struct({
   name: S2.String.annotations({
@@ -1321,8 +1399,8 @@ var ViewMetaSchema = S2.Struct({
   })
 }).pipe(S2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = useTranslation6(translationKey);
-  const projection = useMemo8(() => new ViewProjection(schema, view), [
+  const { t } = useTranslation7(translationKey);
+  const projection = useMemo8(() => new ViewProjection(schema.jsonSchema, view), [
     schema,
     view
   ]);
@@ -1337,30 +1415,77 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = useCallback7(({ name, typename }) => {
+  const handleSelect = useCallback7((field2) => {
+    setField((f) => f === field2 ? void 0 : field2);
+  }, []);
+  const handleAdd = useCallback7(() => {
+    invariant3(!schema.readonly, void 0, {
+      F: __dxlog_file4,
+      L: 76,
+      S: void 0,
+      A: [
+        "!schema.readonly",
+        ""
+      ]
+    });
+    const field2 = projection.createFieldProjection();
+    setField(field2);
+  }, [
+    schema,
+    view
+  ]);
+  const handleUpdate = useCallback7(({ name, typename }) => {
+    invariant3(!schema.readonly, void 0, {
+      F: __dxlog_file4,
+      L: 83,
+      S: void 0,
+      A: [
+        "!schema.readonly",
+        ""
+      ]
+    });
     requestAnimationFrame(() => {
       if (view.name !== name) {
         view.name = name;
       }
       if (view.query.typename !== typename) {
-        onTypenameChanged(typename);
+        onTypenameChanged?.(typename);
       }
     });
   }, [
-    view,
     schema,
+    view,
     onTypenameChanged
   ]);
-  const handleSelect = useCallback7((field2) => {
-    setField((f) => f === field2 ? void 0 : field2);
-  }, []);
-  const handleAdd = useCallback7(() => {
-    const field2 = projection.createFieldProjection();
-    setField(field2);
+  const handleDelete = useCallback7((fieldId) => {
+    invariant3(!schema.readonly, void 0, {
+      F: __dxlog_file4,
+      L: 99,
+      S: void 0,
+      A: [
+        "!schema.readonly",
+        ""
+      ]
+    });
+    if (fieldId === field?.id) {
+      setField(void 0);
+    }
+    onDelete?.(fieldId);
   }, [
-    view
+    schema,
+    field,
+    onDelete
   ]);
   const handleMove = useCallback7((fromIndex, toIndex) => {
+    invariant3(!schema.readonly, void 0, {
+      F: __dxlog_file4,
+      L: 111,
+      S: void 0,
+      A: [
+        "!schema.readonly",
+        ""
+      ]
+    });
     const fields = [
       ...view.fields
     ];
@@ -1368,57 +1493,97 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     fields.splice(toIndex, 0, moved);
     view.fields = fields;
   }, [
+    schema,
     view.fields
   ]);
   const handleClose = useCallback7(() => setField(void 0), []);
-  return /* @__PURE__ */ React13.createElement("div", {
+  const hiddenProperties = projection.getHiddenProperties();
+  const handleHide = useCallback7((fieldId) => {
+    setField(void 0);
+    projection.hideFieldProjection(fieldId);
+  }, [
+    projection
+  ]);
+  const handleShow = useCallback7((property) => {
+    setField(void 0);
+    projection.showFieldProjection(property);
+  }, [
+    projection
+  ]);
+  return /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ React13.createElement(Form, {
+  }, /* @__PURE__ */ React14.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
-    onSave: handleViewUpdate
-  }), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", {
+    onSave: schema.readonly ? void 0 : handleUpdate
+  }), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React13.createElement("label", {
+  }, /* @__PURE__ */ React14.createElement("label", {
     className: mx8(inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ React13.createElement(List2.Root, {
+  }, t("fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
     items: view.fields,
     isItem: S2.is(FieldSchema),
     getId: (field2) => field2.id,
-    onMove: handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, showHeading && /* @__PURE__ */ React13.createElement("div", {
+    onMove: schema.readonly ? void 0 : handleMove
+  }, ({ items: fields }) => /* @__PURE__ */ React14.createElement(React14.Fragment, null, showHeading && /* @__PURE__ */ React14.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ React13.createElement("div", null), /* @__PURE__ */ React13.createElement("div", {
+  }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ React13.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ React14.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ React13.createElement(List2.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ React14.createElement(List2.Item, {
     key: field2.id,
     item: field2,
     classNames: mx8(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React13.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React13.createElement(List2.ItemTitle, {
+  }, /* @__PURE__ */ React14.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ React13.createElement(List2.ItemDeleteButton, {
+  }, field2.path), /* @__PURE__ */ React14.createElement("div", {
+    className: "flex items-center gap-2 -ml-4"
+  }, /* @__PURE__ */ React14.createElement(List2.ItemButton, {
+    icon: "ph--eye-slash--regular",
+    disabled: view.fields.length <= 1,
+    onClick: () => handleHide(field2.id)
+  }), !schema.readonly && /* @__PURE__ */ React14.createElement(List2.ItemDeleteButton, {
+    icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
-    onClick: () => onDelete(field2.id)
-  }))))))), field && /* @__PURE__ */ React13.createElement(FieldEditor, {
+    onClick: () => handleDelete(field2.id)
+  }))))))), hiddenProperties.length > 0 && /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", {
+    role: "none",
+    className: "p-2"
+  }, /* @__PURE__ */ React14.createElement("label", {
+    className: mx8(inputTextLabel)
+  }, t("hidden fields label"))), /* @__PURE__ */ React14.createElement(List2.Root, {
+    items: hiddenProperties,
+    isItem: (item) => typeof item === "string",
+    getId: (property) => property
+  }, ({ items: properties }) => /* @__PURE__ */ React14.createElement("div", {
+    role: "list",
+    className: "flex flex-col w-full"
+  }, properties?.map((property) => /* @__PURE__ */ React14.createElement(List2.Item, {
+    key: property,
+    item: property,
+    classNames: mx8(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React14.createElement("div", null), /* @__PURE__ */ React14.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React14.createElement(List2.ItemButton, {
+    icon: "ph--eye--regular",
+    onClick: () => handleShow(property)
+  }))))))), field && /* @__PURE__ */ React14.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ React13.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ React14.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ React13.createElement(IconButton4, {
+  }, /* @__PURE__ */ React14.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("button add property"),
-    onClick: handleAdd,
+    onClick: schema.readonly ? void 0 : handleAdd,
     // TODO(burdon): Show field limit in ux (not tooltip).
     disabled: view.fields.length >= VIEW_FIELD_LIMIT
   })));
@@ -1529,18 +1694,21 @@ var cellClassesForFieldType = ({ type, format }) => {
   switch (format) {
     case FormatEnum3.Markdown:
       return void 0;
+    case FormatEnum3.Time:
     case FormatEnum3.Timestamp:
     case FormatEnum3.DateTime:
     case FormatEnum3.Date:
-    case FormatEnum3.Time:
+    case FormatEnum3.Duration:
       return [
-        "font-mono"
+        "font-mono",
+        "text-right"
       ];
     case FormatEnum3.Currency:
       return [
         "text-right"
       ];
     case FormatEnum3.JSON:
+    case FormatEnum3.DID:
       return [
         "font-mono"
       ];
@@ -1548,15 +1716,13 @@ var cellClassesForFieldType = ({ type, format }) => {
       return void 0;
   }
 };
-var cellClassesForRowSelection = (selected) => selected ? [
-  "!bg-gridCellSelected"
-] : 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) => {
@@ -1598,17 +1764,14 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
         maximumFractionDigits: 2
       });
     }
-    case FormatEnum4.DateTime:
-    case FormatEnum4.Date:
+    case FormatEnum4.Date: {
+      return formatDate(new Date(value), "yyyy-MM-dd");
+    }
     case FormatEnum4.Time: {
-      const date = new Date(value);
-      if (format === FormatEnum4.DateTime) {
-        return date.toLocaleString(locale);
-      } else if (format === FormatEnum4.Date) {
-        return date.toLocaleDateString(locale);
-      } else {
-        return date.toLocaleTimeString(locale);
-      }
+      return formatDate(new Date(value), "HH:mm:ss");
+    }
+    case FormatEnum4.DateTime: {
+      return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
     }
     case FormatEnum4.GeoPoint: {
       if (value === null || value === void 0) {
@@ -1685,10 +1848,18 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
 };
 export {
   BooleanInput,
+  ControlFrame,
+  ControlFrameItem,
+  ControlGroup,
+  ControlItem,
+  ControlItemInput,
+  ControlSection,
+  ControlSectionHeading,
   DeprecatedFormContainer,
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  FormProvider,
   GeoPointInput,
   InputHeader,
   MarkdownInput,
@@ -1699,13 +1870,15 @@ export {
   TupleInput,
   ViewEditor,
   cellClassesForFieldType,
-  cellClassesForRowSelection,
+  controlItemClasses,
   formatForDisplay,
   formatForEditing,
   parseValue,
   pathNotUniqueError,
   translations_default as translations,
   useForm,
-  useFormValues
+  useFormContext,
+  useFormValues,
+  useInputProps
 };
 //# sourceMappingURL=index.mjs.map