@dxos/react-ui-form 0.7.5-labs.a279d8c → 0.7.5-labs.d453967

package/dist/lib/browser/index.mjs

@@ -35,6 +35,7 @@ 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",
@@ -44,7 +45,13 @@ var translations_default = [
         "format uuid": "UUID",
         // Placeholders
         "placeholder latitude": "Latitude",
-        "placeholder longitude": "Longitude"
+        "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"
       }
     }
   }
@@ -53,6 +60,16 @@ var translations_default = [
 // packages/ui/react-ui-form/src/components/deprecated/FormInput.tsx
 import React from "react";
 import { Input } from "@dxos/react-ui";
+import { mx, textBlockWidth } from "@dxos/react-ui-theme";
+var DeprecatedFormContainer = ({ children, classNames }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "w-full p-4 justify-center overflow-x-hidden overflow-y-auto"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "form",
+    className: mx("flex flex-col", textBlockWidth, classNames)
+  }, children));
+};
 var DeprecatedFormInput = ({ label, description, secondary, children }) => {
   const primary = /* @__PURE__ */ React.createElement("div", {
     role: "none",
@@ -61,198 +78,35 @@ var DeprecatedFormInput = ({ label, description, secondary, children }) => {
     role: "none",
     className: "flex flex-col w-full"
   }, /* @__PURE__ */ React.createElement(Input.Label, {
-    classNames: "flex min-h-[40px] items-center"
+    classNames: "flex min-bs-[--rail-action] items-center",
+    style: {
+      fontSize: "unset"
+    }
   }, label), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, {
     classNames: "mbs-0.5"
   }, /* @__PURE__ */ React.createElement(Input.Description, null, description))), /* @__PURE__ */ React.createElement("div", {
     role: "none"
   }, /* @__PURE__ */ React.createElement("div", {
     role: "none",
-    className: "flex min-h-[40px] items-center"
+    className: "flex min-bs-[--rail-action] items-center"
   }, children))));
   if (secondary) {
     return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex flex-col w-full"
+      role: "none"
     }, primary, secondary);
   }
   return primary;
 };
 
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
-import React11, { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo5, useState as useState2 } from "react";
+import React12, { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo5, useState as useState3 } from "react";
 import { FormatEnum as FormatEnum2, FormatEnums, formatToType } from "@dxos/echo-schema";
 import { log as log2 } from "@dxos/log";
-import { useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { useTranslation as useTranslation5 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
 
-// packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-import React3 from "react";
-import { Input as Input2, useTranslation } from "@dxos/react-ui";
-import { safeParseFloat } from "@dxos/util";
-
-// packages/ui/react-ui-form/src/components/Form/Input.tsx
-import React2 from "react";
-import { Icon, Tooltip } from "@dxos/react-ui";
-import { errorText } from "@dxos/react-ui-theme";
-var InputHeader = ({ children, error }) => {
-  return /* @__PURE__ */ React2.createElement("div", {
-    role: "none",
-    className: "flex justify-between items-center mb-1"
-  }, children, error && /* @__PURE__ */ React2.createElement(Tooltip.Root, null, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    icon: "ph--warning--regular",
-    size: 4,
-    classNames: errorText
-  })), /* @__PURE__ */ React2.createElement(Tooltip.Content, {
-    side: "bottom"
-  }, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null), error)));
-};
-
-// packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
-var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { t } = useTranslation(translationKey);
-  const { status, error } = getStatus();
-  const [lng = 0, lat = 0] = getValue3() ?? [];
-  return /* @__PURE__ */ React3.createElement(Input2.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ React3.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React3.createElement(Input2.Label, null, label)), /* @__PURE__ */ React3.createElement("div", {
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder longitude"),
-    value: lng,
-    onChange: (event) => onValueChange(type, [
-      lat,
-      safeParseFloat(event.target.value, 0)
-    ]),
-    onBlur
-  }), /* @__PURE__ */ React3.createElement(Input2.TextInput, {
-    type: "number",
-    disabled,
-    placeholder: t("placeholder latitude"),
-    value: lat,
-    onChange: (event) => onValueChange(type, [
-      safeParseFloat(event.target.value, 0),
-      lng
-    ]),
-    onBlur
-  })));
-};
-
-// packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
-import React4 from "react";
-import { Input as Input3 } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
-import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
-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__ */ React4.createElement(Input3.Root, {
-    validationValence: status
-  }, /* @__PURE__ */ React4.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React4.createElement(Input3.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
-    className: mx("grid gap-2", gridCols[binding.length - 1])
-  }, binding.map((prop) => /* @__PURE__ */ React4.createElement(Input3.TextInput, {
-    key: prop,
-    type: "number",
-    disabled,
-    value: values[prop],
-    onChange: (event) => onValueChange(type, {
-      ...values,
-      [prop]: safeParseFloat2(event.target.value, 0)
-    }),
-    onBlur
-  }))));
-};
-
-// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
-import React5 from "react";
-import { Input as Input4, Select } from "@dxos/react-ui";
-var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ React5.createElement(Input4.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.TextInput, {
-    disabled,
-    placeholder,
-    value: getValue3() ?? "",
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur
-  }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.Validation, null, error));
-};
-var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ React5.createElement(Input4.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.TextInput, {
-    type: "number",
-    disabled,
-    placeholder,
-    value: getValue3() ?? 0,
-    onChange: (event) => onValueChange(type, event.target.value),
-    onBlur
-  }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
-};
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ React5.createElement(Input4.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Input4.Switch, {
-    checked: getValue3(),
-    onCheckedChange: (value) => onValueChange(type, value)
-  }), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
-};
-var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  const { status, error } = getStatus();
-  return /* @__PURE__ */ React5.createElement(Input4.Root, {
-    validationValence: status
-  }, !inputOnly && /* @__PURE__ */ React5.createElement(InputHeader, {
-    error
-  }, /* @__PURE__ */ React5.createElement(Input4.Label, null, label)), /* @__PURE__ */ React5.createElement(Select.Root, {
-    value: getValue3(),
-    onValueChange: (value) => onValueChange(type, value)
-  }, /* @__PURE__ */ React5.createElement(Select.TriggerButton, {
-    classNames: "is-full",
-    disabled,
-    placeholder
-  }), /* @__PURE__ */ React5.createElement(Select.Portal, null, /* @__PURE__ */ React5.createElement(Select.Content, null, /* @__PURE__ */ React5.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
-    // NOTE: Numeric values are converted to and from strings.
-    /* @__PURE__ */ React5.createElement(Select.Option, {
-      key: String(value),
-      value: String(value)
-    }, label2 ?? String(value))
-  )))))), inputOnly && /* @__PURE__ */ React5.createElement(Input4.DescriptionAndValidation, null, error));
-};
-
-// packages/ui/react-ui-form/src/components/Form/Form.tsx
-import React10, { useMemo as useMemo4 } from "react";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-form/src/components/Form/FormActions.tsx
-import React7 from "react";
-import { IconButton, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-
 // packages/ui/react-ui-form/src/components/Form/FormContext.tsx
-import React6, { createContext, useContext } from "react";
+import React2, { createContext, useContext, useEffect as useEffect2 } from "react";
 import { raise } from "@dxos/debug";
 import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -268,7 +122,7 @@ var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/ho
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
   invariant(AST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
-    L: 91,
+    L: 92,
     S: void 0,
     A: [
       "AST.isTypeLiteral(schema.ast)",
@@ -311,6 +165,11 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     schemaDirty
   ]);
+  const formIsValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [
+    errors
+  ]);
   const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors
   !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
     touched,
@@ -357,7 +216,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 194,
+        L: 198,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -398,6 +257,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     changed,
     canSave,
     handleSave,
+    formIsValid,
     // Field utils.
     getStatus,
     getValue: getFormValue,
@@ -408,7 +268,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 236,
+    L: 241,
     S: void 0,
     A: [
       "obj",
@@ -449,29 +309,445 @@ var useInputProps = (path = []) => {
     onBlur: () => onTouched(path)
   };
 };
-var FormProvider = ({ children, ...formOptions }) => {
-  const formHandler = useForm(formOptions);
-  return /* @__PURE__ */ React6.createElement(FormContext.Provider, {
-    value: formHandler
+var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
+  const form = useForm(formOptions);
+  useEffect2(() => {
+    if (!formRef?.current) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      const keyIsEnter = event.key === "Enter";
+      const modifierUsed = event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+      const inputIsTextarea = event.target.tagName.toLowerCase() === "textarea";
+      const inputOptOut = event.target.hasAttribute("data-no-submit");
+      const shouldSubmitRegularInput = !inputIsTextarea && keyIsEnter && !modifierUsed;
+      const shouldSubmitTextarea = inputIsTextarea && keyIsEnter && event.metaKey;
+      if ((shouldSubmitRegularInput || shouldSubmitTextarea) && !inputOptOut) {
+        if (!autoSave && form.canSave) {
+          form.handleSave();
+        }
+        if (autoSave && form.formIsValid) {
+          event.target.blur();
+        }
+      }
+    };
+    const formElement = formRef.current;
+    formElement.addEventListener("keydown", handleKeyDown);
+    return () => formElement.removeEventListener("keydown", handleKeyDown);
+  }, [
+    formRef,
+    form.canSave,
+    form.formIsValid,
+    form.handleSave,
+    autoSave
+  ]);
+  return /* @__PURE__ */ React2.createElement(FormContext.Provider, {
+    value: form
   }, children);
 };
 
+// packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
+import React4 from "react";
+import { Input as Input2, useTranslation } from "@dxos/react-ui";
+import { safeParseFloat } from "@dxos/util";
+
+// packages/ui/react-ui-form/src/components/Form/Input.tsx
+import React3 from "react";
+import { Icon, Tooltip } from "@dxos/react-ui";
+import { errorText } from "@dxos/react-ui-theme";
+var InputHeader = ({ children, error }) => {
+  return /* @__PURE__ */ React3.createElement("div", {
+    role: "none",
+    className: "flex justify-between items-center mb-1"
+  }, children, error && /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: errorText
+  })), /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+    side: "bottom"
+  }, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null), error)));
+};
+
+// packages/ui/react-ui-form/src/components/Form/custom/GeoPointInput.tsx
+var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { t } = useTranslation(translationKey);
+  const { status, error } = getStatus();
+  const [lng = 0, lat = 0] = getValue3() ?? [];
+  return /* @__PURE__ */ React4.createElement(Input2.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React4.createElement(Input2.Label, null, label)), /* @__PURE__ */ React4.createElement("div", {
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React4.createElement(Input2.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder longitude"),
+    value: lng,
+    onChange: (event) => onValueChange(type, [
+      lat,
+      safeParseFloat(event.target.value, 0)
+    ]),
+    onBlur
+  }), /* @__PURE__ */ React4.createElement(Input2.TextInput, {
+    type: "number",
+    disabled,
+    placeholder: t("placeholder latitude"),
+    value: lat,
+    onChange: (event) => onValueChange(type, [
+      safeParseFloat(event.target.value, 0),
+      lng
+    ]),
+    onBlur
+  })));
+};
+
+// packages/ui/react-ui-form/src/components/Form/custom/SelectOptionsInput.tsx
+import React5, { useCallback as useCallback2, useEffect as useEffect3, useState as useState2, useRef } from "react";
+import { PublicKey } from "@dxos/keys";
+import { Icon as Icon2, IconButton, Input as Input3, Tag, Toolbar, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { List } from "@dxos/react-ui-list";
+import { HuePickerToolbarButton } from "@dxos/react-ui-pickers";
+import { hues, mx as mx2 } from "@dxos/react-ui-theme";
+var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
+  const [selected, setSelectedId] = useState2(null);
+  const [isNewOption, setIsNewOption] = useState2(false);
+  const inputRef = useRef(null);
+  const { t } = useTranslation2(translationKey);
+  const { status, error } = getStatus();
+  const options = getValue3();
+  useEffect3(() => {
+    if (options === void 0) {
+      onValueChange(type, []);
+    }
+  }, [
+    options,
+    onValueChange,
+    type
+  ]);
+  const randomHue = () => {
+    const usedHues = new Set(options?.map((option) => option.color) ?? []);
+    const unusedHues = hues.filter((hue) => !usedHues.has(hue));
+    if (unusedHues.length > 0) {
+      return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+    }
+    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
+    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
+  };
+  const handleAdd = useCallback2(() => {
+    const newId = PublicKey.random().truncate();
+    const newOption = {
+      id: newId,
+      title: "",
+      color: randomHue()
+    };
+    onValueChange(type, [
+      ...options ?? [],
+      newOption
+    ]);
+    setSelectedId(newId);
+    setIsNewOption(true);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleDelete = useCallback2((id) => {
+    const newOptions = options?.filter((option) => option.id !== id) ?? [];
+    onValueChange(type, newOptions);
+    setSelectedId(null);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleMove = useCallback2((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 = useCallback2((id) => {
+    setSelectedId((current) => current === id ? null : id);
+  }, []);
+  const handleTitleChange = useCallback2((id) => (e) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      title: e.target.value
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleKeyDown = useCallback2((e) => {
+    if (e.key === "Enter") {
+      setSelectedId(null);
+    }
+  }, []);
+  const handleColorChange = useCallback2((id) => (hue) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      color: hue
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  useEffect3(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
+    }
+  }, [
+    selected,
+    isNewOption
+  ]);
+  return /* @__PURE__ */ React5.createElement(Input3.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React5.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React5.createElement(Input3.Label, null, label)), /* @__PURE__ */ React5.createElement("div", {
+    role: "none"
+  }, options && /* @__PURE__ */ React5.createElement(List.Root, {
+    items: options,
+    isItem: (item) => true,
+    onMove: handleMove
+  }, ({ items }) => /* @__PURE__ */ React5.createElement("div", {
+    role: "list",
+    className: "w-full overflow-auto"
+  }, items?.map((item) => /* @__PURE__ */ React5.createElement("div", {
+    key: item.id
+  }, /* @__PURE__ */ React5.createElement(List.Item, {
+    role: "button",
+    item,
+    classNames: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    "aria-expanded": selected === item.id
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "flex items-center"
+  }, /* @__PURE__ */ React5.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React5.createElement(List.ItemTitle, {
+    onClick: () => handleClick(item.id),
+    classNames: "flex-1"
+  }, /* @__PURE__ */ React5.createElement(Tag, {
+    palette: item.color
+  }, item.title || "\u200B")), /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+    onClick: () => handleClick(item.id)
+  })), selected === item.id && /* @__PURE__ */ React5.createElement("div", {
+    className: "mis-4 mbs-2 flex flex-col gap-1"
+  }, /* @__PURE__ */ React5.createElement(Input3.Label, {
+    classNames: "text-xs"
+  }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
+    className: "flex flex-row items-center gap-1"
+  }, /* @__PURE__ */ React5.createElement(Input3.TextInput, {
+    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__ */ React5.createElement(Toolbar.Root, {
+    classNames: "p-0 m-0 !is-auto"
+  }, /* @__PURE__ */ React5.createElement(HuePickerToolbarButton, {
+    hue: item.color,
+    onChangeHue: handleColorChange(item.id)
+  })), /* @__PURE__ */ React5.createElement(IconButton, {
+    icon: "ph--trash--fill",
+    iconOnly: true,
+    label: t("select option delete"),
+    onClick: () => handleDelete(item.id)
+  })))))), /* @__PURE__ */ React5.createElement("div", {
+    role: "listitem"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    role: "button",
+    className: mx2("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
+    onClick: handleAdd
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "flex items-center gap-1"
+  }, /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: "ph--plus--regular"
+  }), /* @__PURE__ */ React5.createElement("span", {
+    className: "text-sm"
+  }, t("select option add")))))))));
+};
+
+// packages/ui/react-ui-form/src/components/Form/custom/TupleInput.tsx
+import React6 from "react";
+import { Input as Input4 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
+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__ */ React6.createElement(Input4.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React6.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React6.createElement(Input4.Label, null, label)), /* @__PURE__ */ React6.createElement("div", {
+    className: mx3("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input4.TextInput, {
+    key: prop,
+    type: "number",
+    disabled,
+    value: values[prop],
+    onChange: (event) => onValueChange(type, {
+      ...values,
+      [prop]: safeParseFloat2(event.target.value, 0)
+    }),
+    onBlur
+  }))));
+};
+
+// packages/ui/react-ui-form/src/components/Form/Defaults.tsx
+import React7, { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { Input as Input5, Select } from "@dxos/react-ui";
+var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.TextInput, {
+    disabled,
+    placeholder,
+    value: getValue3() ?? "",
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.Validation, null, error));
+};
+var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.TextInput, {
+    type: "number",
+    disabled,
+    placeholder,
+    value: getValue3() ?? 0,
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
+};
+var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange }) => {
+  const { status, error } = getStatus();
+  const checked = Boolean(getValue3());
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.Switch, {
+    checked,
+    onCheckedChange: (value) => onValueChange(type, value)
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
+};
+var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
+  const { status, error } = getStatus();
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Select.Root, {
+    value: getValue3(),
+    onValueChange: (value) => onValueChange(type, value)
+  }, /* @__PURE__ */ React7.createElement(Select.TriggerButton, {
+    classNames: "is-full",
+    disabled,
+    placeholder
+  }), /* @__PURE__ */ React7.createElement(Select.Portal, null, /* @__PURE__ */ React7.createElement(Select.Content, null, /* @__PURE__ */ React7.createElement(Select.Viewport, null, options?.map(({ value, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ React7.createElement(Select.Option, {
+      key: String(value),
+      value: String(value)
+    }, label2 ?? String(value))
+  )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input5.DescriptionAndValidation, null, error));
+};
+var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef2(null);
+  const adjustHeight = useCallback3(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+    }
+  }, []);
+  useEffect4(() => {
+    adjustHeight();
+  }, [
+    adjustHeight
+  ]);
+  useEffect4(() => {
+    adjustHeight();
+  }, [
+    getValue3(),
+    adjustHeight
+  ]);
+  return /* @__PURE__ */ React7.createElement(Input5.Root, {
+    validationValence: status
+  }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    error
+  }, /* @__PURE__ */ React7.createElement(Input5.Label, null, label)), /* @__PURE__ */ React7.createElement(Input5.TextArea, {
+    ref: textareaRef,
+    disabled,
+    placeholder,
+    value: getValue3() ?? "",
+    classNames: "min-bs-auto overflow-hidden",
+    onChange: (event) => onValueChange(type, event.target.value),
+    onBlur,
+    style: {
+      resize: "none"
+    },
+    spellCheck: false
+  }), inputOnly && /* @__PURE__ */ React7.createElement(Input5.Validation, null, error));
+};
+
+// packages/ui/react-ui-form/src/components/Form/Form.tsx
+import React11, { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef3 } from "react";
+import { mx as mx7 } from "@dxos/react-ui-theme";
+
 // packages/ui/react-ui-form/src/components/Form/FormActions.tsx
+import React8 from "react";
+import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 var FormActions = ({ onCancel, readonly }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation3(translationKey);
   const { canSave, handleSave } = useFormContext();
-  return /* @__PURE__ */ React7.createElement("div", {
+  return /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: "flex justify-center"
-  }, /* @__PURE__ */ React7.createElement("div", {
+    className: "mt-2 flex justify-center"
+  }, /* @__PURE__ */ React8.createElement("div", {
     role: "none",
-    className: mx2(onCancel && !readonly && "grid grid-cols-2 gap-2")
-  }, onCancel && !readonly && /* @__PURE__ */ React7.createElement(IconButton, {
+    className: mx4(onCancel && !readonly && "grid grid-cols-2 gap-2")
+  }, onCancel && !readonly && /* @__PURE__ */ React8.createElement(IconButton2, {
     "data-testid": "cancel-button",
     icon: "ph--x--regular",
     label: t("button cancel"),
     onClick: onCancel
-  }), handleSave && /* @__PURE__ */ React7.createElement(IconButton, {
+  }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
     type: "submit",
     "data-testid": "save-button",
     disabled: !canSave,
@@ -484,36 +760,36 @@ var FormActions = ({ onCancel, readonly }) => {
 // packages/ui/react-ui-form/src/components/Form/FormContent.tsx
 import { pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
-import React9, { useMemo as useMemo3 } from "react";
+import React10, { useMemo as useMemo3 } from "react";
 import { AST as AST3, S } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath3, findNode as findNode2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
 // packages/ui/react-ui-form/src/components/Form/ArrayField.tsx
 import { pipe } from "effect";
 import { capitalize } from "effect/String";
-import React8, { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+import React9, { useCallback as useCallback4, useMemo as useMemo2 } from "react";
 import { AST as AST2 } from "@dxos/echo-schema";
 import { findNode, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { IconButton as IconButton3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 import { getSchemaProperties } from "@dxos/schema";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
 var padding = "px-2";
 var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  const { t } = useTranslation3(translationKey);
+  const { t } = useTranslation4(translationKey);
   const { ast, name, type, title } = property;
   const values = useFormValues(path ?? []);
-  invariant2(Array.isArray(values), void 0, {
+  invariant2(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 ?? pipe(name, capitalize);
@@ -540,7 +816,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     type,
     elementType
   ]);
-  const handleAdd = useCallback2(() => {
+  const handleAdd = useCallback4(() => {
     inputProps.onValueChange(type, [
       ...values,
       newValue
@@ -552,7 +828,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     newValue,
     values
   ]);
-  const handleRemove = useCallback2((index) => {
+  const handleRemove = useCallback4((index) => {
     const newValues = values.filter((_, i) => i !== index);
     inputProps.onValueChange(type, newValues);
   }, [
@@ -563,20 +839,20 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   if (!elementType) {
     return null;
   }
-  return /* @__PURE__ */ React8.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     role: "none",
-    className: mx3(padding)
-  }, /* @__PURE__ */ React8.createElement(InputHeader, null, label), /* @__PURE__ */ React8.createElement("div", {
+    className: mx5(padding)
+  }, /* @__PURE__ */ React9.createElement(InputHeader, null, label), /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "flex flex-col gap-1"
-  }, values.map((_value, index) => /* @__PURE__ */ React8.createElement("div", {
+  }, values.map((_value, index) => /* @__PURE__ */ React9.createElement("div", {
     key: index,
     role: "none",
     className: "flex items-center gap-1"
-  }, /* @__PURE__ */ React8.createElement("div", {
+  }, /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "flex-1"
-  }, /* @__PURE__ */ React8.createElement(FormField, {
+  }, /* @__PURE__ */ React9.createElement(FormField, {
     property: {
       ...property,
       array: false,
@@ -590,15 +866,15 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     inline: true,
     Custom,
     lookupComponent
-  })), /* @__PURE__ */ React8.createElement(IconButton2, {
+  })), /* @__PURE__ */ React9.createElement(IconButton3, {
     icon: "ph--trash--regular",
     iconOnly: true,
     label: t("button remove"),
     onClick: () => handleRemove(index)
-  })))), /* @__PURE__ */ React8.createElement("div", {
+  })))), /* @__PURE__ */ React9.createElement("div", {
     role: "none",
     className: "flex justify-between items-center plb-1"
-  }, /* @__PURE__ */ React8.createElement(IconButton2, {
+  }, /* @__PURE__ */ React9.createElement(IconButton3, {
     icon: "ph--plus--regular",
     iconOnly: true,
     label: t("button add"),
@@ -612,6 +888,8 @@ var getInputComponent = (type, format) => {
   switch (format) {
     case FormatEnum.LatLng:
       return GeoPointInput;
+    case FormatEnum.Markdown:
+      return MarkdownInput;
   }
   switch (type) {
     case "string":
@@ -635,15 +913,6 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     examples,
     description
   ]);
-  if (array) {
-    return /* @__PURE__ */ React9.createElement(ArrayField, {
-      property,
-      path,
-      inputProps,
-      readonly,
-      Custom
-    });
-  }
   const FoundComponent = lookupComponent?.({
     prop: name,
     schema: S.make(ast),
@@ -657,12 +926,37 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }
   });
   if (FoundComponent) {
-    return /* @__PURE__ */ React9.createElement("div", null, FoundComponent);
+    return /* @__PURE__ */ React10.createElement("div", {
+      role: "none"
+    }, FoundComponent);
   }
   const jsonPath = createJsonPath3(path ?? []);
-  const InputComponent = Custom?.[jsonPath] || getInputComponent(type, format);
+  const CustomComponent = Custom?.[jsonPath];
+  if (CustomComponent) {
+    return /* @__PURE__ */ React10.createElement(CustomComponent, {
+      type,
+      format,
+      label,
+      inputOnly: inline,
+      placeholder,
+      disabled: readonly,
+      ...inputProps
+    });
+  }
+  if (array) {
+    return /* @__PURE__ */ React10.createElement(ArrayField, {
+      property,
+      path,
+      inputProps,
+      readonly,
+      Custom
+    });
+  }
+  const InputComponent = getInputComponent(type, format);
   if (InputComponent) {
-    return /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement(InputComponent, {
+    return /* @__PURE__ */ React10.createElement("div", {
+      role: "none"
+    }, /* @__PURE__ */ React10.createElement(InputComponent, {
       type,
       format,
       label,
@@ -673,9 +967,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     }));
   }
   if (options) {
-    return /* @__PURE__ */ React9.createElement("div", {
+    return /* @__PURE__ */ React10.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React9.createElement(SelectInput, {
+    }, /* @__PURE__ */ React10.createElement(SelectInput, {
       type,
       format,
       disabled: readonly,
@@ -693,7 +987,9 @@ var FormField = ({ property, path, readonly, inline, lookupComponent, Custom })
     const baseNode = findNode2(ast, isDiscriminatedUnion2);
     const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode2(ast, AST3.isTypeLiteral);
     if (typeLiteral) {
-      return /* @__PURE__ */ React9.createElement("div", null, !inline && /* @__PURE__ */ React9.createElement("div", null, label), /* @__PURE__ */ React9.createElement(FormFields, {
+      return /* @__PURE__ */ React10.createElement("div", {
+        role: "none"
+      }, !inline && /* @__PURE__ */ React10.createElement("div", null, label), /* @__PURE__ */ React10.createElement(FormFields, {
         schema: S.make(typeLiteral),
         path,
         readonly,
@@ -715,11 +1011,11 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
     filter,
     sort
   ]);
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     role: "form",
-    className: mx4("flex flex-col w-full gap-2 py-2")
+    className: mx6("flex flex-col w-full gap-2")
   }, properties.map((property) => {
-    return /* @__PURE__ */ React9.createElement(FormField, {
+    return /* @__PURE__ */ React10.createElement(FormField, {
       key: property.name,
       property,
       path: [
@@ -734,23 +1030,37 @@ var FormFields = ({ schema, path, filter, sort, readonly, lookupComponent, Custo
 };
 
 // packages/ui/react-ui-form/src/components/Form/Form.tsx
-var Form = ({ classNames, schema, values: initialValues, path = [], readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
+var Form = ({ classNames, schema, values: initialValues, path = [], autoFocus, readonly, filter, sort, autoSave, testId, onValuesChanged, onValidate, onSave, onCancel, lookupComponent, Custom }) => {
+  const formRef = useRef3(null);
   const onValid = useMemo4(() => autoSave ? onSave : void 0, [
     autoSave,
     onSave
   ]);
-  return /* @__PURE__ */ React10.createElement(FormProvider, {
+  useEffect5(() => {
+    if (autoFocus && formRef.current) {
+      const input = formRef.current.querySelector("input");
+      if (input) {
+        input.focus();
+      }
+    }
+  }, [
+    autoFocus
+  ]);
+  return /* @__PURE__ */ React11.createElement(FormProvider, {
+    formRef,
     schema,
+    autoSave,
     initialValues,
     onValuesChanged,
     onValidate,
     onValid,
     onSave
-  }, /* @__PURE__ */ React10.createElement("div", {
+  }, /* @__PURE__ */ React11.createElement("div", {
+    ref: formRef,
     role: "none",
-    className: mx5("p-2", classNames),
+    className: mx7("p-2", classNames),
     "data-testid": testId
-  }, /* @__PURE__ */ React10.createElement(FormFields, {
+  }, /* @__PURE__ */ React11.createElement(FormFields, {
     schema,
     path,
     readonly,
@@ -758,7 +1068,7 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
     sort,
     lookupComponent,
     Custom
-  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React10.createElement(FormActions, {
+  }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React11.createElement(FormActions, {
     onCancel,
     readonly
   })));
@@ -767,14 +1077,14 @@ var Form = ({ classNames, schema, values: initialValues, path = [], readonly, fi
 // packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
-  const { t } = useTranslation4(translationKey);
-  const [props, setProps] = useState2(projection.getFieldProjection(field.id).props);
-  useEffect2(() => setProps(projection.getFieldProjection(field.id).props), [
+  const { t } = useTranslation5(translationKey);
+  const [props, setProps] = useState3(projection.getFieldProjection(field.id).props);
+  useEffect6(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
-  const [schemas, setSchemas] = useState2([]);
-  useEffect2(() => {
+  const [schemas, setSchemas] = useState3([]);
+  useEffect6(() => {
     if (!registry) {
       return;
     }
@@ -792,17 +1102,17 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = useState2();
-  useEffect2(() => {
+  const [referenceSchema, setReferenceSchema] = useState3();
+  useEffect6(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
   ]);
-  const [{ fieldSchema }, setFieldSchema] = useState2({
+  const [{ fieldSchema }, setFieldSchema] = useState3({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const handleValuesChanged = useCallback3((_props) => {
+  const handleValuesChanged = useCallback5((_props) => {
     setFieldSchema((prev) => {
       const fieldSchema2 = getFormatSchema(_props.format);
       if (prev.fieldSchema === fieldSchema2) {
@@ -830,14 +1140,14 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
           type
         };
       }
-      return props2;
+      return _props;
     });
   }, [
     schemas,
     props.format,
     props.referenceSchema
   ]);
-  const handleValidate = useCallback3(({ property }) => {
+  const handleValidate = useCallback5(({ property }) => {
     if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
       return [
         {
@@ -850,7 +1160,7 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     view.fields,
     field
   ]);
-  const handleSave = useCallback3((props2) => {
+  const handleSave = useCallback5((props2) => {
     projection.setFieldProjection({
       field,
       props: props2
@@ -861,50 +1171,51 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
     field,
     onSave
   ]);
-  const handleCancel = useCallback3(() => {
+  const handleCancel = useCallback5(() => {
     requestAnimationFrame(() => onCancel?.());
     onSave();
   }, [
     onSave
   ]);
   const Custom = useMemo5(() => ({
-    ["format"]: (props2) => /* @__PURE__ */ React11.createElement(SelectInput, {
+    ["format"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
       ...props2,
       options: FormatEnums.filter((value) => value !== FormatEnum2.None).map((value) => ({
         value,
         label: t(`format ${value}`)
       }))
     }),
-    ["referenceSchema"]: (props2) => /* @__PURE__ */ React11.createElement(SelectInput, {
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
       ...props2,
       options: schemas.map((schema) => ({
         value: schema.typename
       }))
     }),
-    ["referencePath"]: (props2) => /* @__PURE__ */ React11.createElement(SelectInput, {
+    ["referencePath"]: (props2) => /* @__PURE__ */ React12.createElement(SelectInput, {
       ...props2,
       options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
         value: p.name
       })) : []
-    })
+    }),
+    ["options"]: (props2) => /* @__PURE__ */ React12.createElement(SelectOptionInput, props2)
   }), [
     t,
     schemas,
     referenceSchema
   ]);
-  const propIsNotType = useCallback3((props2) => props2.filter((p) => p.name !== "type"), []);
+  const propIsNotType = useCallback5((props2) => props2.filter((p) => p.name !== "type"), []);
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
     }, {
       F: __dxlog_file3,
-      L: 173,
+      L: 174,
       S: void 0,
       C: (f, a) => f(...a)
     });
     return null;
   }
-  return /* @__PURE__ */ React11.createElement(Form, {
+  return /* @__PURE__ */ React12.createElement(Form, {
     key: field.id,
     autoFocus: true,
     values: props,
@@ -923,29 +1234,28 @@ var FieldEditor = ({ view, projection, field, registry, onSave, onCancel }) => {
 };
 
 // packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx
-import React12, { useCallback as useCallback4, useMemo as useMemo6, useState as useState3 } from "react";
+import React13, { useCallback as useCallback6, useMemo as useMemo6, useState as useState4 } from "react";
 import { AST as AST4, Format, S as S2 } from "@dxos/echo-schema";
-import { IconButton as IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { List } from "@dxos/react-ui-list";
-import { ghostHover, inputTextLabel, mx as mx6 } from "@dxos/react-ui-theme";
+import { IconButton as IconButton4, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { List as List2 } from "@dxos/react-ui-list";
+import { ghostHover, inputTextLabel, mx as mx8 } from "@dxos/react-ui-theme";
 import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
-import { arrayMove } from "@dxos/util";
 var grid = "grid grid-cols-[32px_1fr_32px] min-bs-[2.5rem]";
 var ViewMetaSchema = S2.Struct({
   name: S2.String.annotations({
     [AST4.TitleAnnotationId]: "View"
   }),
-  typename: Format.DXN.annotations({
+  typename: Format.URL.annotations({
     [AST4.TitleAnnotationId]: "Typename"
   })
 }).pipe(S2.mutable);
 var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading = false, onTypenameChanged, onDelete }) => {
-  const { t } = useTranslation5(translationKey);
+  const { t } = useTranslation6(translationKey);
   const projection = useMemo6(() => new ViewProjection(schema, view), [
     schema,
     view
   ]);
-  const [field, setField] = useState3();
+  const [field, setField] = useState4();
   const viewValues = useMemo6(() => {
     return {
       name: view.name,
@@ -956,7 +1266,7 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
   }, [
     view
   ]);
-  const handleViewUpdate = useCallback4(({ name, typename }) => {
+  const handleViewUpdate = useCallback6(({ name, typename }) => {
     requestAnimationFrame(() => {
       if (view.name !== name) {
         view.name = name;
@@ -970,67 +1280,71 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly, showHeading =
     schema,
     onTypenameChanged
   ]);
-  const handleSelect = useCallback4((field2) => {
+  const handleSelect = useCallback6((field2) => {
     setField((f) => f === field2 ? void 0 : field2);
   }, []);
-  const handleAdd = useCallback4(() => {
+  const handleAdd = useCallback6(() => {
     const field2 = projection.createFieldProjection();
     setField(field2);
   }, [
     view
   ]);
-  const handleMove = useCallback4((fromIndex, toIndex) => {
-    arrayMove(view.fields, fromIndex, toIndex);
+  const handleMove = useCallback6((fromIndex, toIndex) => {
+    const fields = [
+      ...view.fields
+    ];
+    const [moved] = fields.splice(fromIndex, 1);
+    fields.splice(toIndex, 0, moved);
+    view.fields = fields;
   }, [
     view.fields
   ]);
-  const handleClose = useCallback4(() => setField(void 0), []);
-  return /* @__PURE__ */ React12.createElement("div", {
+  const handleClose = useCallback6(() => setField(void 0), []);
+  return /* @__PURE__ */ React13.createElement("div", {
     role: "none",
-    className: mx6("flex flex-col w-full divide-y divide-separator", classNames)
-  }, /* @__PURE__ */ React12.createElement(Form, {
-    autoFocus: true,
+    className: mx8("flex flex-col w-full divide-y divide-separator", classNames)
+  }, /* @__PURE__ */ React13.createElement(Form, {
     autoSave: true,
     schema: ViewMetaSchema,
     values: viewValues,
     onSave: handleViewUpdate
-  }), /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("div", {
+  }), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("div", {
     role: "none",
     className: "p-2"
-  }, /* @__PURE__ */ React12.createElement("label", {
-    className: mx6(inputTextLabel)
-  }, t("fields label"))), /* @__PURE__ */ React12.createElement(List.Root, {
+  }, /* @__PURE__ */ React13.createElement("label", {
+    className: mx8(inputTextLabel)
+  }, t("fields label"))), /* @__PURE__ */ React13.createElement(List2.Root, {
     items: view.fields,
     isItem: S2.is(FieldSchema),
     getId: (field2) => field2.id,
     onMove: handleMove
-  }, ({ items: fields }) => /* @__PURE__ */ React12.createElement(React12.Fragment, null, showHeading && /* @__PURE__ */ React12.createElement("div", {
+  }, ({ items: fields }) => /* @__PURE__ */ React13.createElement(React13.Fragment, null, showHeading && /* @__PURE__ */ React13.createElement("div", {
     role: "heading",
     className: grid
-  }, /* @__PURE__ */ React12.createElement("div", null), /* @__PURE__ */ React12.createElement("div", {
+  }, /* @__PURE__ */ React13.createElement("div", null), /* @__PURE__ */ React13.createElement("div", {
     className: "flex items-center text-sm"
-  }, t("field path label"))), /* @__PURE__ */ React12.createElement("div", {
+  }, t("field path label"))), /* @__PURE__ */ React13.createElement("div", {
     role: "list",
     className: "flex flex-col w-full"
-  }, fields?.map((field2) => /* @__PURE__ */ React12.createElement(List.Item, {
+  }, fields?.map((field2) => /* @__PURE__ */ React13.createElement(List2.Item, {
     key: field2.id,
     item: field2,
-    classNames: mx6(grid, ghostHover, "cursor-pointer")
-  }, /* @__PURE__ */ React12.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React12.createElement(List.ItemTitle, {
+    classNames: mx8(grid, ghostHover, "cursor-pointer")
+  }, /* @__PURE__ */ React13.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React13.createElement(List2.ItemTitle, {
     onClick: () => handleSelect(field2)
-  }, field2.path), /* @__PURE__ */ React12.createElement(List.ItemDeleteButton, {
+  }, field2.path), /* @__PURE__ */ React13.createElement(List2.ItemDeleteButton, {
     disabled: view.fields.length <= 1,
     onClick: () => onDelete(field2.id)
-  }))))))), field && /* @__PURE__ */ React12.createElement(FieldEditor, {
+  }))))))), field && /* @__PURE__ */ React13.createElement(FieldEditor, {
     key: field.id,
     view,
     projection,
     field,
     registry,
     onSave: handleClose
-  }), !readonly && !field && /* @__PURE__ */ React12.createElement("div", {
+  }), !readonly && !field && /* @__PURE__ */ React13.createElement("div", {
     className: "flex p-2 justify-center"
-  }, /* @__PURE__ */ React12.createElement(IconButton3, {
+  }, /* @__PURE__ */ React13.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("button add property"),
     onClick: handleAdd,
@@ -1260,13 +1574,16 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
 };
 export {
   BooleanInput,
+  DeprecatedFormContainer,
   DeprecatedFormInput,
   FieldEditor,
   Form,
   GeoPointInput,
   InputHeader,
+  MarkdownInput,
   NumberInput,
   SelectInput,
+  SelectOptionInput,
   TextInput,
   TupleInput,
   ViewEditor,
@@ -1277,6 +1594,7 @@ export {
   parseValue,
   pathNotUniqueError,
   translations_default as translations,
-  useForm
+  useForm,
+  useFormValues
 };
 //# sourceMappingURL=index.mjs.map