@dxos/react-ui-form 0.8.1-main.ba2dec9 → 0.8.1-staging.5be625a

package/dist/lib/node/index.cjs

@@ -33,6 +33,7 @@ __export(node_exports, {
   DeprecatedFormInput: () => DeprecatedFormInput,
   FieldEditor: () => FieldEditor,
   Form: () => Form,
+  FormProvider: () => FormProvider,
   GeoPointInput: () => GeoPointInput,
   InputHeader: () => InputHeader,
   MarkdownInput: () => MarkdownInput,
@@ -50,7 +51,9 @@ __export(node_exports, {
   pathNotUniqueError: () => pathNotUniqueError,
   translations: () => translations_default,
   useForm: () => useForm,
-  useFormValues: () => useFormValues
+  useFormContext: () => useFormContext,
+  useFormValues: () => useFormValues,
+  useInputProps: () => useInputProps
 });
 module.exports = __toCommonJS(node_exports);
 var import_react = __toESM(require("react"));
@@ -62,40 +65,40 @@ var import_log = require("@dxos/log");
 var import_react_ui2 = require("@dxos/react-ui");
 var import_schema = require("@dxos/schema");
 var import_react3 = __toESM(require("react"));
-var import_debug = require("@dxos/debug");
 var import_echo_schema2 = require("@dxos/echo-schema");
-var import_effect = require("@dxos/effect");
-var import_effect2 = require("effect");
-var import_react4 = require("react");
-var import_echo_schema3 = require("@dxos/echo-schema");
-var import_effect3 = require("@dxos/effect");
-var import_invariant = require("@dxos/invariant");
-var import_log2 = require("@dxos/log");
-var import_schema2 = require("@dxos/schema");
-var import_react5 = __toESM(require("react"));
-var import_echo_schema4 = require("@dxos/echo-schema");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_util = require("@dxos/util");
-var import_react6 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react7 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_keys = require("@dxos/keys");
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_list = require("@dxos/react-ui-list");
 var import_react_ui_pickers = require("@dxos/react-ui-pickers");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react8 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_react_ui6 = require("@dxos/react-ui");
 var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 var import_util2 = require("@dxos/util");
-var import_react9 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_ui7 = require("@dxos/react-ui");
-var import_react10 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_react11 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_ui8 = require("@dxos/react-ui");
 var import_react_ui_theme6 = require("@dxos/react-ui-theme");
+var import_react10 = __toESM(require("react"));
+var import_debug = require("@dxos/debug");
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_effect = require("@dxos/effect");
+var import_effect2 = require("effect");
+var import_react11 = require("react");
+var import_echo_schema4 = require("@dxos/echo-schema");
+var import_effect3 = require("@dxos/effect");
+var import_invariant = require("@dxos/invariant");
+var import_log2 = require("@dxos/log");
+var import_schema2 = require("@dxos/schema");
 var import_effect4 = require("effect");
 var import_String = require("effect/String");
 var import_react12 = __toESM(require("react"));
@@ -116,6 +119,7 @@ var import_schema4 = require("@dxos/schema");
 var import_echo_schema7 = require("@dxos/echo-schema");
 var import_react14 = __toESM(require("react"));
 var import_echo_schema8 = require("@dxos/echo-schema");
+var import_invariant3 = require("@dxos/invariant");
 var import_react_ui10 = require("@dxos/react-ui");
 var import_react_ui_list2 = require("@dxos/react-ui-list");
 var import_react_ui_theme9 = require("@dxos/react-ui-theme");
@@ -216,662 +220,670 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   }
   return primary;
 };
-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 }) => {
-  (0, import_invariant.invariant)(import_effect2.SchemaAST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 93,
-    S: void 0,
-    A: [
-      "AST.isTypeLiteral(schema.ast)",
-      ""
-    ]
-  });
-  const [values, setValues] = (0, import_react4.useState)(initialValues);
-  (0, import_react4.useEffect)(() => {
-    setValues(initialValues);
+var InputHeader = ({ children, error }) => {
+  return /* @__PURE__ */ import_react4.default.createElement("div", {
+    role: "none",
+    className: "flex justify-between items-center mb-1"
+  }, children, error && /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: import_react_ui_theme2.errorText
+  })), /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Content, {
+    side: "bottom"
+  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Tooltip.Arrow, null), error)));
+};
+var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
+  const { status, error } = getStatus();
+  const geoPoint = (0, import_react3.useMemo)(() => getValue3() ?? [
+    0,
+    0
+  ], [
+    getValue3
+  ]);
+  const geoLocation = (0, import_react3.useMemo)(() => import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint), [
+    geoPoint
+  ]);
+  const [longitudeText, setLongitudeText] = (0, import_react3.useState)(geoLocation.longitude?.toString());
+  const [latitudeText, setLatitudeText] = (0, import_react3.useState)(geoLocation.latitude?.toString());
+  (0, import_react3.useEffect)(() => {
+    const location = import_echo_schema2.GeoLocation.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude.toString());
+    setLatitudeText(location.latitude.toString());
   }, [
-    initialValues
+    geoPoint
   ]);
-  const [touched, setTouched] = (0, import_react4.useState)(createKeySet(initialValues, false));
-  const [changed, setChanged] = (0, import_react4.useState)(createKeySet(initialValues, false));
-  const [errors, setErrors] = (0, import_react4.useState)({});
-  const [saving, setSaving] = (0, import_react4.useState)(false);
-  const validate = (0, import_react4.useCallback)((values2) => {
-    let errors2 = (0, import_schema2.validateSchema)(schema, values2) ?? [];
-    if (errors2.length === 0 && onValidate) {
-      const validatedValues = values2;
-      errors2 = onValidate(validatedValues) ?? [];
+  const handleCoordinateChange = (0, import_react3.useCallback)((coordinateType, setText) => (event) => {
+    const inputText = event.target.value;
+    setText(inputText);
+    if (inputText !== "" && inputText !== "-") {
+      const coord = (0, import_util.safeParseFloat)(inputText);
+      if (coord !== void 0 && !isNaN(coord)) {
+        const currentLocation = import_echo_schema2.GeoLocation.fromGeoPoint(getValue3() ?? [
+          0,
+          0
+        ]);
+        const newLocation = {
+          ...currentLocation,
+          [coordinateType]: coord
+        };
+        const newValue = import_echo_schema2.GeoLocation.toGeoPoint(newLocation);
+        onValueChange(type, newValue);
+      }
     }
-    setErrors(flatMap(errors2));
-    const valid = errors2.length === 0;
-    return valid;
   }, [
-    schema,
-    onValidate
-  ]);
-  const [schemaDirty, setSchemaDirty] = (0, import_react4.useState)(false);
-  (0, import_react4.useEffect)(() => setSchemaDirty(true), [
-    schema
+    getValue3,
+    onValueChange,
+    type
   ]);
-  (0, import_react4.useEffect)(() => {
-    if (schemaDirty) {
-      validate(values);
-      setSchemaDirty(false);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react3.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.Label, null, label)), /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.TextInput, {
+    type: "text",
+    pattern: "^-?[0-9]*\\.?[0-9]*$",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: latitudeText,
+    onChange: handleCoordinateChange("latitude", setLatitudeText),
+    onBlur
+  }), /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.TextInput, {
+    type: "text",
+    pattern: "^-?[0-9]*\\.?[0-9]*$",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: longitudeText,
+    onChange: handleCoordinateChange("longitude", setLongitudeText),
+    onBlur
+  })));
+};
+var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
+  const [selected, setSelectedId] = (0, import_react5.useState)(null);
+  const [isNewOption, setIsNewOption] = (0, import_react5.useState)(false);
+  const inputRef = (0, import_react5.useRef)(null);
+  const { t } = (0, import_react_ui5.useTranslation)(translationKey);
+  const { status, error } = getStatus();
+  const options = getValue3();
+  (0, import_react5.useEffect)(() => {
+    if (options === void 0) {
+      onValueChange(type, []);
     }
   }, [
-    values,
-    schemaDirty
+    options,
+    onValueChange,
+    type
   ]);
-  const formIsValid = (0, import_react4.useMemo)(() => {
-    return Object.keys(errors).length === 0;
+  const randomHue = () => {
+    const usedHues = new Set(options?.map((option) => option.color) ?? []);
+    const unusedHues = import_react_ui_theme3.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 = import_react_ui_theme3.hues.filter((hue) => !lastThree.has(hue));
+    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? import_react_ui_theme3.hues[Math.floor(Math.random() * import_react_ui_theme3.hues.length)];
+  };
+  const handleAdd = (0, import_react5.useCallback)(() => {
+    const newId = import_keys.PublicKey.random().truncate();
+    const newOption = {
+      id: newId,
+      title: "",
+      color: randomHue()
+    };
+    onValueChange(type, [
+      ...options ?? [],
+      newOption
+    ]);
+    setSelectedId(newId);
+    setIsNewOption(true);
   }, [
-    errors
+    options,
+    type,
+    onValueChange
   ]);
-  const canSave = (0, import_react4.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 handleDelete = (0, import_react5.useCallback)((id) => {
+    const newOptions = options?.filter((option) => option.id !== id) ?? [];
+    onValueChange(type, newOptions);
+    setSelectedId(null);
+  }, [
+    options,
+    type,
+    onValueChange
   ]);
-  const handleSave = (0, import_react4.useCallback)(async () => {
-    if (validate(values)) {
-      setSaving(true);
-      try {
-        await onSave?.(values, {
-          changed
-        });
-      } finally {
-        setSaving(false);
-      }
+  const handleMove = (0, import_react5.useCallback)((from, to) => {
+    if (!options) {
+      return;
     }
+    const newOptions = [
+      ...options
+    ];
+    const [removed] = newOptions.splice(from, 1);
+    newOptions.splice(to, 0, removed);
+    onValueChange(type, newOptions);
   }, [
-    values,
-    validate,
-    onSave,
-    changed
+    options,
+    type,
+    onValueChange
   ]);
-  const getStatus = (0, import_react4.useCallback)((path) => {
-    const jsonPath = Array.isArray(path) ? (0, import_effect3.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
-    };
+  const handleClick = (0, import_react5.useCallback)((id) => {
+    setSelectedId((current) => current === id ? null : id);
+  }, []);
+  const handleTitleChange = (0, import_react5.useCallback)((id) => (e) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      title: e.target.value
+    } : o);
+    onValueChange(type, newOptions ?? []);
   }, [
-    errors
+    options,
+    type,
+    onValueChange
   ]);
-  const getFormValue = (0, import_react4.useCallback)((path) => {
-    return (0, import_echo_schema3.getValue)(values, (0, import_effect3.createJsonPath)(path));
+  const handleKeyDown = (0, import_react5.useCallback)((e) => {
+    if (e.key === "Enter") {
+      setSelectedId(null);
+    }
+  }, []);
+  const handleColorChange = (0, import_react5.useCallback)((id) => (hue) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      color: hue
+    } : o);
+    onValueChange(type, newOptions ?? []);
   }, [
-    values
+    options,
+    type,
+    onValueChange
   ]);
-  const onValueChange = (0, import_react4.useCallback)((path, type, value) => {
-    const jsonPath = (0, import_effect3.createJsonPath)(path);
-    let parsedValue = value;
-    try {
-      if (type === "number") {
-        parsedValue = parseFloat(value) || 0;
-      }
-    } catch (err) {
-      import_log2.log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 203,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      parsedValue = void 0;
-    }
-    const newValues = {
-      ...(0, import_echo_schema3.setValue)(values, jsonPath, parsedValue)
-    };
-    setValues(newValues);
-    setChanged((prev) => ({
-      ...prev,
-      [jsonPath]: true
-    }));
-    onValuesChanged?.(newValues);
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, {
-        changed
-      });
+  (0, import_react5.useEffect)(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
     }
   }, [
-    values,
-    onValuesChanged,
-    validate,
-    onValid,
-    changed
+    selected,
+    isNewOption
   ]);
-  const onTouched = (0, import_react4.useCallback)((path) => {
-    const jsonPath = (0, import_effect3.createJsonPath)(path);
-    setTouched((touched2) => ({
-      ...touched2,
-      [jsonPath]: true
-    }));
-    validate(values);
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react5.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Label, null, label)), /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "none"
+  }, options && /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.Root, {
+    items: options,
+    isItem: (item) => true,
+    onMove: handleMove
+  }, ({ items }) => /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "list",
+    className: "w-full overflow-auto"
+  }, items?.map((item) => /* @__PURE__ */ import_react5.default.createElement("div", {
+    key: item.id
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.Item, {
+    role: "button",
+    item,
+    classNames: (0, import_react_ui_theme3.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    "aria-expanded": selected === item.id
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+    className: "flex items-center"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react5.default.createElement(import_react_ui_list.List.ItemTitle, {
+    onClick: () => handleClick(item.id),
+    classNames: "flex-1"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Tag, {
+    palette: item.color
+  }, item.title || "\u200B")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
+    icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+    onClick: () => handleClick(item.id)
+  })), selected === item.id && /* @__PURE__ */ import_react5.default.createElement("div", {
+    className: "mis-4 mbs-2 flex flex-col gap-1"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Label, {
+    classNames: "text-xs"
+  }, t("select option label")), /* @__PURE__ */ import_react5.default.createElement("div", {
+    className: "flex flex-row items-center gap-1"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.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",
+    "data-no-submit": true
+  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Toolbar.Root, {
+    classNames: "p-0 m-0 !is-auto"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui_pickers.HuePicker, {
+    value: item.color,
+    onChange: handleColorChange(item.id)
+  })), /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.IconButton, {
+    icon: "ph--trash--fill",
+    iconOnly: true,
+    label: t("select option delete"),
+    onClick: () => handleDelete(item.id)
+  })))))), /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "listitem"
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+    role: "button",
+    className: (0, import_react_ui_theme3.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    onClick: handleAdd
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+    className: "flex items-center gap-1"
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Icon, {
+    icon: "ph--plus--regular"
+  }), /* @__PURE__ */ import_react5.default.createElement("span", {
+    className: "text-sm"
+  }, t("select option add")))))))));
+};
+var gridCols = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4"
+];
+var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const values = getValue3() ?? {};
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement("div", {
+    className: (0, import_react_ui_theme4.mx)("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
+    key: prop,
+    type: "number",
+    disabled,
+    value: values[prop],
+    onChange: (event) => onValueChange(type, {
+      ...values,
+      [prop]: (0, import_util2.safeParseFloat)(event.target.value, 0)
+    }),
+    onBlur
+  }))));
+};
+var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
+    disabled,
+    placeholder,
+    value: getValue3() ?? "",
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur
+  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Validation, null, error));
+};
+var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.TextInput, {
+    type: "number",
+    disabled,
+    placeholder,
+    value: getValue3() ?? 0,
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur
+  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+};
+var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
+  const { status, error } = getStatus();
+  const checked = Boolean(getValue3());
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Switch, {
+    checked,
+    onCheckedChange: (value) => onValueChange(type, value)
+  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+};
+var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Root, {
+    value: getValue3(),
+    onValueChange: (value) => onValueChange(type, value)
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.TriggerButton, {
+    classNames: "is-full",
+    disabled,
+    placeholder
+  }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Portal, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Content, null, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Select.Option, {
+      key: String(value),
+      value: String(value)
+    }, label2 ?? String(value))
+  )))))), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+};
+var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const textareaRef = (0, import_react7.useRef)(null);
+  const adjustHeight = (0, import_react7.useCallback)(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    adjustHeight();
   }, [
-    validate,
-    values
+    adjustHeight
   ]);
-  return (0, import_react4.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
+  (0, import_react7.useEffect)(() => {
+    adjustHeight();
+  }, [
+    getValue3(),
+    adjustHeight
   ]);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.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__ */ import_react7.default.createElement(import_react_ui7.Input.Validation, null, error));
 };
-var createKeySet = (obj, value) => {
-  (0, import_invariant.invariant)(obj, void 0, {
+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 }) => {
+  (0, import_invariant.invariant)(import_effect2.SchemaAST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
-    L: 265,
+    L: 93,
     S: void 0,
     A: [
-      "obj",
+      "AST.isTypeLiteral(schema.ast)",
       ""
     ]
   });
-  return Object.keys(obj).reduce((acc, key) => ({
-    ...acc,
-    [key]: value
-  }), {});
-};
-var flatMap = (errors) => {
-  return errors.reduce((result, { path, message }) => {
-    const jsonPath = (0, import_effect3.fromEffectValidationPath)(path);
-    if (!(jsonPath in result)) {
-      result[jsonPath] = message;
-    }
-    return result;
-  }, {});
-};
-var FormContext = /* @__PURE__ */ (0, import_react3.createContext)(void 0);
-var useFormContext = () => {
-  return (0, import_react3.useContext)(FormContext) ?? (0, import_debug.raise)(new Error("Missing FormContext"));
-};
-var useFormValues = (path = []) => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = (0, import_effect.createJsonPath)(path);
-  return (0, import_echo_schema2.getValue)(formValues, jsonPath);
-};
-var useInputProps = (path = []) => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  const stablePath = (0, import_react3.useMemo)(() => path, [
-    Array.isArray(path) ? path.join(".") : path
-  ]);
-  return (0, import_react3.useMemo)(() => ({
-    getStatus: () => getStatus(stablePath),
-    getValue: () => getFormValue(stablePath),
-    onValueChange: (type, value) => onValueChange(stablePath, type, value),
-    onBlur: () => onTouched(stablePath)
-  }), [
-    getStatus,
-    getFormValue,
-    onValueChange,
-    onTouched,
-    stablePath
+  const [values, setValues] = (0, import_react11.useState)(initialValues);
+  (0, import_react11.useEffect)(() => {
+    setValues(initialValues);
+  }, [
+    initialValues
   ]);
-};
-var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
-  const form = useForm(formOptions);
-  (0, import_react3.useEffect)(() => {
-    if (!formRef?.current) {
-      return;
+  const [touched, setTouched] = (0, import_react11.useState)(createKeySet(initialValues, false));
+  const [changed, setChanged] = (0, import_react11.useState)(createKeySet(initialValues, false));
+  const [errors, setErrors] = (0, import_react11.useState)({});
+  const [saving, setSaving] = (0, import_react11.useState)(false);
+  const validate = (0, import_react11.useCallback)((values2) => {
+    let errors2 = (0, import_schema2.validateSchema)(schema, values2) ?? [];
+    if (errors2.length === 0 && onValidate) {
+      const validatedValues = values2;
+      errors2 = onValidate(validatedValues) ?? [];
     }
-    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);
+    setErrors(flatMap(errors2));
+    const valid = errors2.length === 0;
+    return valid;
   }, [
-    formRef,
-    form.canSave,
-    form.formIsValid,
-    form.handleSave,
-    autoSave
-  ]);
-  return /* @__PURE__ */ import_react3.default.createElement(FormContext.Provider, {
-    value: form
-  }, children);
-};
-var InputHeader = ({ children, error }) => {
-  return /* @__PURE__ */ import_react6.default.createElement("div", {
-    role: "none",
-    className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Tooltip.Root, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Icon, {
-    icon: "ph--warning--regular",
-    size: 4,
-    classNames: import_react_ui_theme2.errorText
-  })), /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Tooltip.Content, {
-    side: "bottom"
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Tooltip.Arrow, null), error)));
-};
-var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const { status, error } = getStatus();
-  const geoPoint = (0, import_react5.useMemo)(() => getValue3() ?? [
-    0,
-    0
-  ], [
-    getValue3
+    schema,
+    onValidate
   ]);
-  const geoLocation = (0, import_react5.useMemo)(() => import_echo_schema4.GeoLocation.fromGeoPoint(geoPoint), [
-    geoPoint
+  const [schemaDirty, setSchemaDirty] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => setSchemaDirty(true), [
+    schema
   ]);
-  const [longitudeText, setLongitudeText] = (0, import_react5.useState)(geoLocation.longitude?.toString());
-  const [latitudeText, setLatitudeText] = (0, import_react5.useState)(geoLocation.latitude?.toString());
-  (0, import_react5.useEffect)(() => {
-    const location = import_echo_schema4.GeoLocation.fromGeoPoint(geoPoint);
-    setLongitudeText(location.longitude.toString());
-    setLatitudeText(location.latitude.toString());
+  (0, import_react11.useEffect)(() => {
+    if (schemaDirty) {
+      validate(values);
+      setSchemaDirty(false);
+    }
   }, [
-    geoPoint
+    values,
+    schemaDirty
   ]);
-  const handleCoordinateChange = (0, import_react5.useCallback)((coordinateType, setText) => (event) => {
-    const inputText = event.target.value;
-    setText(inputText);
-    if (inputText !== "" && inputText !== "-") {
-      const coord = (0, import_util.safeParseFloat)(inputText);
-      if (coord !== void 0 && !isNaN(coord)) {
-        const currentLocation = import_echo_schema4.GeoLocation.fromGeoPoint(getValue3() ?? [
-          0,
-          0
-        ]);
-        const newLocation = {
-          ...currentLocation,
-          [coordinateType]: coord
-        };
-        const newValue = import_echo_schema4.GeoLocation.toGeoPoint(newLocation);
-        onValueChange(type, newValue);
-      }
-    }
+  const formIsValid = (0, import_react11.useMemo)(() => {
+    return Object.keys(errors).length === 0;
   }, [
-    getValue3,
-    onValueChange,
-    type
+    errors
   ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react5.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, label)), /* @__PURE__ */ import_react5.default.createElement("div", {
-    role: "none",
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.TextInput, {
-    type: "text",
-    pattern: "^-?[0-9]*\\.?[0-9]*$",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: latitudeText,
-    onChange: handleCoordinateChange("latitude", setLatitudeText),
-    onBlur
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.TextInput, {
-    type: "text",
-    pattern: "^-?[0-9]*\\.?[0-9]*$",
-    disabled,
-    placeholder: t("placeholder longitude"),
-    value: longitudeText,
-    onChange: handleCoordinateChange("longitude", setLongitudeText),
-    onBlur
-  })));
-};
-var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  const [selected, setSelectedId] = (0, import_react7.useState)(null);
-  const [isNewOption, setIsNewOption] = (0, import_react7.useState)(false);
-  const inputRef = (0, import_react7.useRef)(null);
-  const { t } = (0, import_react_ui5.useTranslation)(translationKey);
-  const { status, error } = getStatus();
-  const options = getValue3();
-  (0, import_react7.useEffect)(() => {
-    if (options === void 0) {
-      onValueChange(type, []);
+  const canSave = (0, import_react11.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 = (0, import_react11.useCallback)(async () => {
+    if (validate(values)) {
+      setSaving(true);
+      try {
+        await onSave?.(values, {
+          changed
+        });
+      } finally {
+        setSaving(false);
+      }
     }
   }, [
-    options,
-    onValueChange,
-    type
+    values,
+    validate,
+    onSave,
+    changed
   ]);
-  const randomHue = () => {
-    const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const unusedHues = import_react_ui_theme3.hues.filter((hue) => !usedHues.has(hue));
-    if (unusedHues.length > 0) {
-      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+  const getStatus = (0, import_react11.useCallback)((path) => {
+    const jsonPath = Array.isArray(path) ? (0, import_effect3.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
+      };
     }
-    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = import_react_ui_theme3.hues.filter((hue) => !lastThree.has(hue));
-    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? import_react_ui_theme3.hues[Math.floor(Math.random() * import_react_ui_theme3.hues.length)];
-  };
-  const handleAdd = (0, import_react7.useCallback)(() => {
-    const newId = import_keys.PublicKey.random().truncate();
-    const newOption = {
-      id: newId,
-      title: "",
-      color: randomHue()
+    return {
+      status: matchingError ? "error" : void 0,
+      error: matchingError ? matchingError[1] : void 0
     };
-    onValueChange(type, [
-      ...options ?? [],
-      newOption
-    ]);
-    setSelectedId(newId);
-    setIsNewOption(true);
   }, [
-    options,
-    type,
-    onValueChange
+    errors,
+    touched
   ]);
-  const handleDelete = (0, import_react7.useCallback)((id) => {
-    const newOptions = options?.filter((option) => option.id !== id) ?? [];
-    onValueChange(type, newOptions);
-    setSelectedId(null);
+  const getFormValue = (0, import_react11.useCallback)((path) => {
+    return (0, import_echo_schema4.getValue)(values, (0, import_effect3.createJsonPath)(path));
   }, [
-    options,
-    type,
-    onValueChange
+    values
   ]);
-  const handleMove = (0, import_react7.useCallback)((from, to) => {
-    if (!options) {
-      return;
+  const onValueChange = (0, import_react11.useCallback)((path, type, value) => {
+    const jsonPath = (0, import_effect3.createJsonPath)(path);
+    let parsedValue = value;
+    try {
+      if (type === "number") {
+        parsedValue = parseFloat(value) || 0;
+      }
+    } catch (err) {
+      import_log2.log.catch(err, void 0, {
+        F: __dxlog_file,
+        L: 212,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      parsedValue = void 0;
     }
-    const newOptions = [
-      ...options
-    ];
-    const [removed] = newOptions.splice(from, 1);
-    newOptions.splice(to, 0, removed);
-    onValueChange(type, newOptions);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleClick = (0, import_react7.useCallback)((id) => {
-    setSelectedId((current) => current === id ? null : id);
-  }, []);
-  const handleTitleChange = (0, import_react7.useCallback)((id) => (e) => {
-    const newOptions = options?.map((o) => o.id === id ? {
-      ...o,
-      title: e.target.value
-    } : o);
-    onValueChange(type, newOptions ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleKeyDown = (0, import_react7.useCallback)((e) => {
-    if (e.key === "Enter") {
-      setSelectedId(null);
+    const newValues = {
+      ...(0, import_echo_schema4.setValue)(values, jsonPath, parsedValue)
+    };
+    setValues(newValues);
+    setChanged((prev) => ({
+      ...prev,
+      [jsonPath]: true
+    }));
+    onValuesChanged?.(newValues);
+    const isValid = validate(newValues);
+    if (isValid && onValid) {
+      onValid(newValues, {
+        changed
+      });
     }
-  }, []);
-  const handleColorChange = (0, import_react7.useCallback)((id) => (hue) => {
-    const newOptions = options?.map((o) => o.id === id ? {
-      ...o,
-      color: hue
-    } : o);
-    onValueChange(type, newOptions ?? []);
   }, [
-    options,
-    type,
-    onValueChange
+    values,
+    onValuesChanged,
+    validate,
+    onValid,
+    changed
   ]);
-  (0, import_react7.useEffect)(() => {
-    if (selected && isNewOption && inputRef.current) {
-      inputRef.current.focus();
-      setIsNewOption(false);
-    }
+  const onTouched = (0, import_react11.useCallback)((path) => {
+    const jsonPath = (0, import_effect3.createJsonPath)(path);
+    setTouched((touched2) => ({
+      ...touched2,
+      [jsonPath]: true
+    }));
+    validate(values);
   }, [
-    selected,
-    isNewOption
+    validate,
+    values
+  ]);
+  return (0, import_react11.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
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Input.Label, null, label)), /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "none"
-  }, options && /* @__PURE__ */ import_react7.default.createElement(import_react_ui_list.List.Root, {
-    items: options,
-    isItem: (item) => true,
-    onMove: handleMove
-  }, ({ items }) => /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "list",
-    className: "w-full overflow-auto"
-  }, items?.map((item) => /* @__PURE__ */ import_react7.default.createElement("div", {
-    key: item.id
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_list.List.Item, {
-    role: "button",
-    item,
-    classNames: (0, import_react_ui_theme3.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
-    "aria-expanded": selected === item.id
-  }, /* @__PURE__ */ import_react7.default.createElement("div", {
-    className: "flex items-center"
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react7.default.createElement(import_react_ui_list.List.ItemTitle, {
-    onClick: () => handleClick(item.id),
-    classNames: "flex-1"
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Tag, {
-    palette: item.color
-  }, item.title || "\u200B")), /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Icon, {
-    icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
-    onClick: () => handleClick(item.id)
-  })), selected === item.id && /* @__PURE__ */ import_react7.default.createElement("div", {
-    className: "mis-4 mbs-2 flex flex-col gap-1"
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Input.Label, {
-    classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ import_react7.default.createElement("div", {
-    className: "flex flex-row items-center gap-1"
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Input.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",
-    "data-no-submit": true
-  }), /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Toolbar.Root, {
-    classNames: "p-0 m-0 !is-auto"
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui_pickers.HuePicker, {
-    value: item.color,
-    onChange: handleColorChange(item.id)
-  })), /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.IconButton, {
-    icon: "ph--trash--fill",
-    iconOnly: true,
-    label: t("select option delete"),
-    onClick: () => handleDelete(item.id)
-  })))))), /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "listitem"
-  }, /* @__PURE__ */ import_react7.default.createElement("div", {
-    role: "button",
-    className: (0, import_react_ui_theme3.mx)("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
-    onClick: handleAdd
-  }, /* @__PURE__ */ import_react7.default.createElement("div", {
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Icon, {
-    icon: "ph--plus--regular"
-  }), /* @__PURE__ */ import_react7.default.createElement("span", {
-    className: "text-sm"
-  }, t("select option add")))))))));
 };
-var gridCols = [
-  "grid-cols-1",
-  "grid-cols-2",
-  "grid-cols-3",
-  "grid-cols-4"
-];
-var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  const values = getValue3() ?? {};
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui6.Input.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ import_react8.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react8.default.createElement("div", {
-    className: (0, import_react_ui_theme4.mx)("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ import_react8.default.createElement(import_react_ui6.Input.TextInput, {
-    key: prop,
-    type: "number",
-    disabled,
-    value: values[prop],
-    onChange: (event) => onValueChange(type, {
-      ...values,
-      [prop]: (0, import_util2.safeParseFloat)(event.target.value, 0)
-    }),
-    onBlur
-  }))));
+var createKeySet = (obj, value) => {
+  (0, import_invariant.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 TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react9.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.TextInput, {
-    disabled,
-    placeholder,
-    value: getValue3() ?? "",
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur
-  }), inputOnly && /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Validation, null, error));
+var flatMap = (errors) => {
+  return errors.reduce((result, { path, message }) => {
+    const jsonPath = (0, import_effect3.fromEffectValidationPath)(path);
+    if (!(jsonPath in result)) {
+      result[jsonPath] = message;
+    }
+    return result;
+  }, {});
 };
-var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react9.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.TextInput, {
-    type: "number",
-    disabled,
-    placeholder,
-    value: getValue3() ?? 0,
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur
-  }), inputOnly && /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+var FormContext = /* @__PURE__ */ (0, import_react10.createContext)(void 0);
+var useFormContext = () => {
+  return (0, import_react10.useContext)(FormContext) ?? (0, import_debug.raise)(new Error("Missing FormContext"));
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  const checked = Boolean(getValue3());
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react9.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Switch, {
-    checked,
-    onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+var useFormValues = (path = []) => {
+  const { values: formValues } = useFormContext();
+  const jsonPath = (0, import_effect.createJsonPath)(path);
+  return (0, import_echo_schema3.getValue)(formValues, jsonPath);
 };
-var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react9.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Select.Root, {
-    value: getValue3(),
-    onValueChange: (value) => onValueChange(type, value)
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Select.TriggerButton, {
-    classNames: "is-full",
-    disabled,
-    placeholder
-  }), /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Select.Portal, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Select.Content, null, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Select.Viewport, null, options?.map(({ value, label: label2 }) => (
-    // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Select.Option, {
-      key: String(value),
-      value: String(value)
-    }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+var useInputProps = (path = []) => {
+  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
+  const stablePath = (0, import_react10.useMemo)(() => path, [
+    Array.isArray(path) ? path.join(".") : path
+  ]);
+  return (0, import_react10.useMemo)(() => ({
+    getStatus: () => getStatus(stablePath),
+    getValue: () => getFormValue(stablePath),
+    onValueChange: (type, value) => onValueChange(stablePath, type, value),
+    onBlur: () => onTouched(stablePath)
+  }), [
+    getStatus,
+    getFormValue,
+    onValueChange,
+    onTouched,
+    stablePath
+  ]);
 };
-var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  const textareaRef = (0, import_react9.useRef)(null);
-  const adjustHeight = (0, import_react9.useCallback)(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.blockSize = "auto";
-      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
+  const form = useForm(formOptions);
+  (0, import_react10.useEffect)(() => {
+    if (!formRef?.current) {
+      return;
     }
-  }, []);
-  (0, import_react9.useEffect)(() => {
-    adjustHeight();
-  }, [
-    adjustHeight
-  ]);
-  (0, import_react9.useEffect)(() => {
-    adjustHeight();
+    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__ */ import_react9.default.createElement(import_react_ui7.Input.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react9.default.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.Label, null, label)), /* @__PURE__ */ import_react9.default.createElement(import_react_ui7.Input.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__ */ import_react9.default.createElement(import_react_ui7.Input.Validation, null, error));
+  return /* @__PURE__ */ import_react10.default.createElement(FormContext.Provider, {
+    value: form
+  }, children);
 };
 var FormActions = ({ onCancel, readonly }) => {
   const { t } = (0, import_react_ui8.useTranslation)(translationKey);
   const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ import_react11.default.createElement("div", {
+  return /* @__PURE__ */ import_react9.default.createElement("div", {
     role: "none",
     className: "mt-2 flex justify-center"
-  }, /* @__PURE__ */ import_react11.default.createElement("div", {
+  }, /* @__PURE__ */ import_react9.default.createElement("div", {
     role: "none",
     className: (0, import_react_ui_theme6.mx)(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ import_react11.default.createElement(import_react_ui8.IconButton, {
+  }, onCancel && !readonly && /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.IconButton, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), handleSave && /* @__PURE__ */ import_react11.default.createElement(import_react_ui8.IconButton, {
+  }), handleSave && /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.IconButton, {
     type: "submit",
     "data-testid": "save-button",
     disabled: !canSave,
@@ -1127,12 +1139,12 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
   }).filter(import_util3.isNotFalsy));
 };
 var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
-  const formRef = (0, import_react10.useRef)(null);
-  const onValid = (0, import_react10.useMemo)(() => autoSave ? onSave : void 0, [
+  const formRef = (0, import_react8.useRef)(null);
+  const onValid = (0, import_react8.useMemo)(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (autoFocus && formRef.current) {
       const input = formRef.current.querySelector("input");
       if (input) {
@@ -1142,7 +1154,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
   }, [
     autoFocus
   ]);
-  return /* @__PURE__ */ import_react10.default.createElement(FormProvider, {
+  return /* @__PURE__ */ import_react8.default.createElement(FormProvider, {
     formRef,
     schema,
     autoSave,
@@ -1151,12 +1163,12 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     onValidate,
     onValid,
     onSave
-  }, /* @__PURE__ */ import_react10.default.createElement("div", {
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
     ref: formRef,
     role: "none",
     className: (0, import_react_ui_theme5.mx)("p-2", classNames),
     "data-testid": testId
-  }, /* @__PURE__ */ import_react10.default.createElement(FormFields, {
+  }, /* @__PURE__ */ import_react8.default.createElement(FormFields, {
     schema,
     path,
     readonly,
@@ -1164,7 +1176,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, r
     sort,
     lookupComponent,
     Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react10.default.createElement(FormActions, {
+  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react8.default.createElement(FormActions, {
     onCancel,
     readonly
   })));
@@ -1326,6 +1338,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     Custom
   });
 };
+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 = import_echo_schema8.S.Struct({
   name: import_echo_schema8.S.String.annotations({
@@ -1352,39 +1365,77 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = (0, import_react14.useCallback)(({ name, typename }) => {
+  const handleSelect = (0, import_react14.useCallback)((field2) => {
+    setField((f) => f === field2 ? void 0 : field2);
+  }, []);
+  const handleAdd = (0, import_react14.useCallback)(() => {
+    (0, import_invariant3.invariant)(!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 = (0, import_react14.useCallback)(({ name, typename }) => {
+    (0, import_invariant3.invariant)(!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 = (0, import_react14.useCallback)((field2) => {
-    setField((f) => f === field2 ? void 0 : field2);
-  }, []);
-  const handleAdd = (0, import_react14.useCallback)(() => {
-    const field2 = projection.createFieldProjection();
-    setField(field2);
-  }, [
-    view
-  ]);
   const handleDelete = (0, import_react14.useCallback)((fieldId) => {
+    (0, import_invariant3.invariant)(!schema.readonly, void 0, {
+      F: __dxlog_file4,
+      L: 99,
+      S: void 0,
+      A: [
+        "!schema.readonly",
+        ""
+      ]
+    });
     if (fieldId === field?.id) {
       setField(void 0);
     }
-    onDelete(fieldId);
+    onDelete?.(fieldId);
   }, [
-    onDelete,
-    field
+    schema,
+    field,
+    onDelete
   ]);
   const handleMove = (0, import_react14.useCallback)((fromIndex, toIndex) => {
+    (0, import_invariant3.invariant)(!schema.readonly, void 0, {
+      F: __dxlog_file4,
+      L: 111,
+      S: void 0,
+      A: [
+        "!schema.readonly",
+        ""
+      ]
+    });
     const fields = [
       ...view.fields
     ];
@@ -1392,6 +1443,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     fields.splice(toIndex, 0, moved);
     view.fields = fields;
   }, [
+    schema,
     view.fields
   ]);
   const handleClose = (0, import_react14.useCallback)(() => setField(void 0), []);
@@ -1415,7 +1467,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
-    onSave: handleViewUpdate
+    onSave: schema.readonly ? void 0 : handleUpdate
   }), /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "none",
     className: "p-2"
@@ -1425,7 +1477,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     items: view.fields,
     isItem: import_echo_schema8.S.is(import_schema5.FieldSchema),
     getId: (field2) => field2.id,
-    onMove: handleMove
+    onMove: schema.readonly ? void 0 : handleMove
   }, ({ items: fields }) => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, showHeading && /* @__PURE__ */ import_react14.default.createElement("div", {
     role: "heading",
     className: grid
@@ -1446,7 +1498,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     icon: "ph--eye-slash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleHide(field2.id)
-  }), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
+  }), !schema.readonly && /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
     icon: "ph--trash--regular",
     disabled: view.fields.length <= 1,
     onClick: () => handleDelete(field2.id)
@@ -1481,7 +1533,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
     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 >= import_schema5.VIEW_FIELD_LIMIT
   })));
@@ -1601,6 +1653,7 @@ var cellClassesForFieldType = ({ type, format }) => {
         "text-right"
       ];
     case import_echo_schema9.FormatEnum.JSON:
+    case import_echo_schema9.FormatEnum.DID:
       return [
         "font-mono"
       ];
@@ -1747,6 +1800,7 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  FormProvider,
   GeoPointInput,
   InputHeader,
   MarkdownInput,
@@ -1764,6 +1818,8 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   pathNotUniqueError,
   translations,
   useForm,
-  useFormValues
+  useFormContext,
+  useFormValues,
+  useInputProps
 });
 //# sourceMappingURL=index.cjs.map