@dxos/react-ui-form 0.7.5-labs.e27f9b9 → 0.7.5-main.2567c87

package/dist/lib/node/index.cjs

@@ -29,15 +29,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var node_exports = {};
 __export(node_exports, {
   BooleanInput: () => BooleanInput,
-  DeprecatedFormContainer: () => DeprecatedFormContainer,
   DeprecatedFormInput: () => DeprecatedFormInput,
   FieldEditor: () => FieldEditor,
   Form: () => Form,
+  FormActions: () => FormActions,
   GeoPointInput: () => GeoPointInput,
   InputHeader: () => InputHeader,
   NumberInput: () => NumberInput,
   SelectInput: () => SelectInput,
-  SelectOptionInput: () => SelectOptionInput,
   TextInput: () => TextInput,
   TupleInput: () => TupleInput,
   ViewEditor: () => ViewEditor,
@@ -53,7 +52,6 @@ __export(node_exports, {
 module.exports = __toCommonJS(node_exports);
 var import_react = __toESM(require("react"));
 var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react2 = __toESM(require("react"));
 var import_echo_schema = require("@dxos/echo-schema");
 var import_log = require("@dxos/log");
@@ -64,60 +62,38 @@ var import_react_ui3 = require("@dxos/react-ui");
 var import_util = require("@dxos/util");
 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_react_ui_theme = require("@dxos/react-ui-theme");
 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_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_util2 = require("@dxos/util");
 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_effect = require("effect");
+var import_String = require("effect/String");
 var import_react7 = __toESM(require("react"));
-var import_react_ui7 = require("@dxos/react-ui");
-var import_react8 = __toESM(require("react"));
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-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_schema2 = require("@dxos/echo-schema");
-var import_effect = require("@dxos/effect");
-var import_react11 = require("react");
-var import_echo_schema3 = require("@dxos/echo-schema");
 var import_effect2 = require("@dxos/effect");
-var import_invariant = require("@dxos/invariant");
 var import_log2 = require("@dxos/log");
+var import_react_ui7 = require("@dxos/react-ui");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
 var import_schema2 = require("@dxos/schema");
-var import_effect3 = require("effect");
-var import_String = require("effect/String");
-var import_react12 = __toESM(require("react"));
+var import_util3 = require("@dxos/util");
+var import_echo_schema3 = require("@dxos/echo-schema");
+var import_react8 = require("react");
 var import_echo_schema4 = require("@dxos/echo-schema");
-var import_effect4 = require("@dxos/effect");
-var import_react_ui_theme7 = require("@dxos/react-ui-theme");
+var import_invariant = require("@dxos/invariant");
+var import_log3 = require("@dxos/log");
 var import_schema3 = require("@dxos/schema");
-var import_util3 = require("@dxos/util");
-var import_effect5 = require("effect");
-var import_String2 = require("effect/String");
-var import_react13 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_echo_schema5 = require("@dxos/echo-schema");
-var import_effect6 = require("@dxos/effect");
-var import_invariant2 = require("@dxos/invariant");
-var import_react_ui9 = require("@dxos/react-ui");
-var import_react_ui_theme8 = require("@dxos/react-ui-theme");
+var import_react_ui8 = require("@dxos/react-ui");
+var import_react_ui_list = require("@dxos/react-ui-list");
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 var import_schema4 = require("@dxos/schema");
+var import_util4 = require("@dxos/util");
 var import_echo_schema6 = require("@dxos/echo-schema");
-var import_react14 = __toESM(require("react"));
 var import_echo_schema7 = require("@dxos/echo-schema");
-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");
-var import_schema5 = require("@dxos/schema");
-var import_echo_schema8 = require("@dxos/echo-schema");
-var import_echo_schema9 = require("@dxos/echo-schema");
 var translationKey = "react-ui-form";
 var translations_default = [
   {
@@ -154,7 +130,6 @@ var translations_default = [
         "format ref": "Reference",
         "format regex": "RegExp",
         "format string": "String",
-        "format single-select": "Select",
         "format text": "Long text",
         "format time": "Time",
         "format timestamp": "Timestamp",
@@ -164,26 +139,11 @@ var translations_default = [
         "format uuid": "UUID",
         // Placeholders
         "placeholder latitude": "Latitude",
-        "placeholder longitude": "Longitude",
-        // SelectOptionsInput
-        "select option label": "Label",
-        "select option label placeholder": "Option label",
-        "select option color": "Color",
-        "select option delete": "Delete",
-        "select option add": "Add option"
+        "placeholder longitude": "Longitude"
       }
     }
   }
 ];
-var DeprecatedFormContainer = ({ children, classNames }) => {
-  return /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "none",
-    className: "w-full p-4 justify-center overflow-x-hidden overflow-y-auto"
-  }, /* @__PURE__ */ import_react.default.createElement("div", {
-    role: "form",
-    className: (0, import_react_ui_theme.mx)("flex flex-col", import_react_ui_theme.textBlockWidth, classNames)
-  }, children));
-};
 var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   const primary = /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none",
@@ -192,21 +152,19 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
     role: "none",
     className: "flex flex-col w-full"
   }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Label, {
-    classNames: "flex min-bs-[--rail-action] items-center",
-    style: {
-      fontSize: "unset"
-    }
+    classNames: "flex min-h-[40px] items-center"
   }, label), description && /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.DescriptionAndValidation, {
     classNames: "mbs-0.5"
   }, /* @__PURE__ */ import_react.default.createElement(import_react_ui.Input.Description, null, description))), /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     role: "none",
-    className: "flex min-bs-[--rail-action] items-center"
+    className: "flex min-h-[40px] items-center"
   }, children))));
   if (secondary) {
     return /* @__PURE__ */ import_react.default.createElement("div", {
-      role: "none"
+      role: "none",
+      className: "flex flex-col w-full"
     }, primary, secondary);
   }
   return primary;
@@ -220,15 +178,15 @@ var InputHeader = ({ children, error }) => {
   }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui4.Icon, {
     icon: "ph--warning--regular",
     size: 4,
-    classNames: import_react_ui_theme2.errorText
+    classNames: import_react_ui_theme.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 }) => {
+var GeoPointInput = ({ property, type, label, disabled, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
   const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue3() ?? [];
+  const { status, error } = getStatus?.(property);
+  const [lng = 0, lat = 0] = getValue2(property) ?? [];
   return /* @__PURE__ */ import_react3.default.createElement(import_react_ui3.Input.Root, {
     validationValence: status
   }, /* @__PURE__ */ import_react3.default.createElement(InputHeader, {
@@ -240,7 +198,7 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     disabled,
     placeholder: t("placeholder longitude"),
     value: lng,
-    onChange: (event) => onValueChange(type, [
+    onChange: (event) => onValueChange(property, type, [
       lat,
       (0, import_util.safeParseFloat)(event.target.value, 0)
     ]),
@@ -250,299 +208,129 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
     disabled,
     placeholder: t("placeholder latitude"),
     value: lat,
-    onChange: (event) => onValueChange(type, [
+    onChange: (event) => onValueChange(property, type, [
       (0, import_util.safeParseFloat)(event.target.value, 0),
       lng
     ]),
     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, []);
-    }
-  }, [
-    options,
-    onValueChange,
-    type
-  ]);
-  const randomHue = () => {
-    const usedHues = new Set(options?.map((option) => option.color) ?? []);
-    const hueKeys = Object.keys(import_react_ui_theme3.hueTokenThemes);
-    const unusedHues = hueKeys.filter((hue) => !usedHues.has(hue));
-    if (unusedHues.length > 0) {
-      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
-    }
-    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-    const availableHues = hueKeys.filter((hue) => !lastThree.has(hue));
-    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hueKeys[Math.floor(Math.random() * hueKeys.length)];
-  };
-  const 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);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  const handleDelete = (0, import_react5.useCallback)((id) => {
-    const newOptions = options?.filter((option) => option.id !== id) ?? [];
-    onValueChange(type, newOptions);
-    setSelectedId(null);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  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);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  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 ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  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 ?? []);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
-  (0, import_react5.useEffect)(() => {
-    if (selected && isNewOption && inputRef.current) {
-      inputRef.current.focus();
-      setIsNewOption(false);
-    }
-  }, [
-    selected,
-    isNewOption
-  ]);
-  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"
-  }), /* @__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.HuePickerToolbarButton, {
-    hue: item.color,
-    onChangeHue: 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, {
+var TupleInput = ({ binding, property, type, label, disabled, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  const values = getValue2(property) ?? {};
+  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Root, {
     validationValence: status
-  }, /* @__PURE__ */ import_react6.default.createElement(InputHeader, {
+  }, /* @__PURE__ */ import_react5.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, {
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.Label, null, label)), /* @__PURE__ */ import_react5.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ import_react5.default.createElement(import_react_ui5.Input.TextInput, {
     key: prop,
     type: "number",
     disabled,
     value: values[prop],
-    onChange: (event) => onValueChange(type, {
+    onChange: (event) => onValueChange(property, 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, {
+var TextInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react6.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, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
     disabled,
     placeholder,
-    value: getValue3() ?? "",
-    onChange: (event) => onValueChange(type, event.target.value),
+    value: getValue2(property) ?? "",
+    onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Validation, null, error));
+  }), inputOnly && /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.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, {
+var NumberInput = ({ property, type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue2, onValueChange, onBlur }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react6.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, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.TextInput, {
     type: "number",
     disabled,
     placeholder,
-    value: getValue3() ?? 0,
-    onChange: (event) => onValueChange(type, event.target.value),
+    value: getValue2(property) ?? 0,
+    onChange: (event) => onValueChange(property, type, event.target.value),
     onBlur
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+  }), inputOnly && /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.DescriptionAndValidation, null, error));
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.Root, {
+var BooleanInput = ({ property, type, label, inputOnly, getStatus, getValue: getValue2, onValueChange }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react6.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: getValue3(),
-    onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Switch, {
+    checked: getValue2(property),
+    onCheckedChange: (value) => onValueChange(property, type, value)
+  }), inputOnly && /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.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, {
+var SelectInput = ({ property, type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue2, onValueChange }) => {
+  const { status, error } = getStatus?.(property);
+  return /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Root, {
     validationValence: status
-  }, !inputOnly && /* @__PURE__ */ import_react7.default.createElement(InputHeader, {
+  }, !inputOnly && /* @__PURE__ */ import_react6.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, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.Label, null, label)), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Root, {
+    value: getValue2(property),
+    onValueChange: (value) => onValueChange(property, type, value)
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.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 }) => (
+  }), /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Portal, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Content, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.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, {
+    /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Select.Option, {
       key: String(value),
       value: String(value)
     }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.Input.DescriptionAndValidation, null, error));
+  )))))), inputOnly && /* @__PURE__ */ import_react6.default.createElement(import_react_ui6.Input.DescriptionAndValidation, null, error));
+};
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case import_echo_schema3.FormatEnum.LatLng:
+      return GeoPointInput;
+  }
+  switch (type) {
+    case "string":
+      return TextInput;
+    case "number":
+      return NumberInput;
+    case "boolean":
+      return BooleanInput;
+  }
 };
 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.AST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 91,
-    S: void 0,
-    A: [
-      "AST.isTypeLiteral(schema.ast)",
-      ""
-    ]
-  });
-  const [values, setValues] = (0, import_react11.useState)(initialValues);
-  (0, import_react11.useEffect)(() => {
+  const [values, setValues] = (0, import_react8.useState)(initialValues);
+  (0, import_react8.useEffect)(() => {
     setValues(initialValues);
   }, [
     initialValues
   ]);
-  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) ?? [];
+  const [touched, setTouched] = (0, import_react8.useState)(createKeySet(initialValues, false));
+  const [changed, setChanged] = (0, import_react8.useState)(createKeySet(initialValues, false));
+  const [errors, setErrors] = (0, import_react8.useState)({});
+  const [saving, setSaving] = (0, import_react8.useState)(false);
+  const validate = (0, import_react8.useCallback)((values2) => {
+    let errors2 = (0, import_schema3.validateSchema)(schema, values2) ?? [];
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -554,11 +342,11 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     schema,
     onValidate
   ]);
-  const [schemaDirty, setSchemaDirty] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => setSchemaDirty(true), [
+  const [schemaDirty, setSchemaDirty] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => setSchemaDirty(true), [
     schema
   ]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (schemaDirty) {
       validate(values);
       setSchemaDirty(false);
@@ -567,13 +355,13 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
-  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}[`))), [
+  const canSave = (0, import_react8.useMemo)(() => !saving && Object.keys(values).every((property) => touched[property] === false || !errors[property]), [
+    values,
     touched,
     errors,
     saving
   ]);
-  const handleSave = (0, import_react11.useCallback)(async () => {
+  const handleSave = (0, import_react8.useCallback)(async () => {
     if (validate(values)) {
       setSaving(true);
       try {
@@ -590,42 +378,38 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     onSave,
     changed
   ]);
-  const getStatus = (0, import_react11.useCallback)((path) => {
-    const jsonPath = Array.isArray(path) ? (0, import_effect2.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 getStatus = (0, import_react8.useCallback)((property) => ({
+    status: errors[property] ? "error" : void 0,
+    error: errors[property] ? errors[property] : void 0
+  }), [
+    touched,
     errors
   ]);
-  const getFormValue = (path) => {
-    return (0, import_echo_schema3.getValue)(values, (0, import_effect2.createJsonPath)(path));
+  const getFormValue = (property) => {
+    return (0, import_echo_schema4.getValue)(values, property);
   };
-  const onValueChange = (path, type, value) => {
-    const jsonPath = (0, import_effect2.createJsonPath)(path);
+  const onValueChange = (property, type, value) => {
     let parsedValue = value;
     try {
       if (type === "number") {
         parsedValue = parseFloat(value) || 0;
       }
     } catch (err) {
-      import_log2.log.catch(err, void 0, {
+      import_log3.log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 193,
+        L: 178,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
     const newValues = {
-      ...(0, import_echo_schema3.setValue)(values, jsonPath, parsedValue)
+      ...(0, import_echo_schema4.setValue)(values, property, parsedValue)
     };
     setValues(newValues);
     setChanged((prev) => ({
       ...prev,
-      [jsonPath]: true
+      [property]: true
     }));
     onValuesChanged?.(newValues);
     const isValid = validate(newValues);
@@ -635,12 +419,15 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
       });
     }
   };
-  const onTouched = (0, import_react11.useCallback)((path) => {
-    const jsonPath = (0, import_effect2.createJsonPath)(path);
+  const onBlur = (0, import_react8.useCallback)((event) => {
+    const { name } = event.target;
     setTouched((touched2) => ({
       ...touched2,
-      [jsonPath]: true
+      [name]: true
     }));
+    if (event.relatedTarget?.getAttribute("type") === "submit") {
+      setTouched(createKeySet(values, true));
+    }
     validate(values);
   }, [
     validate,
@@ -658,13 +445,13 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     getStatus,
     getValue: getFormValue,
     onValueChange,
-    onTouched
+    onBlur
   };
 };
 var createKeySet = (obj, value) => {
   (0, import_invariant.invariant)(obj, void 0, {
     F: __dxlog_file,
-    L: 235,
+    L: 229,
     S: void 0,
     A: [
       "obj",
@@ -678,346 +465,322 @@ var createKeySet = (obj, value) => {
 };
 var flatMap = (errors) => {
   return errors.reduce((result, { path, message }) => {
-    const jsonPath = (0, import_effect2.fromEffectValidationPath)(path);
-    if (!(jsonPath in result)) {
-      result[jsonPath] = message;
+    if (!(path in result)) {
+      result[path] = message;
     }
     return result;
   }, {});
 };
-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 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();
-  return {
-    getStatus: () => getStatus(path),
-    getValue: () => getFormValue(path),
-    onValueChange: (type, value) => onValueChange(path, type, value),
-    onBlur: () => onTouched(path)
-  };
-};
-var FormProvider = ({ children, ...formOptions }) => {
-  const formHandler = useForm(formOptions);
-  return /* @__PURE__ */ import_react10.default.createElement(FormContext.Provider, {
-    value: formHandler
-  }, children);
-};
-var FormActions = ({ onCancel, readonly }) => {
-  const { t } = (0, import_react_ui8.useTranslation)(translationKey);
-  const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
-    role: "none",
-    className: "flex justify-center"
-  }, /* @__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_react9.default.createElement(import_react_ui8.IconButton, {
-    "data-testid": "cancel-button",
-    icon: "ph--x--regular",
-    label: t("button cancel"),
-    onClick: onCancel
-  }), handleSave && /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.IconButton, {
-    type: "submit",
-    "data-testid": "save-button",
-    disabled: !canSave,
-    icon: "ph--check--regular",
-    label: t("button save"),
-    onClick: handleSave
-  })));
-};
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
+var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/Form.tsx";
 var padding = "px-2";
-var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  const { t } = (0, import_react_ui9.useTranslation)(translationKey);
-  const { ast, name, type, title } = property;
-  const values = useFormValues(path ?? []);
-  (0, import_invariant2.invariant)(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
-    F: __dxlog_file2,
-    L: 37,
-    S: void 0,
-    A: [
-      "Array.isArray(values)",
-      "`Values at path ${path?.join('.')} must be an array.`"
-    ]
-  });
-  const label = title ?? (0, import_effect5.pipe)(name, import_String2.capitalize);
-  const tupleType = (0, import_effect6.findNode)(ast, import_echo_schema5.AST.isTupleType);
-  const elementType = tupleType?.rest[0]?.type;
-  const getDefaultObjectValue = (typeNode) => {
-    const baseNode = (0, import_effect6.findNode)(typeNode, import_effect6.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? (0, import_effect6.getDiscriminatedType)(baseNode, {}) : (0, import_effect6.findNode)(typeNode, import_echo_schema5.AST.isTypeLiteral);
-    if (!typeLiteral) {
-      return {};
-    }
-    return Object.fromEntries((0, import_schema4.getSchemaProperties)(typeLiteral, {}).map((prop) => [
-      prop.name,
-      prop.defaultValue
-    ]));
-  };
-  const newValue = (0, import_react13.useMemo)(() => {
-    if (type === "object" && elementType) {
-      return getDefaultObjectValue(elementType);
-    } else {
-      return import_effect6.SimpleType.getDefaultValue(type);
-    }
-  }, [
-    type,
-    elementType
+var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
+  const onValid = (0, import_react7.useMemo)(() => autoSave ? onSave : void 0, [
+    autoSave,
+    onSave
   ]);
-  const handleAdd = (0, import_react13.useCallback)(() => {
-    inputProps.onValueChange(type, [
-      ...values,
-      newValue
-    ]);
+  const { canSave, values, errors, handleSave, ...inputProps } = useForm({
+    schema,
+    initialValues,
+    onValuesChanged,
+    onValidate,
+    onValid,
+    onSave
+  });
+  const properties = (0, import_react7.useMemo)(() => {
+    const props = (0, import_schema2.getSchemaProperties)(schema.ast, values);
+    const filtered = filter ? filter(props) : props;
+    const findIndex = (props2, prop) => {
+      const idx = props2.findIndex((p) => p === prop);
+      return idx === -1 ? Infinity : idx;
+    };
+    return sort ? filtered.sort(({ name: a }, { name: b }) => findIndex(sort, a) - findIndex(sort, b)) : filtered;
   }, [
-    type,
-    elementType,
-    inputProps,
-    newValue,
+    schema,
+    filter,
     values
   ]);
-  const handleRemove = (0, import_react13.useCallback)((index) => {
-    const newValues = values.filter((_, i) => i !== index);
-    inputProps.onValueChange(type, newValues);
+  (0, import_react7.useEffect)(() => {
+    if (errors && Object.keys(errors).length) {
+      import_log2.log.warn("validation", {
+        errors
+      }, {
+        F: __dxlog_file2,
+        L: 106,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+    }
   }, [
-    type,
-    inputProps,
-    values
+    errors
   ]);
-  if (!elementType) {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
+    role: "form",
+    className: (0, import_react_ui_theme3.mx)("flex flex-col w-full gap-2 py-2", classNames),
+    "data-testid": testId
+  }, properties.map((property) => {
+    const { ast, name, type, format, title, description, examples, options, array } = property;
+    const key = [
+      ...path,
+      name
+    ];
+    const label = title ?? (0, import_effect.pipe)(name, import_String.capitalize);
+    const placeholder = examples?.length ? `Example: "${examples[0]}"` : description;
+    const FoundComponent = lookupComponent?.({
+      prop: name,
+      schema: import_echo_schema2.S.make(ast),
+      inputProps: {
+        property: name,
+        type,
+        format,
+        label,
+        disabled: readonly,
+        placeholder,
+        ...inputProps
+      }
+    });
+    if (FoundComponent) {
+      return /* @__PURE__ */ import_react7.default.createElement("div", {
+        key: name,
+        role: "none",
+        className: padding
+      }, FoundComponent);
+    }
+    let InputComponent = Custom?.[key.join(".")];
+    if (!InputComponent) {
+      if (options) {
+        return /* @__PURE__ */ import_react7.default.createElement("div", {
+          key: name,
+          role: "none",
+          className: padding
+        }, /* @__PURE__ */ import_react7.default.createElement(SelectInput, {
+          type,
+          format,
+          property: name,
+          disabled: readonly,
+          label,
+          options: options.map((option) => ({
+            value: option,
+            label: String(option)
+          })),
+          placeholder,
+          ...inputProps
+        }));
+      }
+      InputComponent = getInputComponent(type, format);
+      if (array) {
+        return /* @__PURE__ */ import_react7.default.createElement(ArrayField, {
+          key: name,
+          name,
+          type,
+          array: true,
+          label,
+          ast,
+          values,
+          format,
+          readonly,
+          placeholder,
+          inputProps,
+          Custom
+        });
+      }
+    }
+    if (!InputComponent) {
+      if (type === "object") {
+        const baseNode = (0, import_effect2.findNode)(ast, import_effect2.isDiscriminatedUnion);
+        const typeLiteral = baseNode ? (0, import_effect2.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect2.findNode)(ast, import_echo_schema2.AST.isTypeLiteral);
+        if (typeLiteral) {
+          const schema2 = import_echo_schema2.S.make(typeLiteral);
+          return /* @__PURE__ */ import_react7.default.createElement("div", {
+            key: name,
+            role: "none"
+          }, /* @__PURE__ */ import_react7.default.createElement("div", {
+            className: padding
+          }, label), /* @__PURE__ */ import_react7.default.createElement(Form, {
+            schema: schema2,
+            path: key,
+            values: values[name] ?? {},
+            onValuesChanged: (childValues) => {
+              inputProps.onValueChange(name, "object", childValues);
+            },
+            Custom
+          }));
+        }
+      }
+      (0, import_log2.log)("no renderer for property", {
+        name,
+        type
+      }, {
+        F: __dxlog_file2,
+        L: 213,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      return null;
+    }
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
+      key: name,
+      role: "none",
+      className: padding
+    }, /* @__PURE__ */ import_react7.default.createElement(InputComponent, {
+      type,
+      format,
+      property: name,
+      disabled: readonly,
+      label,
+      placeholder,
+      ...inputProps
+    }));
+  }).filter(import_util3.isNotFalsy), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react7.default.createElement(FormActions, {
+    onCancel,
+    onSubmit: handleSave,
+    canSubmit: canSave,
+    readonly
+  }));
+};
+var ArrayField = ({ name, type, label, ast, values, format, readonly, placeholder, inputProps, Custom }) => {
+  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
+  const arrayValues = values[name] ?? [];
+  const key = [
+    name
+  ];
+  const tupleType = (0, import_effect2.findNode)(ast, import_echo_schema2.AST.isTupleType);
+  const elementType = tupleType?.rest[0]?.type;
+  if (type === "object" && elementType) {
+    const baseNode = (0, import_effect2.findNode)(elementType, import_effect2.isDiscriminatedUnion);
+    const typeLiteral = baseNode ? (0, import_effect2.getDiscriminatedType)(baseNode, values[name]) : (0, import_effect2.findNode)(elementType, import_echo_schema2.AST.isTypeLiteral);
+    if (typeLiteral) {
+      const schema = import_echo_schema2.S.make(typeLiteral);
+      return /* @__PURE__ */ import_react7.default.createElement("div", {
+        key: name,
+        role: "none",
+        className: (0, import_react_ui_theme3.mx)(padding)
+      }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react7.default.createElement("div", {
+        role: "none",
+        className: "flex flex-col gap-1"
+      }, arrayValues.map((value, index) => {
+        return /* @__PURE__ */ import_react7.default.createElement("div", {
+          key: index,
+          role: "none",
+          className: "flex items-center gap-1"
+        }, /* @__PURE__ */ import_react7.default.createElement("div", {
+          role: "none",
+          className: "flex-1"
+        }, /* @__PURE__ */ import_react7.default.createElement(Form, {
+          schema,
+          path: [
+            ...key,
+            `[${index}]`
+          ],
+          values: value,
+          onValuesChanged: (childValues) => {
+            const newValues = [
+              ...arrayValues
+            ];
+            newValues[index] = childValues;
+            inputProps.onValueChange(name, "object", newValues);
+          },
+          Custom
+        })), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.IconButton, {
+          icon: "ph--trash--regular",
+          iconOnly: true,
+          label: t("button remove"),
+          onClick: () => {
+            const newValues = arrayValues.filter((_, i) => i !== index);
+            inputProps.onValueChange(name, type, newValues);
+          }
+        }));
+      })), /* @__PURE__ */ import_react7.default.createElement("div", {
+        role: "none",
+        className: "flex justify-between items-center plb-1"
+      }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.IconButton, {
+        icon: "ph--plus--regular",
+        iconOnly: true,
+        label: t("button add"),
+        onClick: () => {
+          const newValues = [
+            ...arrayValues,
+            {}
+          ];
+          inputProps.onValueChange(name, type, newValues);
+        }
+      })));
+    }
+    return /* @__PURE__ */ import_react7.default.createElement("div", {
+      key: name,
+      role: "none"
+    }, "Nested form not supported in arrays, yet.");
+  }
+  const InputComponent = getInputComponent(type, format);
+  if (!InputComponent) {
     return null;
   }
-  return /* @__PURE__ */ import_react13.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme8.mx)(padding)
-  }, /* @__PURE__ */ import_react13.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react13.default.createElement("div", {
+    key: "meta-input",
+    className: (0, import_react_ui_theme3.mx)(padding)
+  }, /* @__PURE__ */ import_react7.default.createElement(InputHeader, null, label), /* @__PURE__ */ import_react7.default.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ import_react13.default.createElement("div", {
+  }, arrayValues.map((_, index) => /* @__PURE__ */ import_react7.default.createElement("div", {
     key: index,
     role: "none",
-    className: "flex items-center gap-1"
-  }, /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: "flex items-start gap-1"
+  }, /* @__PURE__ */ import_react7.default.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ import_react13.default.createElement(FormField, {
-    property: {
-      ...property,
-      array: false,
-      ast: elementType
-    },
-    path: [
-      ...path ?? [],
-      index
-    ],
-    readonly,
-    inline: true,
-    Custom,
-    lookupComponent
-  })), /* @__PURE__ */ import_react13.default.createElement(import_react_ui9.IconButton, {
+  }, /* @__PURE__ */ import_react7.default.createElement(InputComponent, {
+    type,
+    format,
+    label,
+    inputOnly: true,
+    property: `${name}[${index}]`,
+    disabled: readonly,
+    placeholder,
+    ...inputProps
+  })), /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.IconButton, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
-    onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ import_react13.default.createElement("div", {
+    onClick: () => {
+      const newValues = arrayValues.filter((_2, i) => i !== index);
+      inputProps.onValueChange(name, type, newValues);
+    }
+  })))), /* @__PURE__ */ import_react7.default.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ import_react13.default.createElement(import_react_ui9.IconButton, {
+  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.IconButton, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
-    onClick: handleAdd
-  })));
-};
-var getInputComponent = (type, format) => {
-  switch (format) {
-    case import_echo_schema6.FormatEnum.LatLng:
-      return GeoPointInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
-  }
-};
-var FormField = ({ property, path, readonly, inline, lookupComponent, Custom }) => {
-  const inputProps = useInputProps(path);
-  const { ast, name, type, format, title, description, options, examples, array } = property;
-  const label = (0, import_react12.useMemo)(() => title ?? (0, import_effect3.pipe)(name, import_String.capitalize), [
-    title,
-    name
-  ]);
-  const placeholder = (0, import_react12.useMemo)(() => examples?.length ? `Example: "${examples[0]}"` : description, [
-    examples,
-    description
-  ]);
-  const FoundComponent = lookupComponent?.({
-    prop: name,
-    schema: import_echo_schema4.S.make(ast),
-    inputProps: {
-      type,
-      format,
-      label,
-      disabled: readonly,
-      placeholder,
-      ...inputProps
-    }
-  });
-  if (FoundComponent) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
-      role: "none"
-    }, FoundComponent);
-  }
-  const jsonPath = (0, import_effect4.createJsonPath)(path ?? []);
-  const CustomComponent = Custom?.[jsonPath];
-  if (CustomComponent) {
-    return (
-      // TODO(ZaymonFC): We should try to remove this div wrapper.
-      /* @__PURE__ */ import_react12.default.createElement("div", {
-        role: "none"
-      }, /* @__PURE__ */ import_react12.default.createElement(CustomComponent, {
-        type,
-        format,
-        label,
-        inputOnly: inline,
-        placeholder,
-        disabled: readonly,
-        ...inputProps
-      }))
-    );
-  }
-  if (array) {
-    return /* @__PURE__ */ import_react12.default.createElement(ArrayField, {
-      property,
-      path,
-      inputProps,
-      readonly,
-      Custom
-    });
-  }
-  const InputComponent = getInputComponent(type, format);
-  if (InputComponent) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ import_react12.default.createElement(InputComponent, {
-      type,
-      format,
-      label,
-      inputOnly: inline,
-      placeholder,
-      disabled: readonly,
-      ...inputProps
-    }));
-  }
-  if (options) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ import_react12.default.createElement(SelectInput, {
-      type,
-      format,
-      disabled: readonly,
-      inputOnly: inline,
-      label,
-      options: options.map((option) => ({
-        value: option,
-        label: String(option)
-      })),
-      placeholder,
-      ...inputProps
-    }));
-  }
-  if (type === "object") {
-    const baseNode = (0, import_effect4.findNode)(ast, import_effect4.isDiscriminatedUnion);
-    const typeLiteral = baseNode ? (0, import_effect4.getDiscriminatedType)(baseNode, inputProps.getValue()) : (0, import_effect4.findNode)(ast, import_echo_schema4.AST.isTypeLiteral);
-    if (typeLiteral) {
-      return /* @__PURE__ */ import_react12.default.createElement("div", {
-        role: "none"
-      }, !inline && /* @__PURE__ */ import_react12.default.createElement("div", null, label), /* @__PURE__ */ import_react12.default.createElement(FormFields, {
-        schema: import_echo_schema4.S.make(typeLiteral),
-        path,
-        readonly,
-        Custom
-      }));
+    onClick: () => {
+      const newValues = [
+        ...arrayValues,
+        import_effect2.SimpleType.getDefaultValue(type)
+      ];
+      inputProps.onValueChange(name, type, newValues);
     }
-  }
-  return null;
-};
-var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custom }) => {
-  const values = useFormValues(path);
-  const properties = (0, import_react12.useMemo)(() => {
-    const props = (0, import_schema3.getSchemaProperties)(schema.ast, values);
-    const filtered = filter ? filter(props) : props;
-    return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-  }, [
-    schema,
-    values,
-    filter,
-    sort
-  ]);
-  return /* @__PURE__ */ import_react12.default.createElement("div", {
-    role: "form",
-    className: (0, import_react_ui_theme7.mx)("flex flex-col w-full gap-2 py-2")
-  }, properties.map((property) => {
-    return /* @__PURE__ */ import_react12.default.createElement(FormField, {
-      key: property.name,
-      property,
-      path: [
-        ...path ?? [],
-        property.name
-      ],
-      readonly,
-      lookupComponent,
-      Custom
-    });
-  }).filter(import_util3.isNotFalsy));
+  })));
 };
-var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
-  const onValid = (0, import_react8.useMemo)(() => autoSave ? onSave : void 0, [
-    autoSave,
-    onSave
-  ]);
-  (0, import_react8.useEffect)(() => {
-    if (autoFocus) {
-      const input = document.querySelector("input");
-      if (input) {
-        input.focus();
-      }
-    }
-  }, [
-    autoFocus
-  ]);
-  return /* @__PURE__ */ import_react8.default.createElement(FormProvider, {
-    schema,
-    initialValues,
-    onValuesChanged,
-    onValidate,
-    onValid,
-    onSave
-  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+var FormActions = ({ onCancel, onSubmit, canSubmit, readonly }) => {
+  const { t } = (0, import_react_ui7.useTranslation)(translationKey);
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme5.mx)("p-2", classNames),
-    "data-testid": testId
-  }, /* @__PURE__ */ import_react8.default.createElement(FormFields, {
-    schema,
-    path,
-    readonly,
-    filter,
-    sort,
-    lookupComponent,
-    Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ import_react8.default.createElement(FormActions, {
-    onCancel,
-    readonly
+    className: "flex justify-center"
+  }, /* @__PURE__ */ import_react7.default.createElement("div", {
+    role: "none",
+    className: (0, import_react_ui_theme3.mx)(onCancel && !readonly && "grid grid-cols-2 gap-2")
+  }, onCancel && !readonly && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.IconButton, {
+    "data-testid": "cancel-button",
+    icon: "ph--x--regular",
+    label: t("button cancel"),
+    onClick: onCancel
+  }), onSubmit && /* @__PURE__ */ import_react7.default.createElement(import_react_ui7.IconButton, {
+    type: "submit",
+    "data-testid": "save-button",
+    disabled: !canSubmit,
+    icon: "ph--check--regular",
+    label: t("button save"),
+    onClick: onSubmit
   })));
 };
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
@@ -1085,7 +848,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
           type
         };
       }
-      return _props;
+      return props2;
     });
   }, [
     schemas,
@@ -1141,8 +904,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
       options: referenceSchema ? (0, import_schema.getSchemaProperties)(referenceSchema.ast).sort(import_schema.sortProperties).map((p) => ({
         value: p.name
       })) : []
-    }),
-    ["options"]: (props2) => /* @__PURE__ */ import_react2.default.createElement(SelectOptionInput, props2)
+    })
   }), [
     t,
     schemas,
@@ -1154,7 +916,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
       props
     }, {
       F: __dxlog_file3,
-      L: 174,
+      L: 173,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -1178,22 +940,22 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   });
 };
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
-var ViewMetaSchema = import_echo_schema7.S.Struct({
-  name: import_echo_schema7.S.String.annotations({
-    [import_echo_schema7.AST.TitleAnnotationId]: "View"
+var ViewMetaSchema = import_echo_schema5.S.Struct({
+  name: import_echo_schema5.S.String.annotations({
+    [import_echo_schema5.AST.TitleAnnotationId]: "View"
   }),
-  typename: import_echo_schema7.Format.DXN.annotations({
-    [import_echo_schema7.AST.TitleAnnotationId]: "Typename"
+  typename: import_echo_schema5.Format.DXN.annotations({
+    [import_echo_schema5.AST.TitleAnnotationId]: "Typename"
   })
-}).pipe(import_echo_schema7.S.mutable);
+}).pipe(import_echo_schema5.S.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = (0, import_react_ui10.useTranslation)(translationKey);
-  const projection = (0, import_react14.useMemo)(() => new import_schema5.ViewProjection(schema, view), [
+  const { t } = (0, import_react_ui8.useTranslation)(translationKey);
+  const projection = (0, import_react9.useMemo)(() => new import_schema4.ViewProjection(schema, view), [
     schema,
     view
   ]);
-  const [field, setField] = (0, import_react14.useState)();
-  const viewValues = (0, import_react14.useMemo)(() => {
+  const [field, setField] = (0, import_react9.useState)();
+  const viewValues = (0, import_react9.useMemo)(() => {
     return {
       name: view.name,
       // TODO(burdon): Need to warn user of possible consequences of editing.
@@ -1203,7 +965,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = (0, import_react14.useCallback)(({ name, typename }) => {
+  const handleViewUpdate = (0, import_react9.useCallback)(({ name, typename }) => {
     requestAnimationFrame(() => {
       if (view.name !== name) {
         view.name = name;
@@ -1217,77 +979,72 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     onTypenameChanged
   ]);
-  const handleSelect = (0, import_react14.useCallback)((field2) => {
+  const handleSelect = (0, import_react9.useCallback)((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = (0, import_react14.useCallback)(() => {
+  const handleAdd = (0, import_react9.useCallback)(() => {
     const field2 = projection.createFieldProjection();
     setField(field2);
   }, [
     view
   ]);
-  const handleMove = (0, import_react14.useCallback)((fromIndex, toIndex) => {
-    const fields = [
-      ...view.fields
-    ];
-    const [moved] = fields.splice(fromIndex, 1);
-    fields.splice(toIndex, 0, moved);
-    view.fields = fields;
+  const handleMove = (0, import_react9.useCallback)((fromIndex, toIndex) => {
+    (0, import_util4.arrayMove)(view.fields, fromIndex, toIndex);
   }, [
     view.fields
   ]);
-  const handleClose = (0, import_react14.useCallback)(() => setField(void 0), []);
-  return /* @__PURE__ */ import_react14.default.createElement("div", {
+  const handleClose = (0, import_react9.useCallback)(() => setField(void 0), []);
+  return /* @__PURE__ */ import_react9.default.createElement("div", {
     role: "none",
-    className: (0, import_react_ui_theme9.mx)("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ import_react14.default.createElement(Form, {
+    className: (0, import_react_ui_theme4.mx)("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ import_react9.default.createElement(Form, {
     autoFocus: true,
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
     onSave: handleViewUpdate
-  }), /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", {
+  }), /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ import_react14.default.createElement("label", {
-    className: (0, import_react_ui_theme9.mx)(import_react_ui_theme9.inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.Root, {
+  }, /* @__PURE__ */ import_react9.default.createElement("label", {
+    className: (0, import_react_ui_theme4.mx)(import_react_ui_theme4.inputTextLabel)
+  }, t("fields label"))), /* @__PURE__ */ import_react9.default.createElement(import_react_ui_list.List.Root, {
     items: view.fields,
-    isItem: import_echo_schema7.S.is(import_schema5.FieldSchema),
+    isItem: import_echo_schema5.S.is(import_schema4.FieldSchema),
     getId: (field2) => field2.id,
     onMove: handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, showHeading && /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, showHeading && /* @__PURE__ */ import_react9.default.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ import_react14.default.createElement("div", null), /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, /* @__PURE__ */ import_react9.default.createElement("div", null), /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ import_react14.default.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ import_react9.default.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ import_react9.default.createElement(import_react_ui_list.List.Item, {
     key: field2.id,
     item: field2,
-    classNames: (0, import_react_ui_theme9.mx)(grid, import_react_ui_theme9.ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemDragHandle, null), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemTitle, {
+    classNames: (0, import_react_ui_theme4.mx)(grid, import_react_ui_theme4.ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui_list.List.ItemDragHandle, null), /* @__PURE__ */ import_react9.default.createElement(import_react_ui_list.List.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ import_react14.default.createElement(import_react_ui_list2.List.ItemDeleteButton, {
+  }, field2.path), /* @__PURE__ */ import_react9.default.createElement(import_react_ui_list.List.ItemDeleteButton, {
     disabled: view.fields.length <= 1,
     onClick: () => onDelete(field2.id)
-  }))))))), field && /* @__PURE__ */ import_react14.default.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ import_react9.default.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ import_react14.default.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ import_react14.default.createElement(import_react_ui10.IconButton, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui8.IconButton, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: handleAdd,
     // TODO(burdon): Show field limit in ux (not tooltip).
-    disabled: view.fields.length >= import_schema5.VIEW_FIELD_LIMIT
+    disabled: view.fields.length >= import_schema4.VIEW_FIELD_LIMIT
   })));
 };
 var parseValue = ({ type, format, value }) => {
@@ -1296,7 +1053,7 @@ var parseValue = ({ type, format, value }) => {
   }
   const parseScalar = (type2) => {
     switch (type2) {
-      case import_echo_schema8.TypeEnum.Boolean: {
+      case import_echo_schema6.TypeEnum.Boolean: {
         if (typeof value === "string") {
           const lowercaseValue = value.toLowerCase();
           if (lowercaseValue === "0" || lowercaseValue === "false") {
@@ -1307,13 +1064,13 @@ var parseValue = ({ type, format, value }) => {
         }
         return Boolean(value);
       }
-      case import_echo_schema8.TypeEnum.Number: {
+      case import_echo_schema6.TypeEnum.Number: {
         const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
         const num = Number(cleaned);
         return Number.isNaN(num) ? null : num;
       }
-      case import_echo_schema8.TypeEnum.String:
-      case import_echo_schema8.TypeEnum.Ref:
+      case import_echo_schema6.TypeEnum.String:
+      case import_echo_schema6.TypeEnum.Ref:
         return String(value);
       default: {
         return value;
@@ -1324,22 +1081,22 @@ var parseValue = ({ type, format, value }) => {
     return parseScalar(type);
   }
   switch (format) {
-    case import_echo_schema8.FormatEnum.Boolean:
-      return parseScalar(import_echo_schema8.TypeEnum.Boolean);
-    case import_echo_schema8.FormatEnum.Number:
-    case import_echo_schema8.FormatEnum.Percent:
-    case import_echo_schema8.FormatEnum.Currency:
-      return parseScalar(import_echo_schema8.TypeEnum.Number);
-    case import_echo_schema8.FormatEnum.String:
-    case import_echo_schema8.FormatEnum.Markdown: {
-      return parseScalar(import_echo_schema8.TypeEnum.String);
+    case import_echo_schema6.FormatEnum.Boolean:
+      return parseScalar(import_echo_schema6.TypeEnum.Boolean);
+    case import_echo_schema6.FormatEnum.Number:
+    case import_echo_schema6.FormatEnum.Percent:
+    case import_echo_schema6.FormatEnum.Currency:
+      return parseScalar(import_echo_schema6.TypeEnum.Number);
+    case import_echo_schema6.FormatEnum.String:
+    case import_echo_schema6.FormatEnum.Markdown: {
+      return parseScalar(import_echo_schema6.TypeEnum.String);
     }
-    case import_echo_schema8.FormatEnum.Ref:
-      throw new Error(`unexpected format: ${import_echo_schema8.FormatEnum.Ref}`);
-    case import_echo_schema8.FormatEnum.DateTime:
-    case import_echo_schema8.FormatEnum.Date:
-    case import_echo_schema8.FormatEnum.Time:
-    case import_echo_schema8.FormatEnum.Timestamp: {
+    case import_echo_schema6.FormatEnum.Ref:
+      throw new Error(`unexpected format: ${import_echo_schema6.FormatEnum.Ref}`);
+    case import_echo_schema6.FormatEnum.DateTime:
+    case import_echo_schema6.FormatEnum.Date:
+    case import_echo_schema6.FormatEnum.Time:
+    case import_echo_schema6.FormatEnum.Timestamp: {
       const date = new Date(value);
       return isNaN(date.getTime()) ? null : date;
     }
@@ -1351,19 +1108,19 @@ var parseValue = ({ type, format, value }) => {
 var cellClassesForFieldType = ({ type, format }) => {
   if (!format) {
     switch (type) {
-      case import_echo_schema8.TypeEnum.Number:
+      case import_echo_schema6.TypeEnum.Number:
         return [
           "text-right",
           "font-mono"
         ];
-      case import_echo_schema8.TypeEnum.Boolean:
+      case import_echo_schema6.TypeEnum.Boolean:
         return [
           "text-right",
           "font-mono"
         ];
-      case import_echo_schema8.TypeEnum.String:
+      case import_echo_schema6.TypeEnum.String:
         return void 0;
-      case import_echo_schema8.TypeEnum.Ref:
+      case import_echo_schema6.TypeEnum.Ref:
         return void 0;
       default: {
         return void 0;
@@ -1371,20 +1128,20 @@ var cellClassesForFieldType = ({ type, format }) => {
     }
   }
   switch (format) {
-    case import_echo_schema8.FormatEnum.Markdown:
+    case import_echo_schema6.FormatEnum.Markdown:
       return void 0;
-    case import_echo_schema8.FormatEnum.Timestamp:
-    case import_echo_schema8.FormatEnum.DateTime:
-    case import_echo_schema8.FormatEnum.Date:
-    case import_echo_schema8.FormatEnum.Time:
+    case import_echo_schema6.FormatEnum.Timestamp:
+    case import_echo_schema6.FormatEnum.DateTime:
+    case import_echo_schema6.FormatEnum.Date:
+    case import_echo_schema6.FormatEnum.Time:
       return [
         "font-mono"
       ];
-    case import_echo_schema8.FormatEnum.Currency:
+    case import_echo_schema6.FormatEnum.Currency:
       return [
         "text-right"
       ];
-    case import_echo_schema8.FormatEnum.JSON:
+    case import_echo_schema6.FormatEnum.JSON:
       return [
         "font-mono"
       ];
@@ -1402,12 +1159,12 @@ var pathNotUniqueError = (path) => ({
 var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
   const formatScalar = (type2) => {
     switch (type2) {
-      case import_echo_schema9.TypeEnum.Boolean:
+      case import_echo_schema7.TypeEnum.Boolean:
         return value.toLocaleString().toUpperCase();
-      case import_echo_schema9.TypeEnum.Number:
+      case import_echo_schema7.TypeEnum.Number:
         return value.toLocaleString(locale);
-      case import_echo_schema9.TypeEnum.String:
-      case import_echo_schema9.TypeEnum.Ref:
+      case import_echo_schema7.TypeEnum.String:
+      case import_echo_schema7.TypeEnum.Ref:
         return String(value);
       default: {
         return String(value);
@@ -1418,20 +1175,20 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
     return formatScalar(type);
   }
   switch (format) {
-    case import_echo_schema9.FormatEnum.Boolean: {
-      return formatScalar(import_echo_schema9.TypeEnum.Boolean);
+    case import_echo_schema7.FormatEnum.Boolean: {
+      return formatScalar(import_echo_schema7.TypeEnum.Boolean);
     }
-    case import_echo_schema9.FormatEnum.Number: {
-      return formatScalar(import_echo_schema9.TypeEnum.Number);
+    case import_echo_schema7.FormatEnum.Number: {
+      return formatScalar(import_echo_schema7.TypeEnum.Number);
     }
-    case import_echo_schema9.FormatEnum.String:
-    case import_echo_schema9.FormatEnum.Ref: {
-      return formatScalar(import_echo_schema9.TypeEnum.String);
+    case import_echo_schema7.FormatEnum.String:
+    case import_echo_schema7.FormatEnum.Ref: {
+      return formatScalar(import_echo_schema7.TypeEnum.String);
     }
-    case import_echo_schema9.FormatEnum.Percent: {
+    case import_echo_schema7.FormatEnum.Percent: {
       return `${value * 100}%`;
     }
-    case import_echo_schema9.FormatEnum.Currency: {
+    case import_echo_schema7.FormatEnum.Currency: {
       return value.toLocaleString(locale, {
         style: "currency",
         currency: "USD",
@@ -1439,13 +1196,13 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
         maximumFractionDigits: 2
       });
     }
-    case import_echo_schema9.FormatEnum.DateTime:
-    case import_echo_schema9.FormatEnum.Date:
-    case import_echo_schema9.FormatEnum.Time: {
+    case import_echo_schema7.FormatEnum.DateTime:
+    case import_echo_schema7.FormatEnum.Date:
+    case import_echo_schema7.FormatEnum.Time: {
       const date = new Date(value);
-      if (format === import_echo_schema9.FormatEnum.DateTime) {
+      if (format === import_echo_schema7.FormatEnum.DateTime) {
         return date.toLocaleString(locale);
-      } else if (format === import_echo_schema9.FormatEnum.Date) {
+      } else if (format === import_echo_schema7.FormatEnum.Date) {
         return date.toLocaleDateString(locale);
       } else {
         return date.toLocaleTimeString(locale);
@@ -1462,10 +1219,10 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
 var formatForEditing = ({ type, format, value, locale = void 0 }) => {
   const formatScalar = (type2) => {
     switch (type2) {
-      case import_echo_schema9.TypeEnum.Boolean:
-      case import_echo_schema9.TypeEnum.Number:
-      case import_echo_schema9.TypeEnum.String:
-      case import_echo_schema9.TypeEnum.Ref:
+      case import_echo_schema7.TypeEnum.Boolean:
+      case import_echo_schema7.TypeEnum.Number:
+      case import_echo_schema7.TypeEnum.String:
+      case import_echo_schema7.TypeEnum.Ref:
         return String(value);
       default:
         return String(value);
@@ -1475,27 +1232,27 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
     return formatScalar(type);
   }
   switch (format) {
-    case import_echo_schema9.FormatEnum.Boolean:
-    case import_echo_schema9.FormatEnum.Number:
-    case import_echo_schema9.FormatEnum.String:
-    case import_echo_schema9.FormatEnum.Ref: {
+    case import_echo_schema7.FormatEnum.Boolean:
+    case import_echo_schema7.FormatEnum.Number:
+    case import_echo_schema7.FormatEnum.String:
+    case import_echo_schema7.FormatEnum.Ref: {
       return formatScalar(type);
     }
-    case import_echo_schema9.FormatEnum.Percent: {
+    case import_echo_schema7.FormatEnum.Percent: {
       return String(value * 100);
     }
-    case import_echo_schema9.FormatEnum.Currency: {
+    case import_echo_schema7.FormatEnum.Currency: {
       return String(value);
     }
-    case import_echo_schema9.FormatEnum.DateTime: {
+    case import_echo_schema7.FormatEnum.DateTime: {
       const date = new Date(value);
       return date.toISOString();
     }
-    case import_echo_schema9.FormatEnum.Date: {
+    case import_echo_schema7.FormatEnum.Date: {
       const date = new Date(value);
       return date.toISOString().split("T")[0];
     }
-    case import_echo_schema9.FormatEnum.Time: {
+    case import_echo_schema7.FormatEnum.Time: {
       const date = new Date(value);
       return date.toISOString().split("T")[1].split(".")[0];
     }
@@ -1507,15 +1264,14 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BooleanInput,
-  DeprecatedFormContainer,
   DeprecatedFormInput,
   FieldEditor,
   Form,
+  FormActions,
   GeoPointInput,
   InputHeader,
   NumberInput,
   SelectInput,
-  SelectOptionInput,
   TextInput,
   TupleInput,
   ViewEditor,