@dxos/react-ui-form 0.8.4-main.3a94e84 → 0.8.4-main.3c1ae3b

package/dist/lib/browser/index.mjs

@@ -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,96 +58,48 @@ 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
+// src/components/ControlSection/ControlSection.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 }) => {
+import { Button, Input, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { StackItem } from "@dxos/react-ui-stack";
+import { mx } from "@dxos/react-ui-theme";
+var ControlPage = ({ children, classNames, ...props }) => {
   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"
+    return /* @__PURE__ */ React.createElement(StackItem.Content, {
+      scrollable: true,
+      classNames: "[--control-spacing:var(--dx-trimMd)]"
     }, /* @__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";
-var ControlPage = ({ children, classNames, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: mx2("pli-cardSpacingInline", classNames),
+      className: mx("pli-cardSpacingInline pbe-trimLg", classNames),
       ...props
-    }, children);
+    }, children));
   } finally {
     _effect.f();
   }
 };
 var ControlSection = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ControlSectionHeading, {
       title,
       description
     }), children);
@@ -148,12 +108,12 @@ var ControlSection = ({ title, description, children }) => {
   }
 };
 var ControlSectionHeading = ({ title, description }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
       className: "pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
       className: "pli-trimMd mlb-trimMd container-max-width text-description"
     }, toLocalizedString(description, t)));
   } finally {
@@ -161,9 +121,9 @@ var ControlSectionHeading = ({ title, description }) => {
   }
 };
 var ControlGroupButton = ({ classNames, ...props }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement(Button, {
+    return /* @__PURE__ */ React.createElement(Button, {
       ...props,
       classNames: [
         "md:col-span-2",
@@ -175,41 +135,46 @@ var ControlGroupButton = ({ classNames, ...props }) => {
   }
 };
 var ControlGroup = ({ children, classNames }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", classNames)
+      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);
   } finally {
     _effect.f();
   }
 };
 var ControlFrame = ({ children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.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"
+      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);
   } finally {
     _effect.f();
   }
 };
-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 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();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: controlItemClasses
-    }, /* @__PURE__ */ React2.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React2.createElement("h3", {
+    }, /* @__PURE__ */ React.createElement("h3", {
       className: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
       className: controlItemDescriptionClasses
     }, toLocalizedString(description, t))), children);
   } finally {
@@ -217,16 +182,16 @@ var ControlItem = ({ title, description, children }) => {
   }
 };
 var ControlItemInput = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement(Input2.Root, null, /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
       className: controlItemClasses
-    }, /* @__PURE__ */ React2.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React2.createElement(Input2.Label, {
+    }, /* @__PURE__ */ React.createElement(Input.Label, {
       classNames: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Description, {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Description, {
       classNames: controlItemDescriptionClasses
     }, toLocalizedString(description, t)))), children));
   } finally {
@@ -234,15 +199,15 @@ var ControlItemInput = ({ title, description, children }) => {
   }
 };
 var ControlFrameItem = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       role: "group",
       className: "min-is-0"
-    }, /* @__PURE__ */ React2.createElement("h3", {
+    }, /* @__PURE__ */ React.createElement("h3", {
       className: "text-lg mbe-2"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
       className: "mlb-trimSm md:mbe-0 text-description"
     }, toLocalizedString(description, t)), children);
   } finally {
@@ -251,555 +216,362 @@ var ControlFrameItem = ({ title, description, 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 { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
+import React18, { useCallback as useCallback16, useEffect as useEffect6, useMemo as useMemo8, useState as useState6 } from "react";
+import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
 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 { useAsyncEffect as useAsyncEffect2, 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();
+      case TypeEnum.Number: {
+        const cleaned = typeof value3 === "string" ? value3.replace(/[^0-9.-]+/g, "") : value3;
+        const num = Number(cleaned);
+        return Number.isNaN(num) ? null : num;
+      }
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value3);
+      default: {
+        return value3;
+      }
+    }
+  };
+  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
+            });
+          }
+        }
+      }
+      return [
+        0,
+        0
+      ];
+    }
+    default: {
+      return value3;
+    }
+  }
+};
+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/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, []);
+// 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);
       }
-    }, [
-      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)];
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
+  }
+  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";
       }
-      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;
+    }
+    case Format2.TypeFormat.Time: {
+      try {
+        return formatDate(new Date(value3), "HH:mm:ss");
+      } catch (error) {
+        return "Invalid Time";
       }
-      const newOptions = [
-        ...options
-      ];
-      const [removed] = newOptions.splice(from, 1);
-      newOptions.splice(to, 0, removed);
-      onValueChange(type, newOptions);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleClick = useCallback2((id) => {
-      setSelectedId((current) => current === id ? null : id);
-    }, []);
-    const handleTitleChange = useCallback2((id) => (e) => {
-      const newOptions = options?.map((o) => o.id === id ? {
-        ...o,
-        title: e.target.value
-      } : o);
-      onValueChange(type, newOptions ?? []);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleKeyDown = useCallback2((e) => {
-      if (e.key === "Enter") {
-        setSelectedId(null);
+    }
+    case Format2.TypeFormat.DateTime: {
+      try {
+        return formatDate(new Date(value3), "yyyy-MM-dd HH:mm:ss");
+      } catch (error) {
+        return "Invalid DateTime";
       }
-    }, []);
-    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);
+    }
+    case Format2.TypeFormat.GeoPoint: {
+      if (value3 === null || value3 === void 0) {
+        return "";
       }
-    }, [
-      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: [
-        "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();
-  }
-};
-
-// 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();
-  }
-};
-
-// 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();
+      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 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();
+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 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:
+    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 "";
+      }
+      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);
+    }
   }
 };
-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();
-  }
+
+// 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)));
 };
-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`;
+
+// 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
+        };
       }
-    }, []);
-    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 (Ref.isRefType(ast)) {
+    return {
+      ast,
+      isArray: false
+    };
   }
+  return void 0;
 };
 
-// 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/fields/ArrayField.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
+import * as Option3 from "effect/Option";
+import * as SchemaAST2 from "effect/SchemaAST";
+import React6, { useCallback as useCallback5 } from "react";
+import { findNode as findNode2, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
+import { invariant } from "@dxos/invariant";
+import { IconButton as IconButton2, useTranslation as useTranslation4 } from "@dxos/react-ui";
 
-// 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/components/Form/Form.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
+import { createContext } from "@radix-ui/react-context";
+import * as Schema2 from "effect/Schema";
+import React5, { useMemo as useMemo4, useRef } from "react";
+import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
+import { IconButton, ScrollArea, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
-// 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";
+// src/hooks/useFormHandler.ts
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { getValue as getValue$, setValue as setValue$ } from "@dxos/echo/internal";
 import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
-import { invariant } from "@dxos/invariant";
 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/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)",
-      ""
-    ]
+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, 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) => {
+  const validate = useCallback((values2) => {
+    if (!schema) {
+      return false;
+    }
     let errors2 = validateSchema(schema, values2) ?? [];
+    log("validate", {
+      values: values2,
+      errors: errors2
+    }, {
+      F: __dxlog_file,
+      L: 149,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -811,36 +583,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);
@@ -850,11 +624,17 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     validate,
     onSave,
-    changed
+    changed,
+    isValid
   ]);
-  const getStatus = useCallback4((path) => {
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [
+    onCancel
+  ]);
+  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 {
@@ -863,111 +643,121 @@ 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: 248,
+      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: 257,
         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 = {
+      ...changed,
       [jsonPath]: true
-    }));
-    onValuesChanged?.(newValues);
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, {
-        changed
-      });
-    }
+    };
+    setChanged({
+      ...changed,
+      [jsonPath]: true
+    });
+    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);
@@ -978,645 +768,1052 @@ 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
+  ]);
+  useEffect2(() => {
+    if (!formElement) {
+      return;
+    }
+    return addEventListener(formElement, "keydown", handleKeyDown);
+  }, [
+    formElement,
+    handleKeyDown
   ]);
 };
 
 // src/hooks/useQueryRefOptions.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+import { useCallback as useCallback3, useState as useState2 } from "react";
 import { log as log2 } from "@dxos/log";
+import { useAsyncEffect } from "@dxos/react-ui";
 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) {
+var useQueryRefOptions = ({ typename, onQueryRefOptions }) => {
+  const [options, setOptions] = useState2([]);
+  const [loading, setLoading] = useState2(false);
+  const [state, setState] = useState2({});
+  const update = useCallback3(() => setState({}), []);
+  useAsyncEffect(async () => {
+    if (!typename || !onQueryRefOptions) {
       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);
+    setLoading(true);
+    try {
+      const options2 = await onQueryRefOptions({
+        typename
+      });
+      log2("options", {
+        options: options2.length
+      }, {
+        F: __dxlog_file2,
+        L: 50,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setOptions(options2.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: 62,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setOptions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [
+    typename,
+    onQueryRefOptions,
+    state
+  ]);
+  return {
+    options,
+    update,
+    loading
+  };
+};
+
+// src/hooks/useRefQueryOptions.ts
+import { useCallback as useCallback4 } from "react";
+import { Obj } from "@dxos/echo";
+import { Filter } from "@dxos/react-client/echo";
+import { isNonNullable } from "@dxos/util";
+var useRefQueryOptions = ({ space }) => {
+  return useCallback4(async ({ typename }) => {
+    if (!space) {
+      return [];
+    }
+    const query = space.db.query(Filter.typename(typename));
+    const objects = await query.run();
+    return objects.map((object) => {
+      const dxn = Obj.getDXN(object);
+      if (!dxn) {
+        return void 0;
       }
-    };
-    void fetchOptions();
+      return {
+        dxn,
+        label: Obj.getLabel(object) ?? object?.id ?? ""
+      };
+    }).filter(isNonNullable);
   }, [
-    refTypeInfo,
-    onQueryRefOptions
+    space
   ]);
-  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();
+// src/components/Form/FormFieldComponent.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
+import React2, { Component } from "react";
+import { Icon, Input as Input2, Tooltip } from "@dxos/react-ui";
+import { labelSpacing } from "@dxos/react-ui-stack";
+import { errorText, mx as mx2 } from "@dxos/react-ui-theme";
+var FormFieldLabel = ({ label, error, readonly, asChild }) => {
+  var _effect = _useSignals2();
   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);
+    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
+    })));
   } finally {
     _effect.f();
   }
 };
-
-// src/components/Form/FormActions.tsx
-var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
-  var _effect = _useSignals9();
+FormFieldLabel.displayName = "Form.FieldLabel";
+var FormFieldWrapper = (props) => {
+  var _effect = _useSignals2();
   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
-    }));
+    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)));
   } finally {
     _effect.f();
   }
 };
-
-// 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);
-      }
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  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);
+// src/components/Form/FormFieldSet.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
+import React4, { forwardRef, useMemo as useMemo3 } from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
+import { isTruthy } from "@dxos/util";
+
+// src/components/Form/FormField.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+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) => {
+  var _effect = _useSignals3();
+  try {
+    const { type, name, path, projection, fieldMap, fieldProvider, readonly, layout, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onCreate, onQueryRefOptions } = 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
+    };
+    const jsonPath = createJsonPath2(path ?? []);
+    const CustomField = fieldMap?.[jsonPath];
+    if (CustomField) {
+      return /* @__PURE__ */ React3.createElement(CustomField, fieldProps);
     }
-    case FormatEnum2.Percent: {
-      return `${value * 100}%`;
+    const component = fieldProvider?.({
+      schema: Schema.make(type),
+      prop: name,
+      fieldProps
+    });
+    if (component) {
+      return component;
     }
-    case FormatEnum2.Currency: {
-      return value.toLocaleString(locale, {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
+    if (isArrayType2(type)) {
+      return /* @__PURE__ */ React3.createElement(ArrayField, {
+        fieldProps: fieldState,
+        label,
+        ...props
       });
     }
-    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";
-      }
-    }
-    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);
-    }
-    default: {
-      if (value === null || value === "undefined") {
-        return "";
-      }
-      return String(value);
-    }
-  }
-};
-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);
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
-  }
-  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];
+    const Field = getFormField(fieldProps);
+    if (Field) {
+      return /* @__PURE__ */ React3.createElement(Field, fieldProps);
     }
-    case FormatEnum2.Time: {
-      const date = new Date(value);
-      return date.toISOString().split("T")[1].split(".")[0];
+    const options = getOptions(type);
+    if (options) {
+      return /* @__PURE__ */ React3.createElement(SelectField, {
+        ...fieldProps,
+        options: options.map((option) => ({
+          value: option,
+          label: option.toString()
+        }))
+      });
     }
-    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);
+    const refProps = getRefProps(type);
+    if (refProps) {
+      return /* @__PURE__ */ React3.createElement(RefField, {
+        ...fieldProps,
+        ...refProps,
+        createSchema,
+        createOptionLabel,
+        createOptionIcon,
+        createInitialValuePath,
+        onCreate,
+        onQueryRefOptions
+      });
     }
-    default: {
-      return String(value);
+    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,
+          onCreate,
+          onQueryRefOptions
+        });
+      }
     }
+    return null;
+  } finally {
+    _effect.f();
+  }
+};
+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/util/refs.ts
-import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo-schema";
-import { findAnnotation } from "@dxos/effect";
+// src/components/Form/FormFieldSet.tsx
+var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
+  var _effect = _useSignals4();
+  try {
+    const values = useFormValues(FormFieldSet.displayName, path);
+    const properties = useMemo3(() => {
+      if (!schema) {
+        return [];
+      }
+      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);
+          }
+        }
+        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;
+      }
+      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));
+  } finally {
+    _effect.f();
+  }
+});
+FormFieldSet.displayName = "Form.Fields";
 
-// 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/Form.tsx
+var omitId = (schema) => schema.pipe(Schema2.omit("id"));
+var [FormContextProvider, useFormContext] = createContext("Form");
+var useFormValues = (componentName, path = []) => {
+  const jsonPath = createJsonPath3(path);
+  const { form: { values } } = useFormContext(componentName);
+  return getValue$2(values, jsonPath);
 };
-
-// src/util/refs.ts
-var getRefProps = (property) => {
-  const { ast, format, array } = property;
-  if (format === FormatEnum3.Ref) {
-    return {
-      ast,
-      isArray: false
-    };
+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 }) => {
+  var _effect = _useSignals5();
+  try {
+    const form = useFormHandler({
+      schema,
+      values,
+      onSave,
+      onCancel,
+      ...props
+    });
+    return /* @__PURE__ */ React5.createElement(FormContextProvider, {
+      form,
+      ...props
+    }, children);
+  } finally {
+    _effect.f();
   }
-  if (array) {
-    const elementType = findArrayElementType(ast);
-    if (elementType) {
-      const annotation = findAnnotation(elementType, ReferenceAnnotationId);
-      if (annotation) {
-        return {
-          ast: elementType,
-          isArray: true
-        };
-      }
+};
+FormRoot.displayName = "Form.Root";
+var FormViewport = ({ classNames, children }) => {
+  var _effect = _useSignals5();
+  try {
+    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)));
+  } finally {
+    _effect.f();
+  }
+};
+FormViewport.displayName = "Form.Viewport";
+var FormContent = ({ classNames, children }) => {
+  var _effect = _useSignals5();
+  try {
+    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", classNames),
+      "data-testid": testId
+    }, children);
+  } finally {
+    _effect.f();
+  }
+};
+FormContent.displayName = "Form.Content";
+var FormFieldSet2 = ({ classNames }) => {
+  var _effect = _useSignals5();
+  try {
+    const { form, ...props } = useFormContext(FormFieldSet2.displayName);
+    return /* @__PURE__ */ React5.createElement(FormFieldSet, {
+      classNames,
+      schema: form.schema,
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
+};
+FormFieldSet2.displayName = "Form.FieldSet";
+var FormActions = ({ classNames }) => {
+  var _effect = _useSignals5();
+  try {
+    const { t } = useTranslation3(translationKey);
+    const { form: { isValid, 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: !isValid,
+      icon: "ph--check--regular",
+      iconEnd: true,
+      label: t("save button label"),
+      onClick: onSave,
+      "data-testid": "save-button"
+    }));
+  } finally {
+    _effect.f();
   }
-  return void 0;
+};
+FormActions.displayName = "Form.Actions";
+var FormSubmit = ({ classNames, label, icon }) => {
+  var _effect = _useSignals5();
+  try {
+    const { t } = useTranslation3(translationKey);
+    const { form: { isValid, 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: !isValid,
+      icon: icon ?? "ph--check--regular",
+      label: label ?? t("save button label"),
+      onClick: onSave,
+      "data-testid": "save-button"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+FormSubmit.displayName = "Form.Submit";
+var Form = {
+  Root: FormRoot,
+  Viewport: FormViewport,
+  Content: FormContent,
+  FieldSet: FormFieldSet2,
+  Actions: FormActions,
+  Submit: FormSubmit,
+  Label: FormFieldLabel
 };
 
-// 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();
+// src/components/Form/fields/ArrayField.tsx
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/Form/fields/ArrayField.tsx";
+var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
+  var _effect = _useSignals6();
   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.`, {
+    const { t } = useTranslation4(translationKey);
+    const elementType = getArrayElementType2(type);
+    const { onValueChange } = inputProps;
+    const values = useFormValues(ArrayField.displayName, path) ?? [];
+    invariant(Array.isArray(values), `Expected array at: ${path?.join(".")}`, {
       F: __dxlog_file3,
-      L: 36,
+      L: 40,
       S: void 0,
       A: [
         "Array.isArray(values)",
-        "`Values at path ${path?.join('.')} must be an array.`"
+        "`Expected array at: ${path?.join('.')}`"
       ]
     });
-    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);
+      const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
+      const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST2.isTypeLiteral);
       if (!typeLiteral) {
         return {};
       }
-      return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
-        prop.name,
-        prop.defaultValue
-      ]));
+      return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
+        const defaultValue = SchemaAST2.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+        return [
+          prop.name,
+          defaultValue
+        ];
+      }));
     };
-    const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-    const handleAdd = useCallback7(() => {
-      inputProps.onValueChange(type, [
+    const handleAdd = useCallback5(() => {
+      const defaultValue = isNestedType2(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+      onValueChange(type, [
         ...values,
-        getDefaultValue()
+        defaultValue
       ]);
     }, [
-      type,
-      elementType,
-      inputProps,
-      values
+      onValueChange,
+      type,
+      elementType,
+      values
+    ]);
+    const handleDelete = useCallback5((idx) => {
+      onValueChange(type, values.filter((_, i) => i !== idx));
+    }, [
+      onValueChange,
+      type,
+      values
+    ]);
+    if (!elementType || (readonly || layout === "static") && values.length < 1) {
+      return null;
+    }
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, (layout !== "static" || 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
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+ArrayField.displayName = "Form.ArrayField";
+var getDefaultValue = (ast) => {
+  switch (ast?._tag) {
+    case "StringKeyword": {
+      return "";
+    }
+    case "NumberKeyword": {
+      return 0;
+    }
+    case "BooleanKeyword": {
+      return false;
+    }
+    default: {
+      if (ast && isNestedType2(ast)) {
+        return {};
+      } else {
+        throw new Error(`Unsupported type: ${ast?._tag}`);
+      }
+    }
+  }
+};
+
+// src/components/Form/fields/BooleanField.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7, { useCallback as useCallback6 } from "react";
+import { Input as Input3 } from "@dxos/react-ui";
+var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
+  var _effect = _useSignals7();
+  try {
+    const handleChange = useCallback6((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
+    }));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Form/fields/GeoPointField.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
+import React8, { useCallback as useCallback7, useEffect as useEffect3, useMemo as useMemo5, useState as useState3 } 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 }) => {
+  var _effect = _useSignals8();
+  try {
+    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] = useState3(value3.longitude?.toString());
+    const [latitudeText, setLatitudeText] = useState3(value3.latitude?.toString());
+    useEffect3(() => {
+      const location = GeoLocation3.fromGeoPoint(geoPoint);
+      setLongitudeText(location.longitude?.toString());
+      setLatitudeText(location.latitude?.toString());
+    }, [
+      geoPoint
+    ]);
+    const handleChange = useCallback7((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 /* @__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
+    })))));
+  } finally {
+    _effect.f();
+  }
+};
+var LatLng = ({ latitude = 0, longitude = 0 }) => {
+  var _effect = _useSignals8();
+  try {
+    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)));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Form/fields/MarkdownField.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import React9, { useCallback as useCallback8, useEffect as useEffect4, useRef as useRef2 } from "react";
+import { Input as Input5 } from "@dxos/react-ui";
+var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, getValue, onValueChange, onBlur }) => {
+  var _effect = _useSignals9();
+  try {
+    const { status, error } = getStatus();
+    const textareaRef = useRef2(null);
+    const adjustHeight = useCallback8(() => {
+      const textarea = textareaRef.current;
+      if (textarea) {
+        textarea.style.blockSize = "auto";
+        textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
+      }
+    }, []);
+    useEffect4(() => {
+      adjustHeight();
+    }, [
+      adjustHeight
     ]);
-    const handleRemove = useCallback7((index) => {
-      const newValues = values.filter((_, i) => i !== index);
-      inputProps.onValueChange(type, newValues);
+    useEffect4(() => {
+      adjustHeight();
     }, [
+      getValue(),
+      adjustHeight
+    ]);
+    const handleChange = useCallback8((event) => onValueChange(type, event.target.value), [
       type,
-      inputProps,
-      values
+      onValueChange
     ]);
-    if (!elementType) {
+    const value3 = getValue();
+    if ((readonly || layout === "static") && !value3) {
       return null;
     }
-    return readonly && values.length < 1 ? null : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(InputHeader, {
-      readonly: true,
+    return /* @__PURE__ */ React9.createElement(Input5.Root, {
+      validationValence: status
+    }, layout !== "inline" && /* @__PURE__ */ React9.createElement(FormFieldLabel, {
+      error,
+      readonly,
       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-cardSpacingBlock flex",
-      icon: "ph--plus--regular",
-      label: t("add field"),
-      onClick: handleAdd
+    }), 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));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Form/fields/NumberField.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import React10, { useCallback as useCallback9 } 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 }) => {
+  var _effect = _useSignals10();
+  try {
+    const handleChange = useCallback9((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
     }));
   } finally {
     _effect.f();
   }
 };
 
-// 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/RefField.tsx
+import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
+import "@dxos/lit-ui/dx-tag-picker.pcss";
+import React12, { useCallback as useCallback11, useMemo as useMemo7 } from "react";
+import { Ref as Ref2 } from "@dxos/echo";
+import { ReferenceAnnotationId } from "@dxos/echo/internal";
+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 { DxAnchor } from "@dxos/lit-ui/react";
+import { Button as Button2, Icon as Icon3, Input as Input7, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { descriptionText, mx as mx5 } 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 }) => {
+
+// src/components/ObjectPicker/ObjectPicker.tsx
+import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+import React11, { forwardRef as forwardRef2, useCallback as useCallback10, useMemo as useMemo6, useState as useState4 } from "react";
+import { Icon as Icon2, Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Combobox } from "@dxos/react-ui-searchlist";
+var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
   var _effect = _useSignals11();
   try {
+    const { t } = useTranslation6(translationKey);
+    const [showForm, setShowForm] = useState4(false);
+    const [searchString, setSearchString] = useState4("");
+    const handleFormSave = useCallback10((values) => {
+      onCreate?.(values);
+      setShowForm(false);
+      setSearchString("");
+    }, [
+      onCreate
+    ]);
+    const handleFormCancel = useCallback10(() => {
+      setShowForm(false);
+      setSearchString("");
+    }, []);
+    const handleClick = useCallback10((event) => {
+      if (createSchema && event.target.closest('[data-value="__create__"]')) {
+        event.stopPropagation();
+        event.preventDefault();
+        setShowForm(true);
+      }
+    }, [
+      createSchema
+    ]);
+    const handleKeyDown = useCallback10((event) => {
+      if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
+        event.stopPropagation();
+        event.preventDefault();
+        setShowForm(true);
+      }
+    }, [
+      createSchema
+    ]);
+    const labelById = useMemo6(() => options.reduce((acc, option) => {
+      acc[option.id.toLowerCase()] = option.label.toLowerCase();
+      return acc;
+    }, {}), [
+      options
+    ]);
+    return /* @__PURE__ */ React11.createElement(Combobox.Content, {
+      ...props,
+      ref,
+      filter: (value3, search) => value3 === "__create__" || labelById[value3]?.includes(search.toLowerCase()) ? 1 : 0,
+      onClickCapture: handleClick,
+      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]: searchString
+      } : {},
+      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"),
+      value: searchString,
+      onValueChange: setSearchString,
+      autoFocus: true
+    }), /* @__PURE__ */ React11.createElement(Combobox.List, null, options.map((option) => /* @__PURE__ */ React11.createElement(Combobox.Item, {
+      key: option.id,
+      value: option.id,
+      onSelect: () => onSelect(option.id),
+      classNames: "flex items-center gap-2"
+    }, /* @__PURE__ */ React11.createElement("span", {
+      className: "grow"
+    }, option.label), selectedIds?.includes(option.id) && /* @__PURE__ */ React11.createElement(Icon2, {
+      icon: "ph--check--regular"
+    }))), searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React11.createElement(Combobox.Item, {
+      value: "__create__",
+      classNames: "flex items-center gap-2"
+    }, /* @__PURE__ */ React11.createElement(Icon2, {
+      icon: createOptionIcon
+    }), t(createOptionLabel[0], {
+      ns: createOptionLabel[1].ns,
+      text: searchString
+    })))), /* @__PURE__ */ React11.createElement(Combobox.Arrow, null));
+  } finally {
+    _effect.f();
+  }
+});
+ObjectPickerContent.displayName = "ObjectPickerContent";
+var ObjectPicker = {
+  Root: Combobox.Root,
+  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 RefField = (props) => {
+  var _effect = _useSignals12();
+  try {
+    const { type, readonly, label, placeholder, layout, getStatus, getValue, array, createOptionLabel, createOptionIcon, createSchema, createInitialValuePath, onCreate, onQueryRefOptions, onValueChange } = props;
     const { t } = useTranslation7(translationKey);
-    const refTypeInfo = useMemo4(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
-      ast
+    const { status, error } = getStatus();
+    const typename = useMemo7(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
+      type
     ]);
-    const { options: availableOptions, loading: _loading } = useQueryRefOptions({
-      refTypeInfo,
+    const { options, update: updateOptions } = useQueryRefOptions({
+      typename,
       onQueryRefOptions
     });
-    if (refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-      return /* @__PURE__ */ React11.createElement(RefFieldFallback, {
-        type,
-        label,
-        placeholder,
-        disabled,
-        inputOnly,
-        getValue: getValue3,
-        onBlur,
-        onValueChange,
-        ...restInputProps
-      });
-    }
-    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);
+    const handleGetValue = useCallback11(() => {
+      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((option2) => option2.id === dxnString);
           if (matchingOption) {
             return matchingOption;
           }
@@ -1634,332 +1831,450 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
       }
       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
+      options,
+      array,
+      getValue
     ]);
-    const handleUpdate = useCallback8((ids) => {
+    const handleUpdate = useCallback11((ids) => {
       if (ids.length === 0) {
-        onValueChange("object", void 0);
+        onValueChange(type, void 0);
         return;
       }
       const refs = ids.map((id) => {
-        const item = availableOptions.find((option) => option.id === id);
+        const item = options.find((option) => option.id === id);
         if (item) {
           const dxn = DXN.parse(item.id);
-          return Ref.fromDXN(dxn);
+          return Ref2.fromDXN(dxn);
         }
         return null;
       }).filter(isNonNullable2);
       if (array) {
-        onValueChange("object", refs);
+        onValueChange(type, refs);
       } else {
-        onValueChange("object", refs[0]);
+        onValueChange(type, refs[0]);
       }
     }, [
-      availableOptions,
+      options,
+      type,
       array,
       onValueChange
     ]);
-    const tagPickerMode = useMemo4(() => array ? "multi-select" : "single-select", [
-      array
+    const handleCreate = useCallback11((values) => {
+      onCreate?.(values);
+      updateOptions();
+    }, [
+      onCreate,
+      updateOptions
+    ]);
+    const items = handleGetValue();
+    const selectedIds = useMemo7(() => items.map((i) => i.id), [
+      items
+    ]);
+    const toggleSelect = useCallback11((id) => {
+      if (array) {
+        const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [
+          ...selectedIds,
+          id
+        ];
+        handleUpdate(nextIds);
+      } else {
+        if (selectedIds[0] === id) {
+          handleUpdate([]);
+        } else {
+          handleUpdate([
+            id
+          ]);
+        }
+      }
+    }, [
+      array,
+      selectedIds,
+      handleUpdate
     ]);
-    if (!refTypeInfo) {
+    if (!typename || (readonly || layout === "static") && items.length < 1) {
       return null;
     }
-    const { status, error } = restInputProps.getStatus();
-    const items = handleGetValue();
-    return disabled && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input8.Root, {
+    return /* @__PURE__ */ React12.createElement(Input7.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
+    }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
       error,
+      readonly,
       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, {
+    }), /* @__PURE__ */ React12.createElement("div", null, readonly ? items.length < 1 ? /* @__PURE__ */ React12.createElement("p", {
+      className: mx5(descriptionText, "mbe-2")
+    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React12.createElement(DxAnchor, {
       key: item.id,
       refid: item.id,
-      rootclassname: "mie-1",
-      style: {
-        marginInlineEnd: ".25rem"
+      rootclassname: "mie-1"
+    }, item.label)) : /* @__PURE__ */ React12.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React12.createElement(ObjectPicker.Trigger, {
+      asChild: true,
+      classNames: "p-0"
+    }, items?.length === 1 ? /* @__PURE__ */ React12.createElement("div", {
+      className: "flex gap-2 is-full"
+    }, items?.map((item) => /* @__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", {
+      count: array ? 99 : 1
+    }))), /* @__PURE__ */ React12.createElement(Icon3, {
+      size: 3,
+      icon: "ph--caret-down--bold"
+    }))), /* @__PURE__ */ React12.createElement(ObjectPicker.Content, {
+      classNames: "popover-card-width",
+      options,
+      selectedIds,
+      createSchema,
+      createOptionLabel,
+      createOptionIcon,
+      createInitialValuePath,
+      onCreate: handleCreate,
+      onSelect: toggleSelect
+    }))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Form/fields/SelectField.tsx
+import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
+import React13, { useCallback as useCallback12 } from "react";
+import { Input as Input8, Select } from "@dxos/react-ui";
+var SelectField = ({ type, readonly, label, layout, placeholder, options, getStatus, getValue, onValueChange }) => {
+  var _effect = _useSignals13();
+  try {
+    const { status, error } = getStatus();
+    const value3 = getValue();
+    const handleValueChange = useCallback12((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));
+  } finally {
+    _effect.f();
+  }
+};
+
+// src/components/Form/fields/SelectOptionField.tsx
+import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
+import React14, { useCallback as useCallback13, useEffect as useEffect5, useRef as useRef3, useState as useState5 } 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, subtleHover } from "@dxos/react-ui-theme";
+var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
+  var _effect = _useSignals14();
+  try {
+    const { t } = useTranslation8(translationKey);
+    const { status, error } = getStatus();
+    const [selected, setSelectedId] = useState5(null);
+    const [isNewOption, setIsNewOption] = useState5(false);
+    const inputRef = useRef3(null);
+    const options = getValue();
+    useEffect5(() => {
+      if (options === void 0) {
+        onValueChange(type, []);
+      }
+    }, [
+      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 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 = useCallback13(() => {
+      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 = useCallback13((id) => {
+      const newOptions = options?.filter((option) => option.id !== id) ?? [];
+      onValueChange(type, newOptions);
+      setSelectedId(null);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    const handleMove = useCallback13((from, to) => {
+      if (!options) {
+        return;
+      }
+      const newOptions = [
+        ...options
+      ];
+      const [removed] = newOptions.splice(from, 1);
+      newOptions.splice(to, 0, removed);
+      onValueChange(type, newOptions);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    const handleClick = useCallback13((id) => {
+      setSelectedId((current) => current === id ? null : id);
+    }, []);
+    const handleTitleChange = useCallback13((id) => (e) => {
+      const newOptions = options?.map((o) => o.id === id ? {
+        ...o,
+        title: e.target.value
+      } : o);
+      onValueChange(type, newOptions ?? []);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    const handleKeyDown = useCallback13((ev) => {
+      if (ev.key === "Enter") {
+        setSelectedId(null);
+      }
+    }, []);
+    const handleColorChange = useCallback13((id) => (hue) => {
+      const newOptions = options?.map((o) => o.id === id ? {
+        ...o,
+        color: hue
+      } : o);
+      onValueChange(type, newOptions ?? []);
+    }, [
+      options,
+      type,
+      onValueChange
+    ]);
+    useEffect5(() => {
+      if (selected && isNewOption && inputRef.current) {
+        inputRef.current.focus();
+        setIsNewOption(false);
       }
-    }, 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));
+    }, [
+      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: "os"
+      }),
+      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"
+    })))));
   } finally {
     _effect.f();
   }
 };
-var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
+
+// src/components/Form/fields/TextField.tsx
+import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
+import React15, { useCallback as useCallback14 } from "react";
+import { Input as Input10 } from "@dxos/react-ui";
+var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  var _effect = _useSignals15();
   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();
-      }
-      return void 0;
-    };
-    return /* @__PURE__ */ React11.createElement(TextInput, {
+    const handleChange = useCallback14((event) => onValueChange(type, event.target.value), [
       type,
-      label,
-      disabled,
+      onValueChange
+    ]);
+    return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
+      readonly,
+      ...props
+    }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextInput, {
+      noAutoFill: true,
+      disabled: !!readonly,
       placeholder,
-      inputOnly,
-      getValue: handleGetValue,
-      onValueChange: handleOnValueChange,
-      ...restInputProps
-    });
+      value: value3,
+      onChange: handleChange,
+      onBlur
+    }));
   } finally {
     _effect.f();
   }
 };
 
-// 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/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
-  var _effect = _useSignals12();
+// src/components/Form/fields/TextAreaField.tsx
+import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
+import React16, { useCallback as useCallback15 } from "react";
+import { Input as Input11 } from "@dxos/react-ui";
+var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  var _effect = _useSignals16();
   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 handleChange = useCallback15((event) => onValueChange(type, event.target.value), [
+      type,
+      onValueChange
     ]);
-    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
-      });
-    }
-    if (array) {
-      return /* @__PURE__ */ React12.createElement(ArrayField, {
-        property,
-        path,
-        inputProps,
-        readonly,
-        Custom
-      });
-    }
-    const InputComponent = getInputComponent(type, format);
-    if (InputComponent) {
-      return /* @__PURE__ */ React12.createElement(InputComponent, {
-        type,
-        format,
-        label,
-        inputOnly: inline,
-        placeholder,
-        disabled: readonly,
-        ...inputProps
-      });
-    }
-    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
-      });
-    }
-    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
-        }));
-      }
-    }
-    return null;
+    return /* @__PURE__ */ React16.createElement(FormFieldWrapper, {
+      readonly,
+      ...props
+    }, ({ value: value3 = "" }) => /* @__PURE__ */ React16.createElement(Input11.TextArea, {
+      rows: 3,
+      disabled: !!readonly,
+      placeholder,
+      value: value3,
+      onChange: handleChange,
+      onBlur
+    }));
   } finally {
     _effect.f();
   }
 };
-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();
+// src/components/Form/fields/TupleField.tsx
+import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
+import React17 from "react";
+import { Input as Input12 } from "@dxos/react-ui";
+import { mx as mx6 } from "@dxos/react-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 }) => {
+  var _effect = _useSignals17();
   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, {
+    const { status, error } = getStatus();
+    const values = getValue() ?? {};
+    return /* @__PURE__ */ React17.createElement(Input12.Root, {
+      validationValence: status
+    }, /* @__PURE__ */ React17.createElement(FormFieldLabel, {
+      error,
       readonly,
-      onCancel,
-      outerSpacing
-    })));
+      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
+    }))));
   } finally {
     _effect.f();
   }
@@ -1967,45 +2282,67 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
 
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }) => {
-  var _effect = _useSignals14();
+var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel }) => {
+  var _effect = _useSignals18();
   try {
-    const { t } = useTranslation8(translationKey);
-    const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
-    useEffect8(() => setProps(projection.getFieldProjection(field.id).props), [
+    const { t } = useTranslation9(translationKey);
+    const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
+    useEffect6(() => setProps(projection.getFieldProjection(field.id).props), [
       field,
       projection
     ]);
-    const [schemas, setSchemas] = useState5([]);
-    useEffect8(() => {
+    const [schemas, setSchemas] = useState6([]);
+    useAsyncEffect2(async () => {
       if (!registry) {
         return;
       }
       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?.();
-      };
+      const schemas2 = await registry.query().run();
+      setSchemas(schemas2);
+      return () => subscription?.();
     }, [
       registry
     ]);
-    const [referenceSchema, setReferenceSchema] = useState5();
-    useEffect8(() => {
+    const [referenceSchema, setReferenceSchema] = useState6();
+    useEffect6(() => {
       setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
     }, [
       schemas,
       props?.referenceSchema
     ]);
-    const [{ fieldSchema }, setFieldSchema] = useState5({
+    const [{ fieldSchema }, setFieldSchema] = useState6({
       fieldSchema: getFormatSchema(props?.format)
     });
-    const handleValuesChanged = useCallback9((_props) => {
+    const fieldMap = useMemo8(() => ({
+      ["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 = useCallback16((props2) => props2.filter((prop) => prop.name !== "type"), []);
+    const handleValuesChanged = useCallback16((_props) => {
       setFieldSchema((prev) => {
         const fieldSchema2 = getFormatSchema(_props.format);
         if (prev.fieldSchema === fieldSchema2) {
@@ -2026,10 +2363,12 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
       });
       setProps((props2) => {
         const type = formatToType[_props.format];
+        const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
         if (props2.type !== type) {
           return {
             ...props2,
             ..._props,
+            ...additionalProps,
             type
           };
         }
@@ -2040,7 +2379,7 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
       props.format,
       props.referenceSchema
     ]);
-    const handleValidate = useCallback9(({ property }) => {
+    const handleValidate = useCallback16(({ property }) => {
       if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
         return [
           {
@@ -2053,7 +2392,7 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
       projection.fields,
       field
     ]);
-    const handleSave = useCallback9((props2) => {
+    const handleSave = useCallback16((props2) => {
       projection.setFieldProjection({
         field,
         props: props2
@@ -2064,56 +2403,31 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
       field,
       onSave
     ]);
-    const handleCancel = useCallback9(() => {
-      requestAnimationFrame(() => onCancel?.());
+    const handleCancel = useCallback16(() => {
       onSave();
+      requestAnimationFrame(() => onCancel?.());
     }, [
       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: 173,
+        L: 166,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return null;
     }
-    return /* @__PURE__ */ React14.createElement(Form, {
+    return /* @__PURE__ */ React18.createElement(Form.Root, {
       key: field.id,
+      fieldMap,
       autoFocus: true,
-      values: props,
+      readonly,
       schema: fieldSchema,
-      filter: propIsNotType,
+      values: props,
+      exclude: propIsNotType,
       sort: [
         "property",
         "format"
@@ -2121,123 +2435,214 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
       onValuesChanged: handleValuesChanged,
       onValidate: handleValidate,
       onSave: handleSave,
-      onCancel: handleCancel,
-      Custom: custom,
-      outerSpacing
-    });
+      onCancel: handleCancel
+    }, /* @__PURE__ */ React18.createElement(Form.Content, null, /* @__PURE__ */ React18.createElement(Form.FieldSet, null), /* @__PURE__ */ React18.createElement(Form.Actions, null)));
   } finally {
     _effect.f();
   }
 };
 
 // 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 { useSignals as _useSignals19 } from "@preact-signals/safe-react/tracking";
+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 useCallback17, useImperativeHandle, useMemo as useMemo9, useState as useState7 } from "react";
+import { Filter as Filter2, Format as Format5, Query, QueryAST } from "@dxos/echo";
+import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
+import "@dxos/echo-db";
+import { invariant as invariant2 } 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, VIEW_FIELD_LIMIT, ProjectionModel } from "@dxos/schema";
+import { mx as mx7, subtleHover as subtleHover2 } from "@dxos/react-ui-theme";
+import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, getTypenameFromQuery } 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({
-  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();
+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) => {
+  var _effect = _useSignals19();
   try {
-    const { t } = useTranslation9(translationKey);
-    const projection = useMemo8(() => {
+    const schemaReadonly = !isMutable(schema);
+    const { t } = useTranslation10(translationKey);
+    const projectionModel = useMemo9(() => {
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
       return new ProjectionModel(jsonSchema, view.projection);
     }, [
       schema,
-      view.projection
+      JSON.stringify(view.projection)
     ]);
-    const [field, setField] = useState6();
-    const readonly = _readonly || !isMutable(schema);
-    const viewValues = useMemo8(() => {
-      return {
-        // 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.query.typename
+    useImperativeHandle(forwardedRef, () => projectionModel, [
+      projectionModel
     ]);
-    const handleSelect = useCallback10((field2) => {
-      if (readonly) {
-        return;
+    const [expandedField, setExpandedField] = useState7();
+    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 = useMemo9(() => {
+      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);
       }
-      setField((f) => f === field2 ? void 0 : field2);
+      return base.pipe(Schema3.mutable);
     }, [
-      readonly
+      mode
     ]);
-    const handleAdd = useCallback10(() => {
-      invariant3(!readonly, void 0, {
+    const viewValues = useMemo9(() => ({
+      query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+      target: queueTarget
+    }), [
+      mode,
+      view.query.ast,
+      queueTarget
+    ]);
+    const fieldMap = useMemo9(() => mode === "tag" ? customFields({
+      types,
+      tags
+    }) : void 0, [
+      mode,
+      types,
+      tags
+    ]);
+    const handleAdd = useCallback17(() => {
+      invariant2(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 88,
+        L: 129,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      const field2 = projection.createFieldProjection();
-      setField(field2);
+      const field = projectionModel.createFieldProjection();
+      setExpandedField(field.id);
     }, [
       schema,
-      projection,
+      projectionModel,
       readonly
     ]);
-    const handleUpdate = useCallback10(({ typename }) => {
-      invariant3(!readonly, void 0, {
+    const handleUpdate = useCallback17((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 = useCallback17((fieldId) => {
+      invariant2(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 95,
+        L: 146,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      requestAnimationFrame(() => {
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
-        }
-      });
+      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"
+    })));
+  } finally {
+    _effect.f();
+  }
+});
+var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
+  var _effect = _useSignals19();
+  try {
+    const schemaReadonly = !isMutable(schema);
+    const { t } = useTranslation10(translationKey);
+    const projectionModel = useMemo9(() => {
+      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+      return new ProjectionModel(jsonSchema, view.projection);
+    }, [
+      schema,
+      JSON.stringify(view.projection)
+    ]);
+    const [expandedField, setExpandedField] = useState7();
+    const handleToggleField = useCallback17((field) => {
+      setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
     }, [
-      view.query.typename,
-      onTypenameChanged,
       readonly
     ]);
-    const handleDelete = useCallback10((fieldId) => {
-      invariant3(!readonly, void 0, {
+    const handleDelete = useCallback17((fieldId) => {
+      invariant2(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 107,
+        L: 218,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      if (fieldId === field?.id) {
-        setField(void 0);
+      if (fieldId === expandedField) {
+        setExpandedField(void 0);
       }
       onDelete?.(fieldId);
     }, [
-      field,
+      expandedField,
       onDelete,
       readonly
     ]);
-    const handleMove = useCallback10((fromIndex, toIndex) => {
-      invariant3(!readonly, void 0, {
+    const handleMove = useCallback17((fromIndex, toIndex) => {
+      invariant2(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 119,
+        L: 230,
         S: void 0,
         A: [
           "!readonly",
@@ -2254,111 +2659,101 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       view.projection.fields,
       readonly
     ]);
-    const handleClose = useCallback10(() => setField(void 0), []);
-    const hiddenProperties = projection.getHiddenProperties();
-    const handleHide = useCallback10((fieldId) => {
-      setField(void 0);
-      projection.hideFieldProjection(fieldId);
+    const handleClose = useCallback17(() => setExpandedField(void 0), []);
+    const handleHide = useCallback17((fieldId) => {
+      setExpandedField(void 0);
+      projectionModel.hideFieldProjection(fieldId);
     }, [
-      projection
+      projectionModel
     ]);
-    const handleShow = useCallback10((property) => {
-      setField(void 0);
-      projection.showFieldProjection(property);
+    const handleShow = useCallback17((property) => {
+      setExpandedField(void 0);
+      projectionModel.showFieldProjection(property);
     }, [
-      projection
+      projectionModel
     ]);
-    return /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: mx9(classNames)
-    }, readonly && /* @__PURE__ */ React15.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", {
-      role: "none",
-      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
-    }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
+    return /* @__PURE__ */ React19.createElement(List2.Root, {
       items: view.projection.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.projection.fields.length <= 1,
-      onClick: () => handleHide(field2.id)
-    }), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
-      disabled: view.projection.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", {
+      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: "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,
-      projection,
-      field,
-      registry,
-      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.projection.fields.length >= VIEW_FIELD_LIMIT,
-      classNames: "flex is-full"
-    })));
+      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: 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.fields.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: "os"
+        }),
+        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: "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
+      })));
+    }))));
   } finally {
     _effect.f();
   }
 };
+var customFields = ({ types, tags }) => ({
+  query: ({ type, readonly, label, getValue, onValueChange }) => {
+    const handleChange = useCallback17((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,
@@ -2368,34 +2763,39 @@ 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,
+  useKeyHandler,
   useQueryRefOptions,
-  useRefQueryLookupHandler
+  useRefQueryOptions
 };
 //# sourceMappingURL=index.mjs.map