@dxos/react-ui-form 0.8.4-main.84f28bd → 0.8.4-main.937b3ca

package/dist/lib/browser/index.mjs

@@ -1,5 +1,5 @@
 // src/translations.ts
-var translationKey = "react-ui-form";
+var translationKey = "@dxos/react-ui-form";
 var translations = [
   {
     "en-US": {
@@ -8,7 +8,7 @@ var translations = [
         "hidden fields label": "Hidden Fields",
         "empty readonly ref field label": "(none)",
         // TODO(burdon): Standardize field/property.
-        "button add property": "Add property",
+        "add property button label": "Add property",
         "field property label": "Property",
         "field property placeholder": "Property name",
         "field format label": "Type",
@@ -18,9 +18,17 @@ var translations = [
         "field limit reached": "Maximum number of fields reached",
         "boolean input true value": "Yes",
         "boolean input false value": "No",
-        // TODO(burdon): Factor out?
-        "button cancel": "Cancel",
-        "button save": "Save",
+        "show field label": "Show field",
+        "hide field label": "Hide field",
+        "delete field label": "Delete field",
+        "ref field combobox input placeholder": "Search\u2026",
+        "ref field placeholder_one": "Select\u2026",
+        "ref field placeholder_other": "Select items\u2026",
+        "example placeholder": "Example",
+        "latitude placeholder": "Latitude (e.g., 40.7128)",
+        "longitude placeholder": "Longitude (e.g., -74.0060)",
+        "cancel button label": "Cancel",
+        "save button label": "Save",
         // FormatEnum
         "format boolean": "Boolean",
         "format currency": "Currency",
@@ -34,7 +42,7 @@ var translations = [
         "format hostname": "Hostname",
         "format integer": "Integer",
         "format json": "JSON",
-        "format latlng": "Geopoint",
+        "format lnglat": "Geopoint",
         "format markdown": "Markdown",
         "format percent": "Percent",
         "format ref": "Reference",
@@ -50,751 +58,467 @@ var translations = [
         "format uri": "URI",
         "format url": "URL",
         "format uuid": "UUID",
-        // Placeholders.
-        "placeholder latitude": "Latitude",
-        "placeholder longitude": "Longitude",
-        // SelectOptionsInput.
+        // GeoPointField.
+        "latitude label": "Latitude",
+        "longitude label": "Longitude",
+        // SelectOptionsField.
         "select option label": "Label",
         "select option label placeholder": "Option label",
         "select option color": "Color",
         "select option delete": "Delete",
         "select option add": "Add option",
         // System schema message.
-        "system schema title": "System Schema",
-        "system schema description": "This is a system schema and cannot be modified."
+        "system schema title": "System type",
+        "system schema description": "System type: cannot add or remove fields."
       }
     }
   }
 ];
 
-// src/components/deprecated/FormInput.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-import { Input } from "@dxos/react-ui";
-import { mx, textBlockWidth } from "@dxos/react-ui-theme";
-var DeprecatedFormContainer = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto"
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "form",
-      className: mx("flex flex-col", textBlockWidth, classNames)
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var DeprecatedFormInput = ({ label, description, secondary, children }) => {
-  var _effect = _useSignals();
-  try {
-    const primary = /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex w-full gap-4 py-1"
-    }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex flex-col w-full"
-    }, /* @__PURE__ */ React.createElement(Input.Label, {
-      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-bs-[--rail-action] items-center"
-    }, children))));
-    if (secondary) {
-      return /* @__PURE__ */ React.createElement("div", {
-        role: "none"
-      }, primary, secondary);
-    }
-    return primary;
-  } finally {
-    _effect.f();
-  }
-};
-
 // src/components/ControlSection/ControlSection.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 from "react";
-import { Button, Input as Input2, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
+import React from "react";
+import { Button, Input, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { Layout } from "@dxos/react-ui-mosaic";
+import { mx } from "@dxos/ui-theme";
 var ControlPage = ({ children, classNames, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: mx2("pli-cardSpacingInline", classNames),
-      ...props
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement(Layout.Container, {
+    scrollable: true,
+    classNames: "[--control-spacing:var(--dx-trimMd)]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: mx("pli-cardSpacingInline pbe-trimMd", classNames),
+    ...props
+  }, children));
 };
 var ControlSection = ({ title, description, children }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
-      title,
-      description
-    }), children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ControlSectionHeading, {
+    title,
+    description
+  }), children);
 };
 var ControlSectionHeading = ({ title, description }) => {
-  var _effect = _useSignals2();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
-      className: "pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
-      className: "pli-trimMd mlb-trimMd container-max-width text-description"
-    }, toLocalizedString(description, t)));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
+    className: "pli-trimMd container-max-width text-xl mbs-trimMd mbe-trimMd"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
+    className: "pli-trimMd mlb-trimMd container-max-width text-description"
+  }, toLocalizedString(description, t)));
 };
 var ControlGroupButton = ({ classNames, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(Button, {
-      ...props,
-      classNames: [
-        "md:col-span-2",
-        classNames
-      ]
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ControlGroup = ({ children, classNames }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlFrame = ({ children }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: "p-trimMd container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd border border-separator rounded-md"
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React.createElement(Button, {
+    ...props,
+    classNames: [
+      "md:col-span-2",
+      classNames
+    ]
+  });
 };
-var controlItemClasses = "pli-trimMd plb-trimMd container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-trimSm border border-separator rounded-md *:first:!mbs-0 *:last:!mbe-0";
-var controlItemTitleClasses = "text-lg font-normal";
-var controlItemDescriptionClasses = "text-base mlb-trimSm md:mbe-0 text-description";
+var ControlGroup = ({ children, classNames }) => /* @__PURE__ */ React.createElement("div", {
+  role: "none",
+  className: mx("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", "[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end", classNames)
+}, children);
+var ControlFrame = ({ children }) => /* @__PURE__ */ React.createElement("div", {
+  role: "none",
+  className: mx("container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd", "border border-separator rounded-md")
+}, children);
+var controlItemClasses = mx([
+  "container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center",
+  // TODO(burdon): Use grid gap consistently or apply margins consistently?
+  "mlb-[--control-spacing] *:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd",
+  "border border-separator rounded-md"
+]);
+var controlItemTitleClasses = "mbe-0 text-lg text-baseText font-normal";
+var controlItemDescriptionClasses = "mlb-trimSm md:mbe-0 text-base text-description";
 var ControlItem = ({ title, description, children }) => {
-  var _effect = _useSignals2();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement("div", {
-      className: controlItemClasses
-    }, /* @__PURE__ */ React2.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React2.createElement("h3", {
-      className: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
-      className: controlItemDescriptionClasses
-    }, toLocalizedString(description, t))), children);
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: controlItemTitleClasses
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
+    className: controlItemDescriptionClasses
+  }, toLocalizedString(description, t))), children);
 };
 var ControlItemInput = ({ title, description, children }) => {
-  var _effect = _useSignals2();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement(Input2.Root, null, /* @__PURE__ */ React2.createElement("div", {
-      className: controlItemClasses
-    }, /* @__PURE__ */ React2.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React2.createElement(Input2.Label, {
-      classNames: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Description, {
-      classNames: controlItemDescriptionClasses
-    }, toLocalizedString(description, t)))), children));
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
+    className: controlItemClasses
+  }, /* @__PURE__ */ React.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: controlItemTitleClasses
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Description, {
+    classNames: controlItemDescriptionClasses
+  }, toLocalizedString(description, t)))), children));
 };
 var ControlFrameItem = ({ title, description, children }) => {
-  var _effect = _useSignals2();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "group",
-      className: "min-is-0"
-    }, /* @__PURE__ */ React2.createElement("h3", {
-      className: "text-lg mbe-2"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
-      className: "mlb-trimSm md:mbe-0 text-description"
-    }, toLocalizedString(description, t)), children);
-  } finally {
-    _effect.f();
-  }
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "group",
+    className: "min-is-0"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-lg mbe-2"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
+    className: "mlb-trimSm md:mbe-0 text-description"
+  }, toLocalizedString(description, t)), children);
 };
 
 // src/components/FieldEditor/FieldEditor.tsx
-import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
-import React14, { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo7, useState as useState5 } from "react";
-import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo-schema";
-import { log as log3 } from "@dxos/log";
-import { useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
-
-// src/components/Form/custom/GeoPointInput.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { useCallback, useState, useEffect, useMemo } from "react";
-import { GeoLocation } from "@dxos/echo-schema";
-import { Input as Input4, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { safeParseFloat } from "@dxos/util";
+import React18, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
+import { Obj } from "@dxos/echo";
+import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
+import { log as log2 } from "@dxos/log";
+import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
 
-// src/components/Form/Input.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3 from "react";
-import { Icon, Input as Input3, Tooltip } from "@dxos/react-ui";
-import { labelSpacing } from "@dxos/react-ui-stack";
-import { errorText, mx as mx3 } from "@dxos/react-ui-theme";
-var InputHeader = ({ error, label, readonly }) => {
-  var _effect = _useSignals3();
-  try {
-    const Label = readonly ? "span" : Input3.Label;
-    const labelProps = readonly ? {} : {
-      classNames: "!mlb-0"
-    };
-    return /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: mx3("flex justify-between items-center", labelSpacing)
-    }, /* @__PURE__ */ React3.createElement(Label, labelProps, label), error && /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
-      asChild: true,
-      content: error,
-      side: "bottom"
-    }, /* @__PURE__ */ React3.createElement(Icon, {
-      icon: "ph--warning--regular",
-      size: 4,
-      classNames: errorText
-    })));
-  } finally {
-    _effect.f();
+// src/util/field.ts
+import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
+var parseValue = ({ type, format, value: value3 }) => {
+  if (value3 === void 0 || value3 === null || value3 === "") {
+    return void 0;
   }
-};
-
-// src/components/Form/custom/GeoPointInput.tsx
-var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals4();
-  try {
-    const { t } = useTranslation2(translationKey);
-    const { status, error } = getStatus();
-    const geoPoint = useMemo(() => getValue3() ?? [
-      0,
-      0
-    ], [
-      getValue3
-    ]);
-    const geoLocation = useMemo(() => GeoLocation.fromGeoPoint(geoPoint), [
-      geoPoint
-    ]);
-    const [longitudeText, setLongitudeText] = useState(geoLocation.longitude?.toString());
-    const [latitudeText, setLatitudeText] = useState(geoLocation.latitude?.toString());
-    useEffect(() => {
-      const location = GeoLocation.fromGeoPoint(geoPoint);
-      setLongitudeText(location.longitude.toString());
-      setLatitudeText(location.latitude.toString());
-    }, [
-      geoPoint
-    ]);
-    const handleCoordinateChange = useCallback((coordinateType, setText) => (event) => {
-      const inputText = event.target.value;
-      setText(inputText);
-      if (inputText !== "" && inputText !== "-") {
-        const coord = safeParseFloat(inputText);
-        if (coord !== void 0 && !isNaN(coord)) {
-          const currentLocation = GeoLocation.fromGeoPoint(getValue3() ?? [
-            0,
-            0
-          ]);
-          const newLocation = {
-            ...currentLocation,
-            [coordinateType]: coord
-          };
-          const newValue = GeoLocation.toGeoPoint(newLocation);
-          onValueChange(type, newValue);
+  const parseScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum.Boolean: {
+        if (typeof value3 === "string") {
+          const lowercaseValue = value3.toLowerCase();
+          if (lowercaseValue === "0" || lowercaseValue === "false") {
+            return false;
+          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
+            return true;
+          }
         }
+        return Boolean(value3);
       }
-    }, [
-      getValue3,
-      onValueChange,
-      type
-    ]);
-    return /* @__PURE__ */ React4.createElement(Input4.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React4.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React4.createElement("div", {
-      role: "none",
-      className: "grid grid-cols-2 gap-2"
-    }, /* @__PURE__ */ React4.createElement(Input4.TextInput, {
-      type: "text",
-      pattern: "^-?[0-9]*\\.?[0-9]*$",
-      disabled,
-      placeholder: t("placeholder latitude"),
-      value: latitudeText,
-      onChange: handleCoordinateChange("latitude", setLatitudeText),
-      onBlur
-    }), /* @__PURE__ */ React4.createElement(Input4.TextInput, {
-      type: "text",
-      pattern: "^-?[0-9]*\\.?[0-9]*$",
-      disabled,
-      placeholder: t("placeholder longitude"),
-      value: longitudeText,
-      onChange: handleCoordinateChange("longitude", setLongitudeText),
-      onBlur
-    })));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Form/custom/SelectOptionsInput.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
-import { PublicKey } from "@dxos/keys";
-import { Icon as Icon2, IconButton, Input as Input5, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
-import { List } from "@dxos/react-ui-list";
-import { HuePicker } from "@dxos/react-ui-pickers";
-import { hues, mx as mx4 } from "@dxos/react-ui-theme";
-var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  var _effect = _useSignals5();
-  try {
-    const [selected, setSelectedId] = useState2(null);
-    const [isNewOption, setIsNewOption] = useState2(false);
-    const inputRef = useRef(null);
-    const { t } = useTranslation3(translationKey);
-    const { status, error } = getStatus();
-    const options = getValue3();
-    useEffect2(() => {
-      if (options === void 0) {
-        onValueChange(type, []);
+      case TypeEnum.Number: {
+        const cleaned = typeof value3 === "string" ? value3.replace(/[^0-9.-]+/g, "") : value3;
+        const num = Number(cleaned);
+        return Number.isNaN(num) ? null : num;
       }
-    }, [
-      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)];
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value3);
+      default: {
+        return value3;
       }
-      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;
+    }
+  };
+  if (!format) {
+    return parseScalar(type);
+  }
+  switch (format) {
+    case Format.TypeFormat.Boolean:
+      return parseScalar(TypeEnum.Boolean);
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.Percent:
+    case Format.TypeFormat.Currency:
+      return parseScalar(TypeEnum.Number);
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Markdown: {
+      return parseScalar(TypeEnum.String);
+    }
+    case Format.TypeFormat.Ref:
+      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp: {
+      const date = new Date(value3);
+      return isNaN(date.getTime()) ? null : date;
+    }
+    case Format.TypeFormat.GeoPoint: {
+      if (typeof value3 === "string") {
+        const cleaned = value3.replace(/[^0-9.,-]+/g, "");
+        const parts = cleaned.split(",");
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation.toGeoPoint({
+              latitude: lat,
+              longitude: long
+            });
+          }
+        }
       }
-      const newOptions = [
-        ...options
+      return [
+        0,
+        0
       ];
-      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
-    ]);
-    useEffect2(() => {
-      if (selected && isNewOption && inputRef.current) {
-        inputRef.current.focus();
-        setIsNewOption(false);
-      }
-    }, [
-      selected,
-      isNewOption
-    ]);
-    return /* @__PURE__ */ React5.createElement(Input5.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React5.createElement(InputHeader, {
-      error,
-      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: mx4("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(Input5.Label, {
-      classNames: "text-xs"
-    }, t("select option label")), /* @__PURE__ */ React5.createElement("div", {
-      className: "flex flex-row items-center gap-1"
-    }, /* @__PURE__ */ React5.createElement(Input5.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(HuePicker, {
-      value: item.color,
-      onChange: handleColorChange(item.id),
-      rootVariant: "toolbar-button"
-    })), /* @__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: mx4("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")))))))));
-  } finally {
-    _effect.f();
+    }
+    default: {
+      return value3;
+    }
   }
 };
-
-// src/components/Form/custom/TupleInput.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6 from "react";
-import { Input as Input6 } from "@dxos/react-ui";
-import { mx as mx5 } 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 }) => {
-  var _effect = _useSignals6();
-  try {
-    const { status, error } = getStatus();
-    const values = getValue3() ?? {};
-    return /* @__PURE__ */ React6.createElement(Input6.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React6.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React6.createElement("div", {
-      className: mx5("grid gap-2", gridCols[binding.length - 1])
-    }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input6.TextInput, {
-      key: prop,
-      type: "number",
-      disabled,
-      value: values[prop],
-      onChange: (event) => onValueChange(type, {
-        ...values,
-        [prop]: safeParseFloat2(event.target.value, 0)
-      }),
-      onBlur
-    }))));
-  } finally {
-    _effect.f();
+var cellClassesForFieldType = ({ type, format }) => {
+  switch (format || type) {
+    case Format.TypeFormat.Markdown:
+      return void 0;
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp:
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Duration:
+      return [
+        "font-mono",
+        "text-right"
+      ];
+    case Format.TypeFormat.Currency:
+      return [
+        "text-right"
+      ];
+    case Format.TypeFormat.JSON:
+    case Format.TypeFormat.DID:
+      return [
+        "font-mono"
+      ];
+    case TypeEnum.Number:
+    case TypeEnum.Boolean:
+      return [
+        "text-right",
+        "font-mono"
+      ];
+    case TypeEnum.String:
+      return void 0;
+    case TypeEnum.Ref:
+      return void 0;
+    default:
+      return void 0;
   }
 };
+var pathNotUniqueError = (path) => ({
+  path: "path",
+  message: `'${path}' is already present`
+});
 
-// src/components/Form/Defaults.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
-import { Input as Input7, Select, useTranslation as useTranslation4 } from "@dxos/react-ui";
-var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals7();
-  try {
-    const { status, error } = getStatus();
-    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error,
-      label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextInput, {
-      disabled,
-      placeholder,
-      value: getValue3() ?? "",
-      onChange: (event) => onValueChange(type, event.target.value),
-      onBlur
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.Validation, null, error));
-  } finally {
-    _effect.f();
-  }
-};
-var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals7();
-  try {
-    const { status, error } = getStatus();
-    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error,
-      label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextInput, {
-      type: "number",
-      disabled,
-      placeholder,
-      value: getValue3() ?? 0,
-      onChange: (event) => onValueChange(type, event.target.value),
-      onBlur
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
+// src/util/formatting.ts
+import { format as formatDate } from "date-fns/format";
+import { Format as Format2, GeoLocation as GeoLocation2, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
+var formatForDisplay = ({ type, format, value: value3, locale = void 0 }) => {
+  const formatScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum2.Boolean:
+        return value3.toLocaleString().toUpperCase();
+      case TypeEnum2.Number:
+        return value3.toLocaleString(locale);
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value3);
+      default: {
+        return String(value3);
+      }
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
   }
-};
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange, disabled }) => {
-  var _effect = _useSignals7();
-  try {
-    const { status, error } = getStatus();
-    const checked = Boolean(getValue3());
-    const { t } = useTranslation4(translationKey);
-    return /* @__PURE__ */ React7.createElement(Input7.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error,
-      label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ React7.createElement(Input7.Switch, {
-      checked,
-      onCheckedChange: (value) => onValueChange(type, value)
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
+  switch (format) {
+    case Format2.TypeFormat.Boolean: {
+      return formatScalar(TypeEnum2.Boolean);
+    }
+    case Format2.TypeFormat.Number: {
+      return formatScalar(TypeEnum2.Number);
+    }
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
+      return formatScalar(TypeEnum2.String);
+    }
+    case Format2.TypeFormat.Percent: {
+      return `${value3 * 100}%`;
+    }
+    case Format2.TypeFormat.Currency: {
+      return value3.toLocaleString(locale, {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    }
+    case Format2.TypeFormat.Date: {
+      try {
+        return formatDate(new Date(value3), "yyyy-MM-dd");
+      } catch (error) {
+        return "Invalid Date";
+      }
+    }
+    case Format2.TypeFormat.Time: {
+      try {
+        return formatDate(new Date(value3), "HH:mm:ss");
+      } catch (error) {
+        return "Invalid Time";
+      }
+    }
+    case Format2.TypeFormat.DateTime: {
+      try {
+        return formatDate(new Date(value3), "yyyy-MM-dd HH:mm:ss");
+      } catch (error) {
+        return "Invalid DateTime";
+      }
+    }
+    case Format2.TypeFormat.GeoPoint: {
+      if (value3 === null || value3 === void 0) {
+        return "";
+      }
+      if (Array.isArray(value3) && value3.length >= 2 && value3.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation2.fromGeoPoint(value3);
+        return `${latitude},${longitude}`;
+      }
+      return String(value3);
+    }
+    default: {
+      if (value3 === null || value3 === "undefined") {
+        return "";
+      }
+      return String(value3);
+    }
   }
 };
-var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  var _effect = _useSignals7();
-  try {
-    const { status, error } = getStatus();
-    const value = getValue3();
-    const handleValueChange = useCallback3((value2) => onValueChange(type, value2), [
-      type,
-      onValueChange
-    ]);
-    return disabled && !value ? null : /* @__PURE__ */ React7.createElement(Input7.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error,
-      label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ React7.createElement(Select.Root, {
-      value,
-      onValueChange: handleValueChange
-    }, /* @__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: value2, label: label2 }) => (
-      // NOTE: Numeric values are converted to and from strings.
-      /* @__PURE__ */ React7.createElement(Select.Option, {
-        key: String(value2),
-        value: String(value2)
-      }, label2 ?? String(value2))
-    )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
+var formatForEditing = ({ type, format, value: value3, locale = void 0 }) => {
+  const formatScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum2.Boolean:
+      case TypeEnum2.Number:
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value3);
+      default:
+        return String(value3);
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
   }
-};
-var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals7();
-  try {
-    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`;
+  switch (format) {
+    case Format2.TypeFormat.Boolean:
+    case Format2.TypeFormat.Number:
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
+      return formatScalar(type);
+    }
+    case Format2.TypeFormat.Percent: {
+      return String(value3 * 100);
+    }
+    case Format2.TypeFormat.Currency: {
+      return String(value3);
+    }
+    case Format2.TypeFormat.DateTime: {
+      const date = new Date(value3);
+      return date.toISOString();
+    }
+    case Format2.TypeFormat.Date: {
+      const date = new Date(value3);
+      return date.toISOString().split("T")[0];
+    }
+    case Format2.TypeFormat.Time: {
+      const date = new Date(value3);
+      return date.toISOString().split("T")[1].split(".")[0];
+    }
+    case Format2.TypeFormat.GeoPoint: {
+      if (value3 === null || value3 === void 0) {
+        return "";
       }
-    }, []);
-    useEffect3(() => {
-      adjustHeight();
-    }, [
-      adjustHeight
-    ]);
-    useEffect3(() => {
-      adjustHeight();
-    }, [
-      getValue3(),
-      adjustHeight
-    ]);
-    return /* @__PURE__ */ React7.createElement(Input7.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
-      error,
-      label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextArea, {
-      ref: textareaRef,
-      disabled,
-      placeholder,
-      value: getValue3() ?? "",
-      classNames: "min-bs-auto max-h-40 overflow-auto",
-      onChange: (event) => onValueChange(type, event.target.value),
-      onBlur,
-      style: {
-        resize: "none"
-      },
-      spellCheck: false
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.Validation, null, error));
-  } finally {
-    _effect.f();
+      if (Array.isArray(value3) && value3.length >= 2 && value3.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation2.fromGeoPoint(value3);
+        return `${latitude},${longitude}`;
+      }
+      return String(value3);
+    }
+    default: {
+      return String(value3);
+    }
   }
 };
 
-// src/components/Form/Form.tsx
-import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
-import React13, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
-import { cardDialogOverflow, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
-
-// src/components/Form/FormActions.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9 from "react";
-import { IconButton as IconButton2, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { cardSpacing } from "@dxos/react-ui-stack";
-import { mx as mx6 } from "@dxos/react-ui-theme";
-
-// src/components/Form/FormContext.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { createContext, useContext, useEffect as useEffect6, useMemo as useMemo3, useCallback as useCallback6 } from "react";
-import { raise } from "@dxos/debug";
-import { getValue as getValue2 } from "@dxos/echo-schema";
-import { createJsonPath as createJsonPath2 } from "@dxos/effect";
+// src/util/properties.ts
+import * as Option from "effect/Option";
+import { Annotation } from "@dxos/echo";
+import { getProperties } from "@dxos/effect";
+var getFormProperties = (ast) => {
+  return getProperties(ast).filter((prop) => Annotation.FormInputAnnotation.getFromAst(prop.type).pipe(Option.getOrElse(() => true)));
+};
 
-// src/hooks/useForm.ts
-import { SchemaAST } from "effect";
-import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
-import { getValue, setValue } from "@dxos/echo-schema";
-import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
-import { invariant } from "@dxos/invariant";
-import { log } from "@dxos/log";
-import { validateSchema } from "@dxos/schema";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
-var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
-  invariant(SchemaAST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 93,
-    S: void 0,
-    A: [
-      "SchemaAST.isTypeLiteral(schema.ast)",
-      ""
-    ]
-  });
-  const [values, setValues] = useState3(initialValues);
-  useEffect4(() => {
-    setValues(initialValues);
-  }, [
-    initialValues
-  ]);
-  const [touched, setTouched] = useState3(createKeySet(initialValues, false));
-  const [changed, setChanged] = useState3(createKeySet(initialValues, false));
-  const [errors, setErrors] = useState3({});
-  const [saving, setSaving] = useState3(false);
-  const validate = useCallback4((values2) => {
+// src/util/refs.ts
+import { Ref } from "@dxos/echo";
+import { getArrayElementType, isArrayType } from "@dxos/effect";
+var getRefProps = (ast) => {
+  if (isArrayType(ast)) {
+    const elementType = getArrayElementType(ast);
+    if (elementType) {
+      if (Ref.isRefType(elementType)) {
+        return {
+          ast: elementType,
+          isArray: true
+        };
+      }
+    }
+  }
+  if (Ref.isRefType(ast)) {
+    return {
+      ast,
+      isArray: false
+    };
+  }
+  return void 0;
+};
+
+// src/components/Form/fields/ArrayField.tsx
+import * as Option3 from "effect/Option";
+import * as SchemaAST2 from "effect/SchemaAST";
+import React6, { useCallback as useCallback3 } from "react";
+import { findNode as findNode2, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
+import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
+
+// src/components/Form/Form.tsx
+import { createContext } from "@radix-ui/react-context";
+import * as Schema2 from "effect/Schema";
+import React5, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
+import { createJsonPath as createJsonPath3, getValue as getValue$2, setValue as setValue$2 } from "@dxos/effect";
+import { IconButton, ScrollArea, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/ui-theme";
+
+// src/hooks/useFormHandler.ts
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createJsonPath, fromEffectValidationPath, getValue as getValue$, setValue as setValue$ } from "@dxos/effect";
+import { log } from "@dxos/log";
+import { useDefaultValue } from "@dxos/react-ui";
+import { validateSchema } from "@dxos/schema";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useFormHandler.ts";
+var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: defaultValuesProp, onValuesChanged, onValidate, onSave, onCancel, ...props }) => {
+  const [changed, setChanged] = useState({});
+  const [touched, setTouched] = useState({});
+  const [errors, setErrors] = useState({});
+  const [saving, setSaving] = useState(false);
+  const defaultValues = useDefaultValue(defaultValuesProp, () => ({}));
+  const [values$, setValues] = useControllableState({
+    prop: valuesProp,
+    defaultProp: defaultValues,
+    onChange: () => {
+      setValues(valuesProp ?? defaultValues);
+      setChanged({});
+      setTouched({});
+      setErrors({});
+      setSaving(false);
+    }
+  });
+  const values = values$;
+  const validate = useCallback((values2) => {
+    if (!schema) {
+      return false;
+    }
     let errors2 = validateSchema(schema, values2) ?? [];
+    log("validate", {
+      values: values2,
+      errors: errors2
+    }, {
+      F: __dxlog_file,
+      L: 157,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -806,36 +530,38 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     schema,
     onValidate
   ]);
-  const [schemaDirty, setSchemaDirty] = useState3(false);
-  useEffect4(() => setSchemaDirty(true), [
+  const [schemaChanged, setSchemaChanged] = useState(false);
+  useEffect(() => setSchemaChanged(true), [
     schema
   ]);
-  useEffect4(() => {
-    if (schemaDirty) {
+  useEffect(() => {
+    if (schemaChanged) {
       validate(values);
-      setSchemaDirty(false);
+      setSchemaChanged(false);
     }
   }, [
+    validate,
     values,
-    schemaDirty
+    schemaChanged
   ]);
-  const formIsValid = useMemo2(() => {
+  const isValid = useMemo(() => {
     return Object.keys(errors).length === 0;
   }, [
     errors
   ]);
-  const canSave = useMemo2(() => !saving && // Check if any error paths that are touched have errors.
+  const canSave = useMemo(() => !saving && // Check if any error paths that are touched have errors.
   !Object.entries(touched).some(([path, isTouched]) => isTouched && Object.keys(errors).some((errorPath) => errorPath === path || errorPath.startsWith(`${path}.`) || errorPath.startsWith(`${path}[`))), [
     touched,
     errors,
     saving
   ]);
-  const handleSave = useCallback4(async () => {
+  const handleSave = useCallback(async () => {
     if (validate(values)) {
       setSaving(true);
       try {
         await onSave?.(values, {
-          changed
+          changed,
+          isValid
         });
       } finally {
         setSaving(false);
@@ -845,11 +571,17 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     validate,
     onSave,
-    changed
+    changed,
+    isValid
+  ]);
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [
+    onCancel
   ]);
-  const getStatus = useCallback4((path) => {
+  const getStatus = useCallback((path) => {
     const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
-    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
+    const [_, error] = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`)) ?? [];
     const isTouched = touched[jsonPath];
     if (!isTouched) {
       return {
@@ -858,111 +590,120 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
       };
     }
     return {
-      status: matchingError ? "error" : void 0,
-      error: matchingError ? matchingError[1] : void 0
+      status: error ? "error" : void 0,
+      error: error ? error ?? void 0 : void 0
     };
   }, [
     errors,
     touched
   ]);
-  const getFormValue = useCallback4((path) => {
-    return getValue(values, createJsonPath(path));
+  const getValue = useCallback((path) => {
+    return getValue$(values, createJsonPath(path));
   }, [
     values
   ]);
-  const onValueChange = useCallback4((path, type, value) => {
+  const onValueChange = useCallback((path, type, value3) => {
+    log("onValueChange", {
+      path,
+      value: value3
+    }, {
+      F: __dxlog_file,
+      L: 256,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
     const jsonPath = createJsonPath(path);
-    let parsedValue = value;
+    let parsedValue = value3;
     try {
-      if (type === "number") {
-        parsedValue = parseFloat(value) || 0;
+      if (type._tag === "NumberKeyword") {
+        parsedValue = parseFloat(value3) || 0;
       }
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 213,
+        L: 265,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
     const newValues = {
-      ...setValue(values, jsonPath, parsedValue)
+      ...setValue$(values, jsonPath, parsedValue)
     };
     setValues(newValues);
-    setChanged((prev) => ({
-      ...prev,
+    const newChanged = {
       [jsonPath]: true
-    }));
-    onValuesChanged?.(newValues);
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, {
-        changed
-      });
-    }
+    };
+    setChanged({
+      ...changed,
+      ...newChanged
+    });
+    const isValid2 = validate(newValues);
+    onValuesChanged?.(newValues, {
+      isValid: isValid2,
+      changed: newChanged
+    });
   }, [
     values,
-    onValuesChanged,
+    changed,
     validate,
-    onValid,
-    changed
+    onValuesChanged
   ]);
-  const onTouched = useCallback4((path) => {
+  const onBlur = useCallback(async (path) => {
     const jsonPath = createJsonPath(path);
     setTouched((touched2) => ({
       ...touched2,
       [jsonPath]: true
     }));
-    validate(values);
+    const isValid2 = validate(values);
+    if (Object.keys(changed).length > 0 && isValid2 && autoSave) {
+      await onSave?.(values, {
+        changed,
+        isValid: isValid2
+      });
+    }
   }, [
     validate,
-    values
+    values,
+    changed,
+    autoSave,
+    onSave
   ]);
-  return useMemo2(() => ({
+  return useMemo(() => ({
     // State.
+    schema,
     values,
     errors,
     touched,
     changed,
+    isValid,
     canSave,
-    formIsValid,
+    autoSave,
     // Actions.
-    handleSave,
+    onSave: handleSave,
+    onCancel: handleCancel,
     // Field utils.
     getStatus,
-    getValue: getFormValue,
+    getValue,
+    onBlur,
     onValueChange,
-    onTouched
+    ...props
   }), [
+    schema,
     values,
     errors,
     touched,
     changed,
     canSave,
-    formIsValid,
-    handleSave,
+    isValid,
     getStatus,
-    getFormValue,
+    getValue,
+    onBlur,
     onValueChange,
-    onTouched
+    onSave,
+    onCancel
   ]);
 };
-var createKeySet = (obj, value) => {
-  invariant(obj, void 0, {
-    F: __dxlog_file,
-    L: 275,
-    S: void 0,
-    A: [
-      "obj",
-      ""
-    ]
-  });
-  return Object.keys(obj).reduce((acc, key) => ({
-    ...acc,
-    [key]: value
-  }), {});
-};
 var flatMap = (errors) => {
   return errors.reduce((result, { path, message }) => {
     const jsonPath = fromEffectValidationPath(path);
@@ -973,1398 +714,1790 @@ var flatMap = (errors) => {
   }, {});
 };
 
-// src/hooks/useRefQueryLookupHandler.ts
-import { useCallback as useCallback5 } from "react";
-import { getObjectDXN } from "@dxos/echo-schema";
-import { Filter } from "@dxos/react-client/echo";
-import { isNonNullable } from "@dxos/util";
-var useRefQueryLookupHandler = ({ space }) => {
-  return useCallback5(async (typeInfo) => {
-    if (!space) {
-      return [];
-    }
-    const query = space.db.query(Filter.typename(typeInfo.typename));
-    const { objects } = await query.run();
-    return objects.map((object) => {
-      const dxn = getObjectDXN(object);
-      if (!dxn) {
-        return void 0;
+// src/hooks/useKeyHandler.tsx
+import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { addEventListener } from "@dxos/async";
+var useKeyHandler = (formElement, form) => {
+  const handleKeyDown = useCallback2((event) => {
+    switch (event.key) {
+      case "Enter": {
+        if (event.metaKey && form.canSave) {
+          form.onSave();
+        }
+        break;
       }
-      const item = {
-        dxn,
-        label: object?.name ?? object?.id ?? ""
-      };
-      return item;
-    }).filter(isNonNullable);
+    }
   }, [
-    space
+    form.isValid,
+    form.canSave,
+    form.onSave,
+    form.autoSave
   ]);
-};
-
-// src/hooks/useQueryRefOptions.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
-var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
-  const [options, setOptions] = useState4([]);
-  const [loading, setLoading] = useState4(false);
-  useEffect5(() => {
-    if (!refTypeInfo || !onQueryRefOptions) {
+  useEffect2(() => {
+    if (!formElement) {
       return;
     }
-    const fetchOptions = async () => {
-      setLoading(true);
-      try {
-        const fetchedOptions = await onQueryRefOptions(refTypeInfo);
-        setOptions(fetchedOptions.map((option) => {
-          const dxn = option.dxn.toString();
-          return {
-            id: dxn,
-            label: option.label ?? dxn,
-            hue: "neutral"
-          };
-        }));
-      } catch (error) {
-        log2.error("Failed to fetch ref options:", error, {
-          F: __dxlog_file2,
-          L: 42,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setOptions([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-    void fetchOptions();
+    return addEventListener(formElement, "keydown", handleKeyDown);
   }, [
-    refTypeInfo,
-    onQueryRefOptions
+    formElement,
+    handleKeyDown
   ]);
-  return {
-    options,
-    loading
-  };
 };
 
-// src/components/Form/FormContext.tsx
-var FormContext = /* @__PURE__ */ createContext(void 0);
-var useFormContext = () => {
-  return useContext(FormContext) ?? raise(new Error("Missing FormContext"));
-};
-var useFormValues = (path = []) => {
-  const { values: formValues } = useFormContext();
-  const jsonPath = createJsonPath2(path);
-  return getValue2(formValues, jsonPath);
-};
-var useInputProps = (path = []) => {
-  const { getStatus, getValue: getFormValue, onValueChange, onTouched } = useFormContext();
-  const stablePath = useMemo3(() => path, [
-    Array.isArray(path) ? path.join(".") : path
-  ]);
-  return useMemo3(() => ({
-    getStatus: () => getStatus(stablePath),
-    getValue: () => getFormValue(stablePath),
-    onValueChange: (type, value) => onValueChange(stablePath, type, value),
-    onBlur: () => onTouched(stablePath)
-  }), [
-    getStatus,
-    getFormValue,
-    onValueChange,
-    onTouched,
-    stablePath
-  ]);
-};
-var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
-  var _effect = _useSignals8();
-  try {
-    const form = useForm(formOptions);
-    const handleKeyDown = useCallback6((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") || event.target.closest("[data-no-submit]") !== null;
-      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();
-        }
-      }
-    }, [
-      form,
-      autoSave
-    ]);
-    useEffect6(() => {
-      if (!formRef?.current) {
-        return;
-      }
-      const formElement = formRef.current;
-      formElement.addEventListener("keydown", handleKeyDown);
-      return () => formElement.removeEventListener("keydown", handleKeyDown);
-    }, [
-      formRef,
-      form.canSave,
-      form.formIsValid,
-      form.handleSave,
-      autoSave
-    ]);
-    return /* @__PURE__ */ React8.createElement(FormContext.Provider, {
-      value: form
-    }, children);
-  } finally {
-    _effect.f();
-  }
+// src/components/Form/FormFieldComponent.tsx
+import React2, { Component } from "react";
+import { Icon, Input as Input2, Tooltip } from "@dxos/react-ui";
+import { errorText, mx as mx2 } from "@dxos/ui-theme";
+var labelSpacing = "mbs-inputSpacingBlock mbe-labelSpacingBlock";
+var FormFieldLabel = ({ label, error, readonly, asChild }) => {
+  const Label = readonly || asChild ? "span" : Input2.Label;
+  const labelProps = readonly || asChild ? {
+    className: "text-description text-sm"
+  } : {
+    classNames: "!mlb-0 text-sm"
+  };
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: mx2("flex justify-between items-center", labelSpacing)
+  }, /* @__PURE__ */ React2.createElement(Label, labelProps, label), error && /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: error,
+    side: "bottom"
+  }, /* @__PURE__ */ React2.createElement(Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: errorText
+  })));
 };
-
-// src/components/Form/FormActions.tsx
-var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
-  var _effect = _useSignals9();
-  try {
-    const { t } = useTranslation5(translationKey);
-    const { canSave, handleSave } = useFormContext();
-    return /* @__PURE__ */ React9.createElement("div", {
-      role: "none",
-      className: mx6(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
-    }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
-      "data-testid": "cancel-button",
-      icon: "ph--x--regular",
-      label: t("button cancel"),
-      onClick: onCancel
-    }), handleSave && /* @__PURE__ */ React9.createElement(IconButton2, {
-      type: "submit",
-      "data-testid": "save-button",
-      disabled: !canSave,
-      icon: "ph--check--regular",
-      label: t("button save"),
-      onClick: handleSave
-    }));
-  } finally {
-    _effect.f();
+FormFieldLabel.displayName = "Form.FieldLabel";
+var FormFieldWrapper = (props) => {
+  const { children, readonly, layout, label, getStatus, getValue } = props;
+  const { status, error } = getStatus();
+  const value3 = getValue();
+  if (layout === "static" && value3 == null) {
+    return null;
   }
+  const str = String(value3 ?? "");
+  return /* @__PURE__ */ React2.createElement(Input2.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React2.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React2.createElement("p", null, str) : children ? children({
+    value: value3
+  }) : null, layout === "full" && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Validation, null, error)));
 };
-
-// src/components/Form/FormContent.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
-import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
-import { capitalize as capitalize2 } from "effect/String";
-import React12, { forwardRef, useMemo as useMemo5 } from "react";
-import { createJsonPath as createJsonPath3, findNode as findNode3, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx8 } from "@dxos/react-ui-theme";
-import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
-import { isNotFalsy } from "@dxos/util";
-
-// src/components/Form/ArrayField.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import { SchemaAST as SchemaAST3, pipe } from "effect";
-import { capitalize } from "effect/String";
-import React10, { Fragment, useCallback as useCallback7 } from "react";
-import { findNode as findNode2, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton3, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { getSchemaProperties } from "@dxos/schema";
-
-// src/util/field.ts
-import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
-var parseValue = ({ type, format, value }) => {
-  if (value === void 0 || value === null || value === "") {
-    return void 0;
+var FormFieldErrorBoundary = class extends Component {
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
   }
-  const parseScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum.Boolean: {
-        if (typeof value === "string") {
-          const lowercaseValue = value.toLowerCase();
-          if (lowercaseValue === "0" || lowercaseValue === "false") {
-            return false;
-          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
-            return true;
-          }
-        }
-        return Boolean(value);
-      }
-      case TypeEnum.Number: {
-        const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
-        const num = Number(cleaned);
-        return Number.isNaN(num) ? null : num;
-      }
-      case TypeEnum.String:
-      case TypeEnum.Ref:
-        return String(value);
-      default: {
-        return value;
-      }
-    }
+  state = {
+    error: void 0
   };
-  if (!format) {
-    return parseScalar(type);
-  }
-  switch (format) {
-    case FormatEnum.Boolean:
-      return parseScalar(TypeEnum.Boolean);
-    case FormatEnum.Number:
-    case FormatEnum.Percent:
-    case FormatEnum.Currency:
-      return parseScalar(TypeEnum.Number);
-    case FormatEnum.String:
-    case FormatEnum.Markdown: {
-      return parseScalar(TypeEnum.String);
-    }
-    case FormatEnum.Ref:
-      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp: {
-      const date = new Date(value);
-      return isNaN(date.getTime()) ? null : date;
-    }
-    case FormatEnum.GeoPoint: {
-      if (typeof value === "string") {
-        const cleaned = value.replace(/[^0-9.,-]+/g, "");
-        const parts = cleaned.split(",");
-        if (parts.length === 2) {
-          const lat = parseFloat(parts[0]);
-          const long = parseFloat(parts[1]);
-          if (!isNaN(lat) && !isNaN(long)) {
-            return GeoLocation2.toGeoPoint({
-              latitude: lat,
-              longitude: long
-            });
-          }
-        }
-      }
-      return [
-        0,
-        0
-      ];
-    }
-    default: {
-      return value;
+  componentDidUpdate(prevProps) {
+    if (prevProps.path !== this.props.path) {
+      this.resetError();
     }
   }
-};
-var cellClassesForFieldType = ({ type, format }) => {
-  if (!format) {
-    switch (type) {
-      case TypeEnum.Number:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case TypeEnum.Boolean:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case TypeEnum.String:
-        return void 0;
-      case TypeEnum.Ref:
-        return void 0;
-      default: {
-        return void 0;
-      }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ React2.createElement("div", {
+        className: "flex gap-2 border border-roseFill font-mono text-sm"
+      }, /* @__PURE__ */ React2.createElement("span", {
+        className: "bg-roseFill text-surfaceText pli-1 font-thin"
+      }, "ERROR"), String(this.props.path?.join(".")));
     }
+    return this.props.children;
   }
-  switch (format) {
-    case FormatEnum.Markdown:
-      return void 0;
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp:
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Duration:
-      return [
-        "font-mono",
-        "text-right"
-      ];
-    case FormatEnum.Currency:
-      return [
-        "text-right"
-      ];
-    case FormatEnum.JSON:
-    case FormatEnum.DID:
-      return [
-        "font-mono"
-      ];
-    default:
-      return void 0;
+  resetError() {
+    this.setState({
+      error: void 0
+    });
   }
 };
-var pathNotUniqueError = (path) => ({
-  path: "path",
-  message: `'${path}' is already present`
-});
 
-// src/util/formatting.ts
-import { format as formatDate } from "date-fns/format";
-import { FormatEnum as FormatEnum2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
-var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-        return value.toLocaleString().toUpperCase();
-      case TypeEnum2.Number:
-        return value.toLocaleString(locale);
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value);
-      default: {
-        return String(value);
-      }
-    }
+// src/components/Form/FormFieldSet.tsx
+import React4, { forwardRef, useMemo as useMemo3 } from "react";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { isTruthy } from "@dxos/util";
+
+// src/components/Form/FormField.tsx
+import * as Match from "effect/Match";
+import * as Option2 from "effect/Option";
+import * as Schema from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
+import * as String2 from "effect/String";
+import React3, { useMemo as useMemo2 } from "react";
+import { Format as Format3 } from "@dxos/echo";
+import { createJsonPath as createJsonPath2, findNode, getAnnotation, getDiscriminatedType, isArrayType as isArrayType2, isDiscriminatedUnion, isLiteralUnion, isNestedType } from "@dxos/effect";
+import { useTranslation as useTranslation2 } from "@dxos/react-ui";
+var FormField = (props) => {
+  const {
+    type,
+    name,
+    path,
+    projection,
+    fieldMap,
+    fieldProvider,
+    readonly,
+    layout,
+    // RefFieldProps
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    db,
+    schemaHook,
+    getOptions: getRefOptions,
+    onCreate
+  } = props;
+  const { t } = useTranslation2(translationKey);
+  const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
+  const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
+  const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
+  const label = useMemo2(() => title ?? String2.capitalize(name), [
+    title,
+    name
+  ]);
+  const placeholder = useMemo2(() => examples?.length ? `${t("example placeholder")}: ${examples[0]}` : description ?? label, [
+    examples,
+    description,
+    label
+  ]);
+  const fieldState = useFormFieldState(FormField.displayName, path);
+  const fieldProps = {
+    type,
+    format: Format3.FormatAnnotation.getFromAst(type).pipe((annotation) => Option2.getOrUndefined(annotation)),
+    readonly,
+    label,
+    placeholder,
+    layout,
+    ...fieldState
   };
-  if (!format) {
-    return formatScalar(type);
+  const jsonPath = createJsonPath2(path ?? []);
+  const CustomField = fieldMap?.[jsonPath];
+  if (CustomField) {
+    return /* @__PURE__ */ React3.createElement(CustomField, fieldProps);
   }
-  switch (format) {
-    case FormatEnum2.Boolean: {
-      return formatScalar(TypeEnum2.Boolean);
-    }
-    case FormatEnum2.Number: {
-      return formatScalar(TypeEnum2.Number);
-    }
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
-      return formatScalar(TypeEnum2.String);
-    }
-    case FormatEnum2.Percent: {
-      return `${value * 100}%`;
-    }
-    case FormatEnum2.Currency: {
-      return value.toLocaleString(locale, {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
+  const component = fieldProvider?.({
+    schema: Schema.make(type),
+    prop: name,
+    fieldProps
+  });
+  if (component) {
+    return component;
+  }
+  if (isArrayType2(type)) {
+    return /* @__PURE__ */ React3.createElement(ArrayField, {
+      fieldProps: fieldState,
+      label,
+      ...props
+    });
+  }
+  const Field = getFormField(fieldProps);
+  if (Field) {
+    return /* @__PURE__ */ React3.createElement(Field, fieldProps);
+  }
+  const options = getOptions(type);
+  if (options) {
+    return /* @__PURE__ */ React3.createElement(SelectField, {
+      ...fieldProps,
+      options: options.map((option) => ({
+        value: option,
+        label: option.toString()
+      }))
+    });
+  }
+  const refProps = getRefProps(type);
+  if (refProps) {
+    return /* @__PURE__ */ React3.createElement(RefField, {
+      ...fieldProps,
+      ...refProps,
+      createOptionLabel,
+      createOptionIcon,
+      createInitialValuePath,
+      db,
+      schemaHook,
+      getOptions: getRefOptions,
+      onCreate
+    });
+  }
+  if (isNestedType(type)) {
+    const baseNode = findNode(type, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
+    if (typeLiteral) {
+      const schema = Schema.make(typeLiteral);
+      return /* @__PURE__ */ React3.createElement(FormFieldSet, {
+        schema,
+        path,
+        readonly,
+        layout,
+        label,
+        projection,
+        fieldMap,
+        fieldProvider,
+        createOptionLabel,
+        createOptionIcon,
+        createInitialValuePath,
+        db,
+        schemaHook,
+        getOptions: getRefOptions,
+        onCreate
       });
     }
-    case FormatEnum2.Date: {
-      try {
-        return formatDate(new Date(value), "yyyy-MM-dd");
-      } catch (error) {
-        return "Invalid Date";
-      }
-    }
-    case FormatEnum2.Time: {
-      try {
-        return formatDate(new Date(value), "HH:mm:ss");
-      } catch (error) {
-        return "Invalid Time";
-      }
-    }
-    case FormatEnum2.DateTime: {
-      try {
-        return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
-      } catch (error) {
-        return "Invalid DateTime";
-      }
+  }
+  return null;
+};
+FormField.displayName = "Form.FormField";
+var getFormField = ({ type, format }) => {
+  const formatField = Match.value(format).pipe(Match.withReturnType(), Match.when(Format3.TypeFormat.GeoPoint, () => GeoPointField), Match.when(Format3.TypeFormat.Markdown, () => MarkdownField), Match.when(Format3.TypeFormat.Text, () => TextAreaField), Match.orElse(() => void 0));
+  if (formatField) {
+    return formatField;
+  }
+  switch (type._tag) {
+    // TODO(wittjosiah): Schema.Any is currently used to represent template inputs.
+    case "AnyKeyword":
+    case "StringKeyword":
+      return TextField;
+    case "NumberKeyword":
+      return NumberField;
+    case "BooleanKeyword":
+      return BooleanField;
+  }
+};
+var getOptions = (ast) => {
+  if (isLiteralUnion(ast)) {
+    return ast.types.map((type) => type.literal).filter((v) => v !== null);
+  }
+  return Format3.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option2.getOrUndefined(annotation));
+};
+
+// src/components/Form/FormFieldSet.tsx
+var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
+  const values = useFormValues(FormFieldSet.displayName, path);
+  const properties = useMemo3(() => {
+    if (!schema) {
+      return [];
     }
-    case FormatEnum2.GeoPoint: {
-      if (value === null || value === void 0) {
-        return "";
-      }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
-        return `${latitude},${longitude}`;
+    const props2 = getFormProperties(schema.ast);
+    if (projection) {
+      const fieldProjections = projection.getFieldProjections();
+      const hiddenProperties = new Set(projection.getHiddenProperties());
+      const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name.toString()));
+      const orderedProps = [];
+      for (const fieldProjection of fieldProjections) {
+        const fieldPath = String(fieldProjection.field.path);
+        const prop = visibleProps.find((p) => p.name === fieldPath);
+        if (prop) {
+          orderedProps.push(prop);
+        }
       }
-      return String(value);
+      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
+      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
+      orderedProps.push(...remainingProps);
+      return orderedProps;
     }
-    default: {
-      if (value === null || value === "undefined") {
-        return "";
-      }
-      return String(value);
+    const filtered = exclude ? exclude(props2) : props2;
+    return sort ? filtered.sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filtered;
+  }, [
+    schema,
+    values,
+    exclude,
+    sort,
+    projection?.fields
+  ]);
+  if ((readonly || layout === "static") && values == null) {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "form",
+    className: mx3("is-full", layout === "inline" && "flex flex-col gap-2", classNames),
+    ref: forwardRef4
+  }, layout !== "inline" && label && /* @__PURE__ */ React4.createElement(FormFieldLabel, {
+    label,
+    asChild: true
+  }), properties.map((property) => {
+    const name = property.name.toString();
+    return /* @__PURE__ */ React4.createElement(FormFieldErrorBoundary, {
+      key: name,
+      path: [
+        ...path ?? [],
+        name
+      ]
+    }, /* @__PURE__ */ React4.createElement(FormField, {
+      type: property.type,
+      name,
+      path: [
+        ...path ?? [],
+        name
+      ],
+      readonly,
+      layout,
+      projection,
+      ...props
+    }));
+  }).filter(isTruthy));
+});
+FormFieldSet.displayName = "Form.Fields";
+
+// src/components/Form/Form.tsx
+var omitId = (schema) => schema.pipe(Schema2.omit("id"));
+var [FormContextProvider, useFormContext] = createContext("Form");
+var useFormValues = (componentName, path = [], defaultValue) => {
+  const jsonPath = createJsonPath3(path);
+  const { form: { values } } = useFormContext(componentName);
+  const value3 = getValue$2(values, jsonPath);
+  useEffect3(() => {
+    if (!value3 && defaultValue) {
+      setValue$2(values, jsonPath, defaultValue());
     }
+  }, [
+    value3,
+    defaultValue
+  ]);
+  return value3;
+};
+var useFormFieldState = (componentName, path = []) => {
+  const stablePath = useMemo4(() => path, [
+    Array.isArray(path) ? path.join(".") : path
+  ]);
+  const { form: { getStatus, getValue, onBlur, onValueChange } } = useFormContext(componentName);
+  return useMemo4(() => ({
+    getStatus: () => getStatus(stablePath),
+    getValue: () => getValue(stablePath),
+    onBlur: () => onBlur(stablePath),
+    onValueChange: (ast, value3) => onValueChange(stablePath, ast, value3)
+  }), [
+    getStatus,
+    getValue,
+    onBlur,
+    onValueChange,
+    stablePath
+  ]);
+};
+var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
+  const form = useFormHandler({
+    schema,
+    values,
+    onSave,
+    onCancel,
+    ...props
+  });
+  return /* @__PURE__ */ React5.createElement(FormContextProvider, {
+    form,
+    ...props
+  }, children);
+};
+FormRoot.displayName = "Form.Root";
+var FormViewport = ({ classNames, children }) => {
+  return /* @__PURE__ */ React5.createElement(ScrollArea.Root, null, /* @__PURE__ */ React5.createElement(ScrollArea.Viewport, {
+    classNames: [
+      "plb-cardSpacingBlock",
+      classNames
+    ]
+  }, children), /* @__PURE__ */ React5.createElement(ScrollArea.Scrollbar, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React5.createElement(ScrollArea.Thumb, null)));
+};
+FormViewport.displayName = "Form.Viewport";
+var FormContent = ({ classNames, children }) => {
+  const { form, testId } = useFormContext(FormContent.displayName);
+  const ref = useRef(null);
+  useKeyHandler(ref.current, form);
+  return /* @__PURE__ */ React5.createElement("div", {
+    ref,
+    role: "form",
+    className: mx4("flex flex-col is-full pli-cardSpacingInline density-fine", classNames),
+    "data-testid": testId
+  }, children);
+};
+FormContent.displayName = "Form.Content";
+var FormFieldSet2 = ({ classNames }) => {
+  const { form, ...props } = useFormContext(FormFieldSet2.displayName);
+  return /* @__PURE__ */ React5.createElement(FormFieldSet, {
+    classNames,
+    schema: form.schema,
+    ...props
+  });
+};
+FormFieldSet2.displayName = "Form.FieldSet";
+var FormActions = ({ classNames }) => {
+  const { t } = useTranslation3(translationKey);
+  const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FormActions.displayName);
+  if (readonly || layout === "static") {
+    return null;
   }
+  return /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: mx4("grid grid-flow-col auto-cols-fr gap-2 pbs-cardSpacingBlock", classNames)
+  }, onCancel && /* @__PURE__ */ React5.createElement(IconButton, {
+    icon: "ph--x--regular",
+    iconEnd: true,
+    label: t("cancel button label"),
+    onClick: onCancel,
+    "data-testid": "cancel-button"
+  }), onSave && /* @__PURE__ */ React5.createElement(IconButton, {
+    type: "submit",
+    variant: "primary",
+    disabled: !canSave,
+    icon: "ph--check--regular",
+    iconEnd: true,
+    label: t("save button label"),
+    onClick: onSave,
+    "data-testid": "save-button"
+  }));
 };
-var formatForEditing = ({ type, format, value, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-      case TypeEnum2.Number:
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value);
-      default:
-        return String(value);
+FormActions.displayName = "Form.Actions";
+var FormSubmit = ({ classNames, label, icon }) => {
+  const { t } = useTranslation3(translationKey);
+  const { form: { canSave, onSave }, readonly, layout } = useFormContext(FormSubmit.displayName);
+  if (readonly || layout === "static") {
+    return null;
+  }
+  return /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: mx4("flex is-full pbs-cardSpacingBlock", classNames)
+  }, /* @__PURE__ */ React5.createElement(IconButton, {
+    classNames: "is-full",
+    type: "submit",
+    variant: "primary",
+    disabled: !canSave,
+    icon: icon ?? "ph--check--regular",
+    label: label ?? t("save button label"),
+    onClick: onSave,
+    "data-testid": "save-button"
+  }));
+};
+FormSubmit.displayName = "Form.Submit";
+var Form = {
+  Root: FormRoot,
+  Viewport: FormViewport,
+  Content: FormContent,
+  FieldSet: FormFieldSet2,
+  Actions: FormActions,
+  Submit: FormSubmit,
+  Label: FormFieldLabel
+};
+
+// src/components/Form/fields/ArrayField.tsx
+var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
+  const { t } = useTranslation4(translationKey);
+  const elementType = getArrayElementType2(type);
+  const { onValueChange } = inputProps;
+  const values = useFormValues(ArrayField.displayName, path, () => []);
+  const getDefaultObjectValue = (typeNode) => {
+    const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
+    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST2.isTypeLiteral);
+    if (!typeLiteral) {
+      return {};
     }
+    return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
+      const defaultValue = SchemaAST2.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      return [
+        prop.name,
+        defaultValue
+      ];
+    }));
   };
-  if (!format) {
-    return formatScalar(type);
+  const handleAdd = useCallback3(() => {
+    const defaultValue = isNestedType2(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    values && onValueChange(type, [
+      ...values,
+      defaultValue
+    ]);
+  }, [
+    onValueChange,
+    type,
+    elementType,
+    values
+  ]);
+  const handleDelete = useCallback3((idx) => {
+    onValueChange(type, values?.filter((_, i) => i !== idx));
+  }, [
+    onValueChange,
+    type,
+    values
+  ]);
+  if (!elementType || (readonly || layout === "static") && values && values.length < 1) {
+    return null;
   }
-  switch (format) {
-    case FormatEnum2.Boolean:
-    case FormatEnum2.Number:
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
-      return formatScalar(type);
-    }
-    case FormatEnum2.Percent: {
-      return String(value * 100);
-    }
-    case FormatEnum2.Currency: {
-      return String(value);
-    }
-    case FormatEnum2.DateTime: {
-      const date = new Date(value);
-      return date.toISOString();
-    }
-    case FormatEnum2.Date: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[0];
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React6.createElement(FormFieldLabel, {
+    readonly,
+    label,
+    asChild: true
+  }), /* @__PURE__ */ React6.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-2"
+  }, values?.map((_, index) => {
+    return /* @__PURE__ */ React6.createElement("div", {
+      role: "none",
+      key: index,
+      className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
+    }, /* @__PURE__ */ React6.createElement(FormField, {
+      autoFocus: index === values.length - 1,
+      type: elementType,
+      path: [
+        ...path ?? [],
+        index
+      ],
+      readonly: readonly || layout === "static",
+      layout: "inline",
+      ...props
+    }), !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement("div", {
+      role: "none",
+      className: "flex flex-col bs-full justify-end"
+    }, /* @__PURE__ */ React6.createElement("div", {
+      role: "none",
+      className: "flex items-center bs-[var(--line-height)]"
+    }, /* @__PURE__ */ React6.createElement(IconButton2, {
+      icon: "ph--x--regular",
+      iconOnly: true,
+      label: t("button remove"),
+      onClick: () => handleDelete(index),
+      classNames: "self-center"
+    }))));
+  })), !readonly && layout !== "static" && /* @__PURE__ */ React6.createElement(IconButton2, {
+    classNames: "flex is-full _mlb-cardSpacingBlock",
+    icon: "ph--plus--regular",
+    label: t("add field"),
+    onClick: handleAdd
+  }));
+};
+ArrayField.displayName = "Form.ArrayField";
+var getDefaultValue = (ast) => {
+  switch (ast?._tag) {
+    case "StringKeyword": {
+      return "";
     }
-    case FormatEnum2.Time: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[1].split(".")[0];
+    case "NumberKeyword": {
+      return 0;
     }
-    case FormatEnum2.GeoPoint: {
-      if (value === null || value === void 0) {
-        return "";
-      }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
-        return `${latitude},${longitude}`;
-      }
-      return String(value);
+    case "BooleanKeyword": {
+      return false;
     }
     default: {
-      return String(value);
+      if (ast && isNestedType2(ast)) {
+        return {};
+      } else {
+        throw new Error(`Unsupported type: ${ast?._tag}`);
+      }
     }
   }
 };
 
-// src/util/refs.ts
-import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo-schema";
-import { findAnnotation } from "@dxos/effect";
-
-// src/util/schema.ts
-import { SchemaAST as SchemaAST2 } from "effect";
-import { findNode } from "@dxos/effect";
-var findArrayElementType = (ast) => {
-  const tupleType = findNode(ast, SchemaAST2.isTupleType);
-  const elementType = tupleType?.rest[0]?.type;
-  return elementType;
+// src/components/Form/fields/BooleanField.tsx
+import React7, { useCallback as useCallback4 } from "react";
+import { Input as Input3 } from "@dxos/react-ui";
+var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
+  const handleChange = useCallback4((value3) => onValueChange?.(type, value3), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React7.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 }) => /* @__PURE__ */ React7.createElement(Input3.Switch, {
+    disabled: !!readonly,
+    checked: value3,
+    onCheckedChange: handleChange
+  }));
 };
 
-// src/util/refs.ts
-var getRefProps = (property) => {
-  const { ast, format, array } = property;
-  if (format === FormatEnum3.Ref) {
-    return {
-      ast,
-      isArray: false
-    };
-  }
-  if (array) {
-    const elementType = findArrayElementType(ast);
-    if (elementType) {
-      const annotation = findAnnotation(elementType, ReferenceAnnotationId);
-      if (annotation) {
-        return {
-          ast: elementType,
-          isArray: true
+// src/components/Form/fields/GeoPointField.tsx
+import React8, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo5, useState as useState2 } from "react";
+import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
+import { Input as Input4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { safeParseFloat } from "@dxos/util";
+var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = useTranslation5(translationKey);
+  const { status, error } = getStatus();
+  const geoPoint = useMemo5(() => getValue() ?? [
+    0,
+    0
+  ], [
+    getValue
+  ]);
+  const value3 = useMemo5(() => GeoLocation3.fromGeoPoint(geoPoint), [
+    geoPoint
+  ]);
+  const [longitudeText, setLongitudeText] = useState2(value3.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState2(value3.latitude?.toString());
+  useEffect4(() => {
+    const location = GeoLocation3.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude?.toString());
+    setLatitudeText(location.latitude?.toString());
+  }, [
+    geoPoint
+  ]);
+  const handleChange = useCallback5((coordinateType, setText) => (event) => {
+    const inputText = event.target.value;
+    setText(inputText);
+    if (inputText !== "" && inputText !== "-") {
+      const coord = safeParseFloat(inputText);
+      if (coord !== void 0 && !isNaN(coord)) {
+        const currentLocation = GeoLocation3.fromGeoPoint(getValue() ?? [
+          0,
+          0
+        ]);
+        const newLocation = {
+          ...currentLocation,
+          [coordinateType]: coord
         };
+        const newValue = GeoLocation3.toGeoPoint(newLocation);
+        onValueChange(type, newValue);
       }
     }
+  }, [
+    type,
+    getValue,
+    onValueChange
+  ]);
+  if ((readonly || layout === "static") && !value3?.latitude && !value3?.longitude) {
+    return null;
   }
-  return void 0;
+  return /* @__PURE__ */ React8.createElement(Input4.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label,
+    asChild: true
+  }), layout === "static" ? /* @__PURE__ */ React8.createElement(LatLng, value3) : /* @__PURE__ */ React8.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Input4.Root, null, layout !== "inline" && /* @__PURE__ */ React8.createElement(Input4.Label, null, t("latitude label")), /* @__PURE__ */ React8.createElement(Input4.TextInput, {
+    type: "number",
+    step: "0.00001",
+    min: "-90",
+    max: "90",
+    disabled: !!readonly,
+    placeholder: t("latitude placeholder"),
+    value: latitudeText ?? "",
+    onChange: handleChange("latitude", setLatitudeText),
+    onBlur
+  }))), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(Input4.Root, null, layout !== "inline" && /* @__PURE__ */ React8.createElement(Input4.Label, null, t("longitude label")), /* @__PURE__ */ React8.createElement(Input4.TextInput, {
+    type: "number",
+    step: "0.00001",
+    min: "-180",
+    max: "180",
+    disabled: !!readonly,
+    placeholder: t("longitude placeholder"),
+    value: longitudeText ?? "",
+    onChange: handleChange("longitude", setLongitudeText),
+    onBlur
+  })))));
+};
+var LatLng = ({ latitude = 0, longitude = 0 }) => {
+  const latHem = latitude >= 0 ? "N" : "S";
+  const lngHem = longitude >= 0 ? "E" : "W";
+  return /* @__PURE__ */ React8.createElement("span", {
+    className: "inline-flex items-center gap-1"
+  }, /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React8.createElement("span", {
+    className: "text-subdued"
+  }, "\xB0", latHem)), /* @__PURE__ */ React8.createElement("span", null, /* @__PURE__ */ React8.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React8.createElement("span", {
+    className: "text-subdued"
+  }, "\xB0", lngHem)));
 };
 
-// src/components/Form/ArrayField.tsx
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/ArrayField.tsx";
-var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }) => {
-  var _effect = _useSignals10();
-  try {
-    const { t } = useTranslation6(translationKey);
-    const { ast, name, type, title } = property;
-    const values = useFormValues(path ?? []) ?? [];
-    invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
-      F: __dxlog_file3,
-      L: 36,
-      S: void 0,
-      A: [
-        "Array.isArray(values)",
-        "`Values at path ${path?.join('.')} must be an array.`"
-      ]
-    });
-    const label = title ?? pipe(name, capitalize);
-    const elementType = findArrayElementType(ast);
-    const getDefaultObjectValue = (typeNode) => {
-      const baseNode = findNode2(typeNode, isDiscriminatedUnion);
-      const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode2(typeNode, SchemaAST3.isTypeLiteral);
-      if (!typeLiteral) {
-        return {};
-      }
-      return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
-        prop.name,
-        prop.defaultValue
-      ]));
-    };
-    const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-    const handleAdd = useCallback7(() => {
-      inputProps.onValueChange(type, [
-        ...values,
-        getDefaultValue()
-      ]);
-    }, [
-      type,
-      elementType,
-      inputProps,
-      values
-    ]);
-    const handleRemove = useCallback7((index) => {
-      const newValues = values.filter((_, i) => i !== index);
-      inputProps.onValueChange(type, newValues);
-    }, [
-      type,
-      inputProps,
-      values
-    ]);
-    if (!elementType) {
-      return null;
+// src/components/Form/fields/MarkdownField.tsx
+import React9, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2 } from "react";
+import { Input as Input5 } from "@dxos/react-ui";
+var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef2(null);
+  const adjustHeight = useCallback6(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
     }
-    return readonly && values.length < 1 ? null : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(InputHeader, {
-      readonly: true,
-      label
-    }), /* @__PURE__ */ React10.createElement("div", {
-      role: "none",
-      className: readonly ? "flex flex-wrap gap-1 mlb-1" : values.length > 0 ? "grid gap-1 grid-cols-[1fr_min-content] mlb-1" : "hidden"
-    }, values.map((_value, index) => {
-      const field = /* @__PURE__ */ React10.createElement(FormField, {
-        property: {
-          ...property,
-          array: false,
-          ast: elementType
-        },
-        path: [
-          ...path ?? [],
-          index
-        ],
-        readonly,
-        inline: true,
-        Custom,
-        lookupComponent
-      });
-      return readonly ? field : /* @__PURE__ */ React10.createElement(Fragment, {
-        key: index
-      }, /* @__PURE__ */ React10.createElement("div", {
-        role: "none"
-      }, field), /* @__PURE__ */ React10.createElement(IconButton3, {
-        icon: "ph--trash--regular",
-        iconOnly: true,
-        label: t("button remove"),
-        onClick: () => handleRemove(index),
-        classNames: "self-center"
-      }));
-    })), !readonly && /* @__PURE__ */ React10.createElement(IconButton3, {
-      classNames: "is-full mlb-1 flex",
-      icon: "ph--plus--regular",
-      label: t("add field"),
-      onClick: handleAdd
-    }));
-  } finally {
-    _effect.f();
+  }, []);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    adjustHeight
+  ]);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    getValue(),
+    adjustHeight
+  ]);
+  const handleChange = useCallback6((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  const value3 = getValue();
+  if ((readonly || layout === "static") && !value3) {
+    return null;
   }
+  return /* @__PURE__ */ React9.createElement(Input5.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React9.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React9.createElement("p", null, value3) : /* @__PURE__ */ React9.createElement(Input5.TextArea, {
+    ref: textareaRef,
+    disabled: !!readonly,
+    placeholder,
+    value: value3 ?? "",
+    classNames: "min-bs-auto max-bs-40 overflow-auto",
+    onChange: handleChange,
+    onBlur,
+    style: {
+      resize: "none"
+    },
+    spellCheck: false
+  }), layout === "full" && /* @__PURE__ */ React9.createElement(Input5.Validation, null, error));
 };
 
-// src/components/Form/RefField.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import React11, { useCallback as useCallback8, useMemo as useMemo4 } from "react";
-import { Expando, getTypeAnnotation, Ref, ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo-schema";
-import { findAnnotation as findAnnotation2 } from "@dxos/effect";
+// src/components/Form/fields/NumberField.tsx
+import React10, { useCallback as useCallback7 } from "react";
+import { Input as Input6 } from "@dxos/react-ui";
+import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
+var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  const handleChange = useCallback7((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React10.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React10.createElement(Input6.TextInput, {
+    type: "number",
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
+};
+
+// src/components/Form/fields/RefField.tsx
+import "@dxos/lit-ui/dx-tag-picker.pcss";
+import React12, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
+import { Entity, Filter, Ref as Ref2 } from "@dxos/echo";
+import { ReferenceAnnotationId } from "@dxos/echo/internal";
+import { useQuery, useSchema as useSchema$ } from "@dxos/echo-react";
+import { findAnnotation } from "@dxos/effect";
 import { DXN } from "@dxos/keys";
-import { DxRefTag } from "@dxos/lit-ui/react";
-import { Input as Input8, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { TagPicker } from "@dxos/react-ui-tag-picker";
-import { descriptionText, mx as mx7 } from "@dxos/react-ui-theme";
-import { isNonNullable as isNonNullable2 } from "@dxos/util";
-var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
-  try {
-    const { t } = useTranslation7(translationKey);
-    const refTypeInfo = useMemo4(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
-      ast
-    ]);
-    const { options: availableOptions, loading: _loading } = useQueryRefOptions({
-      refTypeInfo,
-      onQueryRefOptions
-    });
-    if (refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-      return /* @__PURE__ */ React11.createElement(RefFieldFallback, {
-        type,
-        label,
-        placeholder,
-        disabled,
-        inputOnly,
-        getValue: getValue3,
-        onBlur,
-        onValueChange,
-        ...restInputProps
-      });
+import { DxAnchor } from "@dxos/lit-ui/react";
+import { Button as Button2, Icon as Icon2, Input as Input7, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { descriptionText, mx as mx5 } from "@dxos/ui-theme";
+
+// src/components/ObjectPicker/ObjectPicker.tsx
+import React11, { forwardRef as forwardRef2, useCallback as useCallback8, useState as useState3 } from "react";
+import { Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-searchlist";
+var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+  const { t } = useTranslation6(translationKey);
+  const { query } = useSearchListInput();
+  return /* @__PURE__ */ React11.createElement(Combobox.Item, {
+    value: "__create__",
+    label: t(createOptionLabel[0], {
+      ns: createOptionLabel[1].ns,
+      text: query
+    }),
+    icon: createOptionIcon,
+    classNames: "flex items-center gap-2",
+    closeOnSelect: false,
+    onSelect: () => {
+      onCreateItemSelect(query);
     }
-    const handleGetValue = useCallback8(() => {
-      const formValue = getValue3();
-      const unknownToRefOption = (val) => {
-        if (Ref.isRef(val)) {
-          const dxnString = val.dxn.toString();
-          const matchingOption = availableOptions.find((option2) => option2.id === dxnString);
-          if (matchingOption) {
-            return matchingOption;
-          }
-        }
-        return void 0;
-      };
-      if (array && Array.isArray(formValue)) {
-        return formValue.map(unknownToRefOption).filter(isNonNullable2) ?? [];
-      }
-      const option = unknownToRefOption(formValue);
-      if (option) {
-        return [
-          option
-        ];
-      }
-      return [];
-    }, [
-      getValue3,
-      availableOptions,
-      array
-    ]);
-    const handleSearch = useCallback8((text, ids) => availableOptions.filter((option) => !ids.includes(option.id)).filter((option) => option.label.toLowerCase().includes(text.toLowerCase())).map((option) => ({
-      id: option.id,
-      label: option.label,
-      hue: option.hue
-    })), [
-      availableOptions
-    ]);
-    const handleUpdate = useCallback8((ids) => {
-      if (ids.length === 0) {
-        onValueChange("object", void 0);
-        return;
-      }
-      const refs = ids.map((id) => {
-        const item = availableOptions.find((option) => option.id === id);
-        if (item) {
-          const dxn = DXN.parse(item.id);
-          return Ref.fromDXN(dxn);
-        }
-        return null;
-      }).filter(isNonNullable2);
-      if (array) {
-        onValueChange("object", refs);
-      } else {
-        onValueChange("object", refs[0]);
-      }
-    }, [
-      availableOptions,
-      array,
-      onValueChange
-    ]);
-    const tagPickerMode = useMemo4(() => array ? "multi-select" : "single-select", [
-      array
-    ]);
-    if (!refTypeInfo) {
-      return null;
-    }
-    const { status, error } = restInputProps.getStatus();
-    const items = handleGetValue();
-    return disabled && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input8.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React11.createElement("div", {
-      "data-no-submit": true
-    }, disabled ? items.length < 1 ? /* @__PURE__ */ React11.createElement("p", {
-      className: mx7(descriptionText, "mbe-2")
-    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React11.createElement(DxRefTag, {
-      key: item.id,
-      refid: item.id,
-      rootclassname: "mie-1",
-      style: {
-        marginInlineEnd: ".25rem"
-      }
-    }, item.label)) : /* @__PURE__ */ React11.createElement(TagPicker, {
-      readonly: disabled,
-      items,
-      mode: tagPickerMode,
-      onBlur: (event) => onBlur(event),
-      onUpdate: handleUpdate,
-      onSearch: handleSearch,
-      classNames: "bg-inputSurface p-1.5 rounded-sm"
-    })), inputOnly && /* @__PURE__ */ React11.createElement(Input8.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
-  }
+  });
 };
-var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
-  try {
-    const handleOnValueChange = (_type, dxnString) => {
-      const dxn = DXN.tryParse(dxnString);
-      if (dxn) {
-        onValueChange?.("object", Ref.fromDXN(dxn));
-      } else if (dxnString === "") {
-        onValueChange?.("object", void 0);
-      } else {
-        onValueChange?.("string", dxnString);
-      }
-    };
-    const handleGetValue = () => {
-      const formValue = getValue3();
-      if (typeof formValue === "string") {
-        return formValue;
-      }
-      if (Ref.isRef(formValue)) {
-        return formValue.dxn.toString();
+var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
+  const { t } = useTranslation6(translationKey);
+  const [showForm, setShowForm] = useState3(false);
+  const [formInitialValue, setFormInitialValue] = useState3("");
+  const { results, handleSearch } = useSearchListResults({
+    items: options
+  });
+  const handleFormSave = useCallback8((values) => {
+    onCreate?.(values);
+    setShowForm(false);
+    setFormInitialValue("");
+  }, [
+    onCreate
+  ]);
+  const handleFormCancel = useCallback8(() => {
+    setShowForm(false);
+    setFormInitialValue("");
+  }, []);
+  const handleKeyDown = useCallback8((event) => {
+    if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
+      event.stopPropagation();
+      event.preventDefault();
+      const input = event.currentTarget.querySelector('input[type="text"]');
+      const currentQuery = input?.value || "";
+      setFormInitialValue(currentQuery);
+      setShowForm(true);
+    }
+  }, [
+    createSchema
+  ]);
+  return /* @__PURE__ */ React11.createElement(Combobox.Content, {
+    ...props,
+    ref,
+    onSearch: handleSearch,
+    onKeyDownCapture: handleKeyDown
+  }, showForm && createSchema ? /* @__PURE__ */ React11.createElement(Popover.Viewport, null, /* @__PURE__ */ React11.createElement(Form.Root, {
+    testId: "create-referenced-object-form",
+    schema: createSchema,
+    values: createInitialValuePath ? {
+      [createInitialValuePath]: formInitialValue
+    } : {},
+    onSave: handleFormSave,
+    onCancel: handleFormCancel
+  }, /* @__PURE__ */ React11.createElement(Form.Viewport, null, /* @__PURE__ */ React11.createElement(Form.Content, null, /* @__PURE__ */ React11.createElement(Form.FieldSet, null), /* @__PURE__ */ React11.createElement(Form.Actions, null))))) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(Combobox.Input, {
+    placeholder: t("ref field combobox input placeholder"),
+    autoFocus: true
+  }), /* @__PURE__ */ React11.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React11.createElement(Combobox.Item, {
+    key: option.id,
+    value: option.id,
+    label: option.label,
+    checked: selectedIds?.includes(option.id),
+    onSelect: () => onSelect(option.id),
+    classNames: "flex items-center gap-2"
+  })), createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React11.createElement(CreateItem, {
+    createOptionLabel,
+    createOptionIcon,
+    onCreateItemSelect: (query) => {
+      setFormInitialValue(query);
+      setShowForm(true);
+    }
+  }))), /* @__PURE__ */ React11.createElement(Combobox.Arrow, null));
+});
+ObjectPickerContent.displayName = "ObjectPickerContent";
+var ObjectPicker = {
+  Root: Combobox.Root,
+  Portal: Combobox.Portal,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
+  Content: ObjectPickerContent
+};
+
+// src/components/Form/fields/RefField.tsx
+var isRefSnapshot = (val) => {
+  return typeof val === "object" && typeof val?.["/"] === "string";
+};
+var defaultGetOptions = (results) => results.map((result) => {
+  const id = Entity.getDXN(result).toString();
+  const label = Entity.getLabel(result);
+  return {
+    id,
+    label: label ?? id
+  };
+});
+var defaultResultsHook = (db, typename) => useQuery(db, typename ? Filter.typename(typename) : Filter.nothing());
+var RefField = (props) => {
+  const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, db, resultsHook: useResults = defaultResultsHook, schemaHook: useSchema = useSchema$, getOptions: getOptions2 = defaultGetOptions, onCreate, onValueChange } = props;
+  const { t } = useTranslation7(translationKey);
+  const { status, error } = getStatus();
+  const typename = useMemo6(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
+    type
+  ]);
+  const results = useResults(db, typename);
+  const options = useMemo6(() => getOptions2(results), [
+    results,
+    getOptions2
+  ]);
+  const handleGetValue = useCallback9(() => {
+    const formValue = getValue();
+    const unknownToRefOption = (value3) => {
+      const isRef = Ref2.isRef(value3);
+      if (isRef || isRefSnapshot(value3)) {
+        const dxnString = isRef ? value3.dxn.toString() : value3["/"];
+        const matchingOption = options.find((option) => option.id === dxnString);
+        if (matchingOption) {
+          return matchingOption;
+        }
       }
       return void 0;
     };
-    return /* @__PURE__ */ React11.createElement(TextInput, {
-      type,
-      label,
-      disabled,
-      placeholder,
-      inputOnly,
-      getValue: handleGetValue,
-      onValueChange: handleOnValueChange,
-      ...restInputProps
-    });
-  } finally {
-    _effect.f();
+    return unknownToRefOption(formValue);
+  }, [
+    options,
+    getValue
+  ]);
+  const handleUpdate = useCallback9((id) => {
+    const item2 = options.find((option) => option.id === id);
+    const ref = item2 ? Ref2.fromDXN(DXN.parse(item2.id)) : void 0;
+    onValueChange(type, ref);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const item = handleGetValue();
+  const selectedIds = useMemo6(() => item ? [
+    item.id
+  ] : [], [
+    item
+  ]);
+  const createSchema = useSchema(db, typename);
+  const handleCreate = useCallback9((values) => {
+    if (createSchema && onCreate) {
+      onCreate(createSchema, values);
+    }
+  }, [
+    createSchema,
+    onCreate
+  ]);
+  const handleSelect = useCallback9((id) => {
+    if (item?.id === id) {
+      handleUpdate(void 0);
+    } else {
+      handleUpdate(id);
+    }
+  }, [
+    item,
+    handleUpdate
+  ]);
+  if (!typename || (readonly || layout === "static") && !item) {
+    return null;
   }
+  return /* @__PURE__ */ React12.createElement(Input7.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React12.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React12.createElement("p", {
+    className: mx5(descriptionText, "mbe-2")
+  }, t("empty readonly ref field label")) : /* @__PURE__ */ React12.createElement(DxAnchor, {
+    key: item.id,
+    refid: item.id,
+    rootclassname: "mie-1"
+  }, item.label) : /* @__PURE__ */ React12.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Trigger, {
+    asChild: true,
+    classNames: "p-0"
+  }, item ? /* @__PURE__ */ React12.createElement("div", {
+    className: "flex gap-2 is-full"
+  }, /* @__PURE__ */ React12.createElement(Input7.Root, {
+    key: item.id
+  }, /* @__PURE__ */ React12.createElement(Input7.TextInput, {
+    value: item.label,
+    readOnly: true,
+    classNames: "is-full"
+  }))) : /* @__PURE__ */ React12.createElement(Button2, {
+    classNames: "is-full text-start gap-2"
+  }, /* @__PURE__ */ React12.createElement("div", {
+    role: "none",
+    className: "grow overflow-hidden"
+  }, /* @__PURE__ */ React12.createElement("span", {
+    className: "flex truncate text-description"
+  }, placeholder ?? t("ref field placeholder"))), /* @__PURE__ */ React12.createElement(Icon2, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }))), /* @__PURE__ */ React12.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Content, {
+    classNames: "popover-card-width",
+    options,
+    selectedIds,
+    createSchema: createSchema && omitId(createSchema),
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    onCreate: handleCreate,
+    onSelect: handleSelect
+  })))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
 };
 
-// src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
-var getInputComponent = (type, format) => {
-  switch (format) {
-    case FormatEnum4.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum4.Markdown:
-      return MarkdownInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
+// src/components/Form/fields/SelectField.tsx
+import React13, { useCallback as useCallback10 } from "react";
+import { Input as Input8, Select } from "@dxos/react-ui";
+var SelectField = ({ type, readonly, label, layout, placeholder, options, getStatus, getValue, onValueChange }) => {
+  const { status, error } = getStatus();
+  const value3 = getValue();
+  const handleValueChange = useCallback10((value4) => onValueChange(type, value4), [
+    type,
+    onValueChange
+  ]);
+  if ((readonly || layout === "static") && value3 == null) {
+    return null;
   }
+  return /* @__PURE__ */ React13.createElement(Input8.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React13.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React13.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)) : /* @__PURE__ */ React13.createElement(Select.Root, {
+    value: value3,
+    onValueChange: handleValueChange
+  }, /* @__PURE__ */ React13.createElement(Select.TriggerButton, {
+    classNames: "is-full",
+    disabled: !!readonly,
+    placeholder
+  }), /* @__PURE__ */ React13.createElement(Select.Portal, null, /* @__PURE__ */ React13.createElement(Select.Content, null, /* @__PURE__ */ React13.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ React13.createElement(Select.Option, {
+      key: String(value4),
+      value: String(value4)
+    }, label2 ?? String(value4))
+  ))), /* @__PURE__ */ React13.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React13.createElement(Input8.DescriptionAndValidation, null, error));
 };
 
-// src/components/Form/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
-  var _effect = _useSignals12();
-  try {
-    const { ast, name, type, format, title, description, options, examples, array } = property;
-    const inputProps = useInputProps(path);
-    const label = useMemo5(() => title ?? pipe2(name, capitalize2), [
-      title,
-      name
-    ]);
-    const placeholder = useMemo5(() => examples?.length ? `Example: "${examples[0]}"` : description, [
-      examples,
-      description
-    ]);
-    const FoundComponent = lookupComponent?.({
-      prop: name,
-      schema: Schema.make(ast),
-      inputProps: {
-        type,
-        format,
-        label,
-        disabled: readonly,
-        placeholder,
-        ...inputProps
-      }
-    });
-    if (FoundComponent) {
-      return FoundComponent;
-    }
-    const jsonPath = createJsonPath3(path ?? []);
-    const CustomComponent = Custom?.[jsonPath];
-    if (CustomComponent) {
-      return /* @__PURE__ */ React12.createElement(CustomComponent, {
-        type,
-        format,
-        label,
-        inputOnly: inline,
-        placeholder,
-        disabled: readonly,
-        ...inputProps
-      });
-    }
-    const refProps = getRefProps(property);
-    if (refProps) {
-      return /* @__PURE__ */ React12.createElement(RefField, {
-        ast: refProps.ast,
-        array: refProps.isArray,
-        type,
-        format,
-        label,
-        placeholder,
-        disabled: readonly,
-        inputOnly: inline,
-        onQueryRefOptions,
-        ...inputProps
-      });
+// src/components/Form/fields/SelectOptionField.tsx
+import React14, { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import { PublicKey } from "@dxos/keys";
+import { IconButton as IconButton3, Input as Input9, Tag, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { List } from "@dxos/react-ui-list";
+import { HuePicker } from "@dxos/react-ui-pickers";
+import { hues, osTranslations, subtleHover } from "@dxos/ui-theme";
+var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
+  const { t } = useTranslation8(translationKey);
+  const { status, error } = getStatus();
+  const [selected, setSelectedId] = useState4(null);
+  const [isNewOption, setIsNewOption] = useState4(false);
+  const inputRef = useRef3(null);
+  const options = getValue();
+  useEffect6(() => {
+    if (options === void 0) {
+      onValueChange(type, []);
     }
-    if (array) {
-      return /* @__PURE__ */ React12.createElement(ArrayField, {
-        property,
-        path,
-        inputProps,
-        readonly,
-        Custom
-      });
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  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 InputComponent = getInputComponent(type, format);
-    if (InputComponent) {
-      return /* @__PURE__ */ React12.createElement(InputComponent, {
-        type,
-        format,
-        label,
-        inputOnly: inline,
-        placeholder,
-        disabled: readonly,
-        ...inputProps
-      });
+    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 = useCallback11(() => {
+    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 = useCallback11((id) => {
+    const newOptions = options?.filter((option) => option.id !== id) ?? [];
+    onValueChange(type, newOptions);
+    setSelectedId(null);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleMove = useCallback11((from, to) => {
+    if (!options) {
+      return;
     }
-    if (options) {
-      return /* @__PURE__ */ React12.createElement(SelectInput, {
-        type,
-        format,
-        disabled: readonly,
-        inputOnly: inline,
-        label,
-        options: options.map((option) => ({
-          value: option,
-          label: String(option)
-        })),
-        placeholder,
-        ...inputProps
-      });
+    const newOptions = [
+      ...options
+    ];
+    const [removed] = newOptions.splice(from, 1);
+    newOptions.splice(to, 0, removed);
+    onValueChange(type, newOptions);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleClick = useCallback11((id) => {
+    setSelectedId((current) => current === id ? null : id);
+  }, []);
+  const handleTitleChange = useCallback11((id) => (e) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      title: e.target.value
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleKeyDown = useCallback11((ev) => {
+    if (ev.key === "Enter") {
+      setSelectedId(null);
     }
-    if (type === "object") {
-      const baseNode = findNode3(ast, isDiscriminatedUnion2);
-      const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode3(ast, SchemaAST4.isTypeLiteral);
-      if (typeLiteral) {
-        return /* @__PURE__ */ React12.createElement(React12.Fragment, null, !inline && /* @__PURE__ */ React12.createElement("h3", {
-          className: mx8("text-lg mlb-inputSpacingBlock first:mbs-0")
-        }, label), /* @__PURE__ */ React12.createElement(FormFields, {
-          schema: Schema.make(typeLiteral),
-          path,
-          readonly,
-          onQueryRefOptions,
-          Custom,
-          lookupComponent
-        }));
-      }
+  }, []);
+  const handleColorChange = useCallback11((id) => (hue) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      color: hue
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  useEffect6(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
     }
-    return null;
-  } finally {
-    _effect.f();
-  }
+  }, [
+    selected,
+    isNewOption
+  ]);
+  return /* @__PURE__ */ React14.createElement(Input9.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React14.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React14.createElement("div", {
+    role: "none"
+  }, options && /* @__PURE__ */ React14.createElement(List.Root, {
+    items: options,
+    isItem: (_item) => true,
+    onMove: readonly ? void 0 : handleMove,
+    readonly: !!readonly
+  }, ({ items }) => /* @__PURE__ */ React14.createElement("div", {
+    role: "list",
+    className: "is-full overflow-auto"
+  }, items?.map((item) => /* @__PURE__ */ React14.createElement("div", {
+    key: item.id
+  }, /* @__PURE__ */ React14.createElement(List.Item, {
+    role: "button",
+    item,
+    classNames: [
+      subtleHover,
+      "flex flex-col cursor-pointer rounded-sm"
+    ],
+    "aria-expanded": selected === item.id
+  }, /* @__PURE__ */ React14.createElement("div", {
+    className: "flex items-center"
+  }, /* @__PURE__ */ React14.createElement(List.ItemDragHandle, {
+    disabled: !!readonly
+  }), /* @__PURE__ */ React14.createElement(List.ItemTitle, {
+    onClick: () => handleClick(item.id),
+    classNames: "flex-1"
+  }, /* @__PURE__ */ React14.createElement(Tag, {
+    palette: item.color
+  }, item.title || "\u200B")), /* @__PURE__ */ React14.createElement(IconButton3, {
+    iconOnly: true,
+    variant: "ghost",
+    label: t(selected === item.id ? "collapse label" : "expand label", {
+      ns: osTranslations
+    }),
+    icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+    onClick: () => handleClick(item.id)
+  })), selected === item.id && /* @__PURE__ */ React14.createElement("div", {
+    className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
+  }, /* @__PURE__ */ React14.createElement(Input9.Label, {
+    classNames: "text-xs"
+  }, t("select option label")), /* @__PURE__ */ React14.createElement("div", {
+    className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
+  }, /* @__PURE__ */ React14.createElement(Input9.TextInput, {
+    disabled: !!readonly,
+    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__ */ React14.createElement(HuePicker, {
+    disabled: !!readonly,
+    value: item.color,
+    onChange: handleColorChange(item.id)
+  }), /* @__PURE__ */ React14.createElement(IconButton3, {
+    disabled: !!readonly,
+    icon: "ph--trash--fill",
+    iconOnly: true,
+    label: t("select option delete"),
+    onClick: () => handleDelete(item.id)
+  })))))), /* @__PURE__ */ React14.createElement(IconButton3, {
+    variant: "ghost",
+    icon: "ph--plus--regular",
+    label: t("select option add"),
+    onClick: handleAdd,
+    disabled: !!readonly,
+    classNames: "is-full"
+  })))));
 };
-var FormFields = /* @__PURE__ */ forwardRef(({ classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions }, forwardRef2) => {
-  var _effect = _useSignals12();
-  try {
-    const values = useFormValues(path);
-    const properties = useMemo5(() => {
-      const props = getSchemaProperties2(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__ */ React12.createElement("div", {
-      role: "form",
-      className: mx8("is-full", classNames),
-      ref: forwardRef2
-    }, properties.map((property) => {
-      return /* @__PURE__ */ React12.createElement(FormField, {
-        key: property.name,
-        property,
-        path: [
-          ...path ?? [],
-          property.name
-        ],
-        readonly,
-        onQueryRefOptions,
-        lookupComponent,
-        Custom
-      });
-    }).filter(isNotFalsy));
-  } finally {
-    _effect.f();
-  }
-});
 
-// src/components/Form/Form.tsx
-var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, onCancel, schema, onValuesChanged, onValidate, onSave, ...props }) => {
-  var _effect = _useSignals13();
-  try {
-    const formRef = useRef3(null);
-    const handleValid = useMemo6(() => autoSave ? onSave : void 0, [
-      autoSave,
-      onSave
-    ]);
-    useEffect7(() => {
-      if (autoFocus && formRef.current) {
-        const input = formRef.current.querySelector("input");
-        if (input) {
-          input.focus();
-        }
-      }
-    }, [
-      autoFocus
-    ]);
-    return /* @__PURE__ */ React13.createElement(FormProvider, {
-      formRef,
-      schema,
-      autoSave,
-      initialValues,
-      onValuesChanged,
-      onValidate,
-      onValid: handleValid,
-      onSave
-    }, /* @__PURE__ */ React13.createElement("div", {
-      role: "none",
-      className: "contents",
-      "data-testid": testId
-    }, /* @__PURE__ */ React13.createElement(FormFields, {
-      ...props,
-      ref: formRef,
-      classNames: [
-        outerSpacing === "blockStart-0" ? "pli-cardSpacingInline mbe-cardSpacingBlock [&>.mbs-inputSpacingBlock:first-child]:!mbs-0" : outerSpacing === "scroll-fields" ? "pli-cardSpacingInline pbe-cardSpacingBlock" : outerSpacing ? cardSpacing2 : false,
-        outerSpacing === "scroll-fields" && cardDialogOverflow,
-        classNames
-      ],
-      readonly,
-      schema
-    }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React13.createElement(FormActions, {
-      readonly,
-      onCancel,
-      outerSpacing
-    })));
-  } finally {
-    _effect.f();
-  }
+// src/components/Form/fields/TextField.tsx
+import React15, { useCallback as useCallback12 } from "react";
+import { Input as Input10 } from "@dxos/react-ui";
+var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextInput, {
+    noAutoFill: true,
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
+};
+
+// src/components/Form/fields/TextAreaField.tsx
+import React16, { useCallback as useCallback13 } from "react";
+import { Input as Input11 } from "@dxos/react-ui";
+var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  const handleChange = useCallback13((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React16.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React16.createElement(Input11.TextArea, {
+    rows: 3,
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
+};
+
+// src/components/Form/fields/TupleField.tsx
+import React17 from "react";
+import { Input as Input12 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/ui-theme";
+import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
+var gridCols = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4"
+];
+var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const values = getValue() ?? {};
+  return /* @__PURE__ */ React17.createElement(Input12.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React17.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React17.createElement("div", {
+    className: mx6("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ React17.createElement(Input12.TextInput, {
+    key: prop,
+    type: "number",
+    disabled: !!readonly,
+    value: values[prop],
+    onChange: (event) => {
+      onValueChange(type, {
+        ...values,
+        [prop]: safeParseFloat3(event.target.value, 0)
+      });
+    },
+    onBlur
+  }))));
 };
 
 // src/components/FieldEditor/FieldEditor.tsx
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ view, projection, field, registry, onSave, onCancel, outerSpacing }) => {
-  var _effect = _useSignals14();
-  try {
-    const { t } = useTranslation8(translationKey);
-    const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
-    useEffect8(() => setProps(projection.getFieldProjection(field.id).props), [
-      field,
-      projection
-    ]);
-    const [schemas, setSchemas] = useState5([]);
-    useEffect8(() => {
-      if (!registry) {
-        return;
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
+var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
+  const { t } = useTranslation9(translationKey);
+  const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
+  useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
+    field,
+    projection
+  ]);
+  const [schemas, setSchemas] = useState5([]);
+  useAsyncEffect(async () => {
+    if (!registry) {
+      return;
+    }
+    const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
+      fire: true
+    });
+    const schemas2 = await registry.query().run();
+    setSchemas(schemas2);
+    return () => subscription?.();
+  }, [
+    registry
+  ]);
+  const [referenceSchema, setReferenceSchema] = useState5();
+  useEffect7(() => {
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+  }, [
+    schemas,
+    props?.referenceSchema
+  ]);
+  const [{ fieldSchema }, setFieldSchema] = useState5({
+    fieldSchema: getFormatSchema(props?.format)
+  });
+  const fieldMap = useMemo7(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ React18.createElement(SelectField, {
+      ...props2,
+      options: FormatEnums.filter((value3) => value3 !== Format4.TypeFormat.None).map((value3) => ({
+        value: value3,
+        label: t(`format ${value3}`)
+      }))
+    }),
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React18.createElement(SelectField, {
+      ...props2,
+      options: schemas.map((schema) => ({
+        value: schema.typename
+      }))
+    }),
+    ["referencePath"]: (props2) => /* @__PURE__ */ React18.createElement(SelectField, {
+      ...props2,
+      options: referenceSchema ? getFormProperties(referenceSchema.ast).sort((a, b) => a.name.toString().localeCompare(b.name.toString())).map((p) => ({
+        value: p.name.toString()
+      })) : []
+    }),
+    ["options"]: (props2) => /* @__PURE__ */ React18.createElement(SelectOptionField, props2)
+  }), [
+    t,
+    schemas,
+    referenceSchema
+  ]);
+  const propIsNotType = useCallback14((props2) => props2.filter((prop) => prop.name !== "type"), []);
+  const handleValuesChanged = useCallback14((_props) => {
+    setFieldSchema((prev) => {
+      const fieldSchema2 = getFormatSchema(_props.format);
+      if (prev.fieldSchema === fieldSchema2) {
+        return prev;
       }
-      const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
-        fire: true
-      });
-      const t2 = setTimeout(async () => {
-        const schemas2 = await registry.query().run();
-        setSchemas(schemas2);
-      });
-      return () => {
-        clearTimeout(t2);
-        subscription?.();
+      return {
+        fieldSchema: fieldSchema2
       };
-    }, [
-      registry
-    ]);
-    const [referenceSchema, setReferenceSchema] = useState5();
-    useEffect8(() => {
-      setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
-    }, [
-      schemas,
-      props?.referenceSchema
-    ]);
-    const [{ fieldSchema }, setFieldSchema] = useState5({
-      fieldSchema: getFormatSchema(props?.format)
     });
-    const handleValuesChanged = useCallback9((_props) => {
-      setFieldSchema((prev) => {
-        const fieldSchema2 = getFormatSchema(_props.format);
-        if (prev.fieldSchema === fieldSchema2) {
-          return prev;
+    setReferenceSchema((prev) => {
+      if (_props.referenceSchema !== prev?.typename) {
+        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+        if (newSchema) {
+          return newSchema;
         }
+      }
+      return prev;
+    });
+    setProps((props2) => {
+      const type = formatToType[_props.format];
+      const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
+      if (props2.type !== type) {
         return {
-          fieldSchema: fieldSchema2
+          ...props2,
+          ..._props,
+          ...additionalProps,
+          type
         };
-      });
-      setReferenceSchema((prev) => {
-        if (_props.referenceSchema !== prev?.typename) {
-          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
-          if (newSchema) {
-            return newSchema;
-          }
-        }
-        return prev;
-      });
-      setProps((props2) => {
-        const type = formatToType[_props.format];
-        if (props2.type !== type) {
-          return {
-            ...props2,
-            ..._props,
-            type
-          };
+      }
+      return _props;
+    });
+  }, [
+    schemas,
+    props.format,
+    props.referenceSchema
+  ]);
+  const handleValidate = useCallback14(({ property }) => {
+    if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) {
+      return [
+        {
+          path: "property",
+          message: `property is not unique: '${property}'`
         }
-        return _props;
+      ];
+    }
+  }, [
+    projection.getFields(),
+    field
+  ]);
+  const handleSave = useCallback14((props2) => {
+    if (view) {
+      Obj.change(view, () => {
+        projection.setFieldProjection({
+          field,
+          props: props2
+        });
       });
-    }, [
-      schemas,
-      props.format,
-      props.referenceSchema
-    ]);
-    const handleValidate = useCallback9(({ property }) => {
-      if (property && view.fields.find((f) => f.path === property && f.path !== field.path)) {
-        return [
-          {
-            path: "property",
-            message: `property is not unique: '${property}'`
-          }
-        ];
-      }
-    }, [
-      view.fields,
-      field
-    ]);
-    const handleSave = useCallback9((props2) => {
+    } else {
       projection.setFieldProjection({
         field,
         props: props2
       });
-      onSave();
-    }, [
-      projection,
-      field,
-      onSave
-    ]);
-    const handleCancel = useCallback9(() => {
-      requestAnimationFrame(() => onCancel?.());
-      onSave();
-    }, [
-      onSave
-    ]);
-    const custom = useMemo7(() => ({
-      ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
-        ...props2,
-        options: FormatEnums.filter((value) => value !== FormatEnum5.None).map((value) => ({
-          value,
-          label: t(`format ${value}`)
-        }))
-      }),
-      ["referenceSchema"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
-        ...props2,
-        options: schemas.map((schema) => ({
-          value: schema.typename
-        }))
-      }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
-        ...props2,
-        options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
-          value: p.name
-        })) : []
-      }),
-      ["options"]: (props2) => /* @__PURE__ */ React14.createElement(SelectOptionInput, props2)
-    }), [
-      t,
-      schemas,
-      referenceSchema
-    ]);
-    const propIsNotType = useCallback9((props2) => props2.filter((p) => p.name !== "type"), []);
-    if (!fieldSchema) {
-      log3.warn("invalid format", {
-        props
-      }, {
-        F: __dxlog_file4,
-        L: 183,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return null;
     }
-    return /* @__PURE__ */ React14.createElement(Form, {
-      key: field.id,
-      autoFocus: true,
-      values: props,
-      schema: fieldSchema,
-      filter: propIsNotType,
-      sort: [
-        "property",
-        "format"
-      ],
-      onValuesChanged: handleValuesChanged,
-      onValidate: handleValidate,
-      onSave: handleSave,
-      onCancel: handleCancel,
-      Custom: custom,
-      outerSpacing
+    onSave();
+  }, [
+    projection,
+    field,
+    view,
+    onSave
+  ]);
+  const handleCancel = useCallback14(() => {
+    onSave();
+    requestAnimationFrame(() => onCancel?.());
+  }, [
+    onSave
+  ]);
+  if (!fieldSchema) {
+    log2.warn("invalid format", {
+      props
+    }, {
+      F: __dxlog_file2,
+      L: 173,
+      S: void 0,
+      C: (f, a) => f(...a)
     });
-  } finally {
-    _effect.f();
+    return null;
   }
+  return /* @__PURE__ */ React18.createElement(Form.Root, {
+    key: field.id,
+    fieldMap,
+    autoFocus: true,
+    readonly,
+    schema: fieldSchema,
+    values: props,
+    exclude: propIsNotType,
+    sort: [
+      "property",
+      "format"
+    ],
+    onValuesChanged: handleValuesChanged,
+    onValidate: handleValidate,
+    onSave: handleSave,
+    onCancel: handleCancel
+  }, /* @__PURE__ */ React18.createElement(Form.Content, null, /* @__PURE__ */ React18.createElement(Form.FieldSet, null), /* @__PURE__ */ React18.createElement(Form.Actions, null)));
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
-import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema2 } from "effect";
-import React15, { useCallback as useCallback10, useMemo as useMemo8, useState as useState6 } from "react";
-import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo-schema";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { Callout, IconButton as IconButton4, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { RegistryContext } from "@effect-atom/atom-react";
+import * as Array2 from "effect/Array";
+import * as Match2 from "effect/Match";
+import * as Option4 from "effect/Option";
+import * as Schema3 from "effect/Schema";
+import React19, { forwardRef as forwardRef3, useCallback as useCallback15, useContext, useImperativeHandle, useMemo as useMemo8, useState as useState6 } from "react";
+import { Filter as Filter2, Format as Format5, Obj as Obj2, Query, QueryAST } from "@dxos/echo";
+import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
+import { invariant } from "@dxos/invariant";
+import { Callout, IconButton as IconButton4, Input as Input13, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { QueryForm } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
-import { cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
-import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
-import { FieldSchema, ViewProjection, VIEW_FIELD_LIMIT } from "@dxos/schema";
-var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
-var grid = "grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]";
-var ViewMetaSchema = Schema2.Struct({
-  name: Schema2.String.annotations({
-    title: "View"
-  }),
-  typename: Format.URL.annotations({
-    title: "Typename"
-  })
-}).pipe(Schema2.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, showHeading = false, onTypenameChanged, onDelete, outerSpacing = true }) => {
-  var _effect = _useSignals15();
-  try {
-    const { t } = useTranslation9(translationKey);
-    const projection = useMemo8(() => {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-      return new ViewProjection(jsonSchema, view);
-    }, [
-      schema,
-      view
-    ]);
-    const [field, setField] = useState6();
-    const readonly = _readonly || !isMutable(schema);
-    const viewValues = useMemo8(() => {
-      return {
-        name: view.name,
-        // TODO(burdon): Need to warn user of possible consequences of editing.
-        // TODO(burdon): Settings should have domain name owned by user.
-        typename: view.query.typename
-      };
-    }, [
-      view
-    ]);
-    const handleSelect = useCallback10((field2) => {
-      if (readonly) {
-        return;
-      }
-      setField((f) => f === field2 ? void 0 : field2);
-    }, [
-      readonly
-    ]);
-    const handleAdd = useCallback10(() => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 92,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      const field2 = projection.createFieldProjection();
-      setField(field2);
-    }, [
-      schema,
+import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, createDirectChangeCallback, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
+import { mx as mx7, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
+var listItemGrid = "grid grid-cols-subgrid col-span-5";
+var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
+  const atomRegistry = useContext(RegistryContext);
+  const schemaReadonly = !isMutable(schema);
+  const { t } = useTranslation10(translationKey);
+  const projectionModel = useMemo8(() => {
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+    const change = schema instanceof EchoSchema ? createEchoChangeCallback(view, schema) : createDirectChangeCallback(view.projection, jsonSchema);
+    const model = new ProjectionModel({
+      registry: atomRegistry,
       view,
-      readonly
-    ]);
-    const handleUpdate = useCallback10(({ name, typename }) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 99,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      requestAnimationFrame(() => {
-        if (view.name !== name) {
-          view.name = name;
-        }
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
-        }
-      });
-    }, [
-      schema,
+      baseSchema: jsonSchema,
+      change
+    });
+    return model;
+  }, [
+    atomRegistry,
+    schema,
+    view
+  ]);
+  useImperativeHandle(forwardedRef, () => projectionModel, [
+    projectionModel
+  ]);
+  const [expandedField, setExpandedField] = useState6();
+  const queueTarget = Match2.value(view.query.ast).pipe(Match2.when({
+    type: "options"
+  }, ({ options }) => {
+    return Option4.fromNullable(options.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.getOrUndefined);
+  }), Match2.orElse(() => void 0));
+  const viewSchema = useMemo8(() => {
+    const base = Schema3.Struct({
+      query: mode === "schema" ? Format5.URL.annotations({
+        title: "Record type"
+      }) : QueryAST.Query.annotations({
+        title: "Query"
+      })
+    });
+    if (mode === "tag") {
+      return Schema3.Struct({
+        ...base.fields,
+        target: Schema3.optional(Schema3.String.annotations({
+          title: "Target Queue"
+        }))
+      }).pipe(Schema3.mutable);
+    }
+    return base.pipe(Schema3.mutable);
+  }, [
+    mode
+  ]);
+  const viewValues = useMemo8(() => ({
+    query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+    target: queueTarget
+  }), [
+    mode,
+    view.query.ast,
+    queueTarget
+  ]);
+  const fieldMap = useMemo8(() => mode === "tag" ? customFields({
+    types,
+    tags
+  }) : void 0, [
+    mode,
+    types,
+    tags
+  ]);
+  const handleAdd = useCallback15(() => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 148,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [
+    projectionModel,
+    readonly
+  ]);
+  const handleUpdate = useCallback15((values) => {
+    requestAnimationFrame(() => {
+      const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
+      onQueryChanged?.(query, values.target);
+    });
+  }, [
+    onQueryChanged,
+    view,
+    queueTarget,
+    mode
+  ]);
+  const handleDelete = useCallback15((fieldId) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 165,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    if (fieldId === expandedField) {
+      setExpandedField(void 0);
+    }
+    onDelete?.(fieldId);
+  }, [
+    expandedField,
+    onDelete,
+    readonly
+  ]);
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: mx7(classNames)
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Callout.Root, {
+    valence: "info",
+    classNames: "mlb-cardSpacingBlock"
+  }, /* @__PURE__ */ React19.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
+    schema: viewSchema,
+    values: viewValues,
+    fieldMap,
+    autoSave: true,
+    onSave: handleUpdate
+  }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+    label: t("fields label"),
+    asChild: true
+  }), /* @__PURE__ */ React19.createElement(FieldList, {
+    schema,
+    view,
+    registry,
+    readonly,
+    showHeading,
+    onDelete: handleDelete
+  })), !readonly && !expandedField && /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: "mlb-cardSpacingBlock"
+  }, /* @__PURE__ */ React19.createElement(IconButton4, {
+    icon: "ph--plus--regular",
+    label: t("add property button label"),
+    onClick: readonly ? void 0 : handleAdd,
+    // TODO(burdon): Show field limit in ux (not tooltip).
+    disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
+    classNames: "is-full"
+  })));
+});
+var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
+  const atomRegistry = useContext(RegistryContext);
+  const schemaReadonly = !isMutable(schema);
+  const { t } = useTranslation10(translationKey);
+  const projectionModel = useMemo8(() => {
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+    const change = schema instanceof EchoSchema ? createEchoChangeCallback(view, schema) : createDirectChangeCallback(view.projection, jsonSchema);
+    const model = new ProjectionModel({
+      registry: atomRegistry,
       view,
-      onTypenameChanged,
-      readonly
-    ]);
-    const handleDelete = useCallback10((fieldId) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 115,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      if (fieldId === field?.id) {
-        setField(void 0);
-      }
-      onDelete?.(fieldId);
-    }, [
-      schema,
-      field,
-      onDelete,
-      readonly
-    ]);
-    const handleMove = useCallback10((fromIndex, toIndex) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 127,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      const fields = [
-        ...view.fields
-      ];
-      const [moved] = fields.splice(fromIndex, 1);
-      fields.splice(toIndex, 0, moved);
-      view.fields = fields;
-    }, [
-      schema,
-      view.fields,
-      readonly
-    ]);
-    const handleClose = useCallback10(() => setField(void 0), []);
-    const hiddenProperties = projection.getHiddenProperties();
-    const handleHide = useCallback10((fieldId) => {
-      setField(void 0);
-      projection.hideFieldProjection(fieldId);
-    }, [
-      projection
-    ]);
-    const handleShow = useCallback10((property) => {
-      setField(void 0);
-      projection.showFieldProjection(property);
-    }, [
-      projection
-    ]);
-    return /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: mx9(classNames)
-    }, readonly && /* @__PURE__ */ React15.createElement("div", {
+      baseSchema: jsonSchema,
+      change
+    });
+    return model;
+  }, [
+    atomRegistry,
+    schema,
+    view
+  ]);
+  const [expandedField, setExpandedField] = useState6();
+  const handleToggleField = useCallback15((field) => {
+    setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
+  }, [
+    readonly
+  ]);
+  const handleDelete = useCallback15((fieldId) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 254,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    if (fieldId === expandedField) {
+      setExpandedField(void 0);
+    }
+    onDelete?.(fieldId);
+  }, [
+    expandedField,
+    onDelete,
+    readonly
+  ]);
+  const handleMove = useCallback15((fromIndex, toIndex) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 266,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    const fields = [
+      ...view.projection.fields
+    ];
+    const [moved] = fields.splice(fromIndex, 1);
+    fields.splice(toIndex, 0, moved);
+    Obj2.change(view, (v) => {
+      v.projection.fields = fields;
+    });
+  }, [
+    view.projection.fields,
+    readonly
+  ]);
+  const handleClose = useCallback15(() => setExpandedField(void 0), []);
+  const handleHide = useCallback15((fieldId) => {
+    setExpandedField(void 0);
+    projectionModel.hideFieldProjection(fieldId);
+  }, [
+    projectionModel
+  ]);
+  const handleShow = useCallback15((property) => {
+    setExpandedField(void 0);
+    projectionModel.showFieldProjection(property);
+  }, [
+    projectionModel
+  ]);
+  return /* @__PURE__ */ React19.createElement(List2.Root, {
+    items: view.projection.fields,
+    isItem: Schema3.is(FieldSchema),
+    getId: (field) => field.id,
+    onMove: readonly ? void 0 : handleMove,
+    readonly
+  }, ({ items: fields }) => /* @__PURE__ */ React19.createElement(React19.Fragment, null, showHeading && /* @__PURE__ */ React19.createElement("h3", {
+    className: "text-sm"
+  }, t("field path label")), /* @__PURE__ */ React19.createElement("div", {
+    role: "list",
+    className: listGrid
+  }, fields?.map((field) => {
+    const hidden = field.visible === false;
+    return /* @__PURE__ */ React19.createElement(List2.Item, {
+      key: field.id,
+      item: field,
+      classNames: listItemGrid,
+      "aria-expanded": expandedField === field.id
+    }, /* @__PURE__ */ React19.createElement("div", {
       role: "none",
-      className: mx9("is-full", outerSpacing && "plb-cardSpacingBlock pli-cardSpacingInline")
-    }, /* @__PURE__ */ React15.createElement(Callout.Root, {
-      valence: "info"
-    }, /* @__PURE__ */ React15.createElement(Callout.Title, null, t("system schema description")))), /* @__PURE__ */ React15.createElement(Form, {
-      autoSave: true,
-      schema: ViewMetaSchema,
-      values: viewValues,
-      readonly,
-      onSave: handleUpdate,
-      outerSpacing
-    }), /* @__PURE__ */ React15.createElement("div", {
+      className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
+    }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
+      disabled: readonly || schemaReadonly
+    }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
+      classNames: hidden && "text-subdued",
+      onClick: () => handleToggleField(field)
+    }, field.path), /* @__PURE__ */ React19.createElement(List2.ItemButton, {
+      label: t(hidden ? "show field label" : "hide field label"),
+      "data-testid": hidden ? "show-field-button" : "hide-field-button",
+      icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
+      autoHide: false,
+      disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
+      onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
+    }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
+      label: t("delete field label"),
+      autoHide: false,
+      disabled: readonly || schemaReadonly || view.projection.fields.length <= 1,
+      onClick: () => handleDelete(field.id),
+      "data-testid": "field.delete"
+    }), /* @__PURE__ */ React19.createElement(IconButton4, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t("toggle expand label", {
+        ns: osTranslations2
+      }),
+      icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+      onClick: () => handleToggleField(field),
+      "data-testid": "field.toggle"
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
       role: "none",
-      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
-    }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
-      items: view.fields,
-      isItem: Schema2.is(FieldSchema),
-      getId: (field2) => field2.id,
-      readonly,
-      onMove: readonly ? void 0 : handleMove
-    }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("div", {
-      role: "heading",
-      className: grid
-    }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement("div", {
-      className: "flex items-center text-sm"
-    }, t("field path label"))), /* @__PURE__ */ React15.createElement("div", {
-      role: "list",
-      className: "flex flex-col is-full"
-    }, fields?.map((field2) => /* @__PURE__ */ React15.createElement(List2.Item, {
-      key: field2.id,
-      item: field2,
-      classNames: mx9(grid, ghostHover, "overflow-hidden", !readonly && "cursor-pointer")
-    }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
-      onClick: () => handleSelect(field2)
-    }, field2.path), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
-      "data-testid": "hide-field-button",
-      icon: "ph--eye-slash--regular",
-      // TDOO(burdon): Is this the correct test?
-      disabled: view.fields.length <= 1,
-      onClick: () => handleHide(field2.id)
-    }), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
-      disabled: view.fields.length <= 1,
-      onClick: () => handleDelete(field2.id)
-    })))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
-    }, t("hidden fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
-      items: hiddenProperties,
-      isItem: (item) => typeof item === "string",
-      getId: (property) => property
-    }, ({ items: properties }) => /* @__PURE__ */ React15.createElement("div", {
-      role: "list",
-      className: "flex flex-col is-full"
-    }, properties?.map((property) => /* @__PURE__ */ React15.createElement(List2.Item, {
-      key: property,
-      item: property,
-      classNames: mx9(grid, ghostHover, !readonly && "cursor-pointer")
-    }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
-      disabled: true
-    }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
-      icon: "ph--eye--regular",
-      onClick: () => handleShow(property),
-      "data-testid": "show-field-button"
-    }))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
-      key: field.id,
-      view,
-      projection,
-      field,
+      className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
+    }, /* @__PURE__ */ React19.createElement(FieldEditor, {
+      readonly: readonly || schemaReadonly,
       registry,
+      projection: projectionModel,
+      field,
       onSave: handleClose
-    }), !readonly && !field && /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement(IconButton4, {
-      icon: "ph--plus--regular",
-      label: t("button add property"),
-      onClick: readonly ? void 0 : handleAdd,
-      // TODO(burdon): Show field limit in ux (not tooltip).
-      disabled: view.fields.length >= VIEW_FIELD_LIMIT,
-      classNames: "flex is-full"
     })));
-  } finally {
-    _effect.f();
-  }
+  }))));
 };
+var customFields = ({ types, tags }) => ({
+  query: ({ type, readonly, label, getValue, onValueChange }) => {
+    const handleChange = useCallback15((query) => onValueChange(type, query.ast), [
+      onValueChange
+    ]);
+    return /* @__PURE__ */ React19.createElement(Input13.Root, null, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+      readonly,
+      label
+    }), /* @__PURE__ */ React19.createElement(QueryForm, {
+      initialQuery: getValue(),
+      types,
+      tags,
+      onChange: handleChange
+    }));
+  }
+});
 export {
-  BooleanInput,
+  ArrayField,
+  BooleanField,
   ControlFrame,
   ControlFrameItem,
   ControlGroup,
@@ -2374,34 +2507,37 @@ export {
   ControlPage,
   ControlSection,
   ControlSectionHeading,
-  DeprecatedFormContainer,
-  DeprecatedFormInput,
   FieldEditor,
   Form,
-  FormProvider,
-  GeoPointInput,
-  InputHeader,
-  MarkdownInput,
-  NumberInput,
-  SelectInput,
-  SelectOptionInput,
-  TextInput,
-  TupleInput,
+  FormFieldErrorBoundary,
+  FormFieldLabel,
+  FormFieldWrapper,
+  GeoPointField,
+  MarkdownField,
+  NumberField,
+  ObjectPicker,
+  RefField,
+  SelectField,
+  SelectOptionField,
+  TextAreaField,
+  TextField,
+  TupleField,
   ViewEditor,
   cellClassesForFieldType,
   controlItemClasses,
-  findArrayElementType,
   formatForDisplay,
   formatForEditing,
+  getDefaultValue,
+  getFormProperties,
   getRefProps,
+  omitId,
   parseValue,
   pathNotUniqueError,
   translations,
-  useForm,
   useFormContext,
+  useFormFieldState,
+  useFormHandler,
   useFormValues,
-  useInputProps,
-  useQueryRefOptions,
-  useRefQueryLookupHandler
+  useKeyHandler
 };
 //# sourceMappingURL=index.mjs.map