@dxos/react-ui-form 0.8.4-main.406dc2a → 0.8.4-main.4a85c3132b

package/dist/lib/node-esm/index.mjs

@@ -1,7 +1,7 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // src/translations.ts
-var translationKey = "react-ui-form";
+var translationKey = "@dxos/react-ui-form";
 var translations = [
   {
     "en-US": {
@@ -10,7 +10,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",
@@ -26,9 +26,11 @@ var translations = [
         "ref field combobox input placeholder": "Search\u2026",
         "ref field placeholder_one": "Select\u2026",
         "ref field placeholder_other": "Select items\u2026",
-        // TODO(burdon): Factor out?
-        "button cancel": "Cancel",
-        "button save": "Save",
+        "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",
@@ -58,722 +60,380 @@ var translations = [
         "format uri": "URI",
         "format url": "URL",
         "format uuid": "UUID",
-        // GeoPointInput.
+        // GeoPointField.
         "latitude label": "Latitude",
         "longitude label": "Longitude",
-        // SelectOptionsInput.
+        // 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 record type",
-        "system schema description": "This is a system record type and cannot be modified, though the view can still be configured."
+        "system schema title": "System type",
+        "system schema description": "System type: cannot add or remove fields."
       }
     }
   }
 ];
 
-// src/components/ControlSection/ControlSection.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import React from "react";
-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 {
-    return /* @__PURE__ */ React.createElement(StackItem.Content, {
-      scrollable: true,
-      classNames: "[--control-spacing:var(--dx-trimMd)]"
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: mx("pli-cardSpacingInline pbe-trimLg", classNames),
-      ...props
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlSection = ({ title, description, children }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ControlSectionHeading, {
-      title,
-      description
-    }), children);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlSectionHeading = ({ title, description }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    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__ */ React.createElement("p", {
-      className: "pli-trimMd mlb-trimMd container-max-width text-description"
-    }, toLocalizedString(description, t)));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlGroupButton = ({ classNames, ...props }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(Button, {
-      ...props,
-      classNames: [
-        "md:col-span-2",
-        classNames
-      ]
-    });
-  } finally {
-    _effect.f();
-  }
-};
-var ControlGroup = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: mx("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", "[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end", classNames)
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlFrame = ({ children }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: mx("container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd", "border border-separator rounded-md")
-    }, children);
-  } finally {
-    _effect.f();
-  }
-};
-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 = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React.createElement("div", {
-      className: controlItemClasses
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React.createElement("h3", {
-      className: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
-      className: controlItemDescriptionClasses
-    }, toLocalizedString(description, t))), children);
-  } finally {
-    _effect.f();
-  }
-};
-var ControlItemInput = ({ title, description, children }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
-      className: controlItemClasses
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React.createElement(Input.Label, {
-      classNames: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Description, {
-      classNames: controlItemDescriptionClasses
-    }, toLocalizedString(description, t)))), children));
-  } finally {
-    _effect.f();
-  }
-};
-var ControlFrameItem = ({ title, description, children }) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "group",
-      className: "min-is-0"
-    }, /* @__PURE__ */ React.createElement("h3", {
-      className: "text-lg mbe-2"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
-      className: "mlb-trimSm md:mbe-0 text-description"
-    }, toLocalizedString(description, t)), children);
-  } finally {
-    _effect.f();
-  }
-};
-
 // src/components/FieldEditor/FieldEditor.tsx
-import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
-import React14, { useCallback as useCallback12, useEffect as useEffect8, useMemo as useMemo7, useState as useState6 } from "react";
-import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo/internal";
-import { log as log3 } from "@dxos/log";
-import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { formatToAdditionalPropertyAttributes, getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
-
-// src/components/Form/custom/GeoPointInput.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3, { useCallback, useEffect, useMemo, useState } from "react";
-import { GeoLocation } from "@dxos/echo/internal";
-import { Input as Input3, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { safeParseFloat } from "@dxos/util";
+import React17, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
+import { Obj as Obj2 } from "@dxos/echo";
+import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
+import { log as log2 } from "@dxos/log";
+import { useAsyncEffect, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
 
-// src/components/Form/Input.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 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 InputHeader = ({ error, label, readonly }) => {
-  var _effect = _useSignals2();
-  try {
-    const Label = readonly ? "span" : Input2.Label;
-    const labelProps = readonly ? {} : {
-      classNames: "!mlb-0"
-    };
-    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/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, readonly, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals3();
-  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__ */ React3.createElement(Input3.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React3.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React3.createElement("div", {
-      role: "none",
-      className: "grid grid-cols-2 gap-2"
-    }, /* @__PURE__ */ React3.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React3.createElement(Input3.Label, null, t("latitude label")), /* @__PURE__ */ React3.createElement(Input3.TextInput, {
-      type: "number",
-      step: "0.00001",
-      min: "-90",
-      max: "90",
-      disabled: !!readonly,
-      value: latitudeText,
-      onChange: handleCoordinateChange("latitude", setLatitudeText),
-      onBlur
-    })), /* @__PURE__ */ React3.createElement("div", {
-      role: "none"
-    }, /* @__PURE__ */ React3.createElement(Input3.Label, null, t("longitude label")), /* @__PURE__ */ React3.createElement(Input3.TextInput, {
-      type: "number",
-      step: "0.00001",
-      min: "-180",
-      max: "180",
-      disabled: !!readonly,
-      value: longitudeText,
-      onChange: handleCoordinateChange("longitude", setLongitudeText),
-      onBlur
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/Form/custom/SelectOptionsInput.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { useCallback as useCallback2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { PublicKey } from "@dxos/keys";
-import { IconButton, Input as Input4, Tag, useTranslation as useTranslation3 } 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 SelectOptionInput = ({ type, label, readonly, getStatus, getValue: getValue3, onValueChange }) => {
-  var _effect = _useSignals4();
-  try {
-    const [selected, setSelectedId] = useState2(null);
-    const [isNewOption, setIsNewOption] = useState2(false);
-    const inputRef = useRef(null);
-    const { t } = useTranslation3(translationKey);
-    const { status, error } = getStatus();
-    const options = getValue3();
-    useEffect2(() => {
-      if (options === void 0) {
-        onValueChange(type, []);
+      case TypeEnum.Number: {
+        const cleaned = typeof value3 === "string" ? value3.replace(/[^0-9.-]+/g, "") : value3;
+        const num = Number(cleaned);
+        return Number.isNaN(num) ? null : num;
       }
-    }, [
-      options,
-      onValueChange,
-      type
-    ]);
-    const randomHue = () => {
-      const usedHues = new Set(options?.map((option) => option.color) ?? []);
-      const unusedHues = hues.filter((hue) => !usedHues.has(hue));
-      if (unusedHues.length > 0) {
-        return unusedHues[Math.floor(Math.random() * unusedHues.length)];
+      case TypeEnum.String:
+      case TypeEnum.Ref:
+        return String(value3);
+      default: {
+        return value3;
       }
-      const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
-      const availableHues = hues.filter((hue) => !lastThree.has(hue));
-      return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
-    };
-    const handleAdd = useCallback2(() => {
-      const newId = PublicKey.random().truncate();
-      const newOption = {
-        id: newId,
-        title: "",
-        color: randomHue()
-      };
-      onValueChange(type, [
-        ...options ?? [],
-        newOption
-      ]);
-      setSelectedId(newId);
-      setIsNewOption(true);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleDelete = useCallback2((id) => {
-      const newOptions = options?.filter((option) => option.id !== id) ?? [];
-      onValueChange(type, newOptions);
-      setSelectedId(null);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleMove = useCallback2((from, to) => {
-      if (!options) {
-        return;
+    }
+  };
+  if (!format) {
+    return parseScalar(type);
+  }
+  switch (format) {
+    case Format.TypeFormat.Boolean:
+      return parseScalar(TypeEnum.Boolean);
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.Percent:
+    case Format.TypeFormat.Currency:
+      return parseScalar(TypeEnum.Number);
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Markdown: {
+      return parseScalar(TypeEnum.String);
+    }
+    case Format.TypeFormat.Ref:
+      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp: {
+      const date = new Date(value3);
+      return isNaN(date.getTime()) ? null : date;
+    }
+    case Format.TypeFormat.GeoPoint: {
+      if (typeof value3 === "string") {
+        const cleaned = value3.replace(/[^0-9.,-]+/g, "");
+        const parts = cleaned.split(",");
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation.toGeoPoint({
+              latitude: lat,
+              longitude: long
+            });
+          }
+        }
       }
-      const newOptions = [
-        ...options
+      return [
+        0,
+        0
       ];
-      const [removed] = newOptions.splice(from, 1);
-      newOptions.splice(to, 0, removed);
-      onValueChange(type, newOptions);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleClick = useCallback2((id) => {
-      setSelectedId((current) => current === id ? null : id);
-    }, []);
-    const handleTitleChange = useCallback2((id) => (e) => {
-      const newOptions = options?.map((o) => o.id === id ? {
-        ...o,
-        title: e.target.value
-      } : o);
-      onValueChange(type, newOptions ?? []);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    const handleKeyDown = useCallback2((e) => {
-      if (e.key === "Enter") {
-        setSelectedId(null);
-      }
-    }, []);
-    const handleColorChange = useCallback2((id) => (hue) => {
-      const newOptions = options?.map((o) => o.id === id ? {
-        ...o,
-        color: hue
-      } : o);
-      onValueChange(type, newOptions ?? []);
-    }, [
-      options,
-      type,
-      onValueChange
-    ]);
-    useEffect2(() => {
-      if (selected && isNewOption && inputRef.current) {
-        inputRef.current.focus();
-        setIsNewOption(false);
-      }
-    }, [
-      selected,
-      isNewOption
-    ]);
-    return /* @__PURE__ */ React4.createElement(Input4.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React4.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React4.createElement("div", {
-      role: "none"
-    }, options && /* @__PURE__ */ React4.createElement(List.Root, {
-      items: options,
-      isItem: (item) => true,
-      onMove: readonly ? void 0 : handleMove,
-      readonly: !!readonly
-    }, ({ items }) => /* @__PURE__ */ React4.createElement("div", {
-      role: "list",
-      className: "w-full overflow-auto"
-    }, items?.map((item) => /* @__PURE__ */ React4.createElement("div", {
-      key: item.id
-    }, /* @__PURE__ */ React4.createElement(List.Item, {
-      role: "button",
-      item,
-      classNames: [
-        subtleHover,
-        "flex flex-col cursor-pointer rounded-sm"
-      ],
-      "aria-expanded": selected === item.id
-    }, /* @__PURE__ */ React4.createElement("div", {
-      className: "flex items-center"
-    }, /* @__PURE__ */ React4.createElement(List.ItemDragHandle, {
-      disabled: !!readonly
-    }), /* @__PURE__ */ React4.createElement(List.ItemTitle, {
-      onClick: () => handleClick(item.id),
-      classNames: "flex-1"
-    }, /* @__PURE__ */ React4.createElement(Tag, {
-      palette: item.color
-    }, item.title || "\u200B")), /* @__PURE__ */ React4.createElement(IconButton, {
-      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__ */ React4.createElement("div", {
-      className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
-    }, /* @__PURE__ */ React4.createElement(Input4.Label, {
-      classNames: "text-xs"
-    }, t("select option label")), /* @__PURE__ */ React4.createElement("div", {
-      className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
-    }, /* @__PURE__ */ React4.createElement(Input4.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",
-      "data-no-submit": true
-    }), /* @__PURE__ */ React4.createElement(HuePicker, {
-      disabled: !!readonly,
-      value: item.color,
-      onChange: handleColorChange(item.id)
-    }), /* @__PURE__ */ React4.createElement(IconButton, {
-      disabled: !!readonly,
-      icon: "ph--trash--fill",
-      iconOnly: true,
-      label: t("select option delete"),
-      onClick: () => handleDelete(item.id)
-    })))))), /* @__PURE__ */ React4.createElement(IconButton, {
-      variant: "ghost",
-      icon: "ph--plus--regular",
-      label: t("select option add"),
-      onClick: handleAdd,
-      disabled: !!readonly,
-      classNames: "is-full"
-    })))));
-  } finally {
-    _effect.f();
+    }
+    default: {
+      return value3;
+    }
   }
 };
-
-// src/components/Form/custom/TupleInput.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5 from "react";
-import { Input as Input5 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
-var gridCols = [
-  "grid-cols-1",
-  "grid-cols-2",
-  "grid-cols-3",
-  "grid-cols-4"
-];
-var TupleInput = ({ binding, type, label, readonly, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals5();
-  try {
-    const { status, error } = getStatus();
-    const values = getValue3() ?? {};
-    return /* @__PURE__ */ React5.createElement(Input5.Root, {
-      validationValence: status
-    }, /* @__PURE__ */ React5.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React5.createElement("div", {
-      className: mx3("grid gap-2", gridCols[binding.length - 1])
-    }, binding.map((prop) => /* @__PURE__ */ React5.createElement(Input5.TextInput, {
-      key: prop,
-      type: "number",
-      disabled: !!readonly,
-      value: values[prop],
-      onChange: (event) => onValueChange(type, {
-        ...values,
-        [prop]: safeParseFloat2(event.target.value, 0)
-      }),
-      onBlur
-    }))));
-  } finally {
-    _effect.f();
+var cellClassesForFieldType = ({ type, format }) => {
+  switch (format || type) {
+    case Format.TypeFormat.Markdown:
+      return void 0;
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp:
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Duration:
+      return [
+        "font-mono",
+        "text-right"
+      ];
+    case Format.TypeFormat.Currency:
+      return [
+        "text-right"
+      ];
+    case Format.TypeFormat.JSON:
+    case Format.TypeFormat.DID:
+      return [
+        "font-mono"
+      ];
+    case TypeEnum.Number:
+    case TypeEnum.Boolean:
+      return [
+        "text-right",
+        "font-mono"
+      ];
+    case TypeEnum.String:
+      return void 0;
+    case TypeEnum.Ref:
+      return void 0;
+    default:
+      return void 0;
   }
 };
+var pathNotUniqueError = (path) => ({
+  path: "path",
+  message: `'${path}' is already present`
+});
 
-// src/components/Form/Defaults.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
-import { Input as Input6, Select, useTranslation as useTranslation4 } from "@dxos/react-ui";
-var TextInput = ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals6();
-  try {
-    const { status, error } = getStatus();
-    return readonly && !getValue3() ? null : readonly === "static" && inputOnly ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
-      error,
-      label
-    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.TextInput, {
-      disabled: !!readonly,
-      placeholder,
-      value: getValue3() ?? "",
-      onChange: (event) => onValueChange(type, event.target.value),
-      onBlur
-    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.Validation, null, error));
-  } finally {
-    _effect.f();
+// src/util/formatting.ts
+import { format as formatDate } from "date-fns/format";
+import { Format as Format2, GeoLocation as GeoLocation2, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
+var formatForDisplay = ({ type, format, value: value3, locale = void 0 }) => {
+  const formatScalar = (type2) => {
+    switch (type2) {
+      case TypeEnum2.Boolean:
+        return value3.toLocaleString().toUpperCase();
+      case TypeEnum2.Number:
+        return value3.toLocaleString(locale);
+      case TypeEnum2.String:
+      case TypeEnum2.Ref:
+        return String(value3);
+      default: {
+        return String(value3);
+      }
+    }
+  };
+  if (!format) {
+    return formatScalar(type);
   }
-};
-var NumberInput = ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals6();
-  try {
-    const { status, error } = getStatus();
-    return readonly && !getValue3() ? null : readonly === "static" && inputOnly ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
-      error,
-      label
-    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.TextInput, {
-      type: "number",
-      disabled: !!readonly,
-      placeholder,
-      value: getValue3(),
-      onChange: (event) => onValueChange(type, event.target.value),
-      onBlur
-    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
+  switch (format) {
+    case Format2.TypeFormat.Boolean: {
+      return formatScalar(TypeEnum2.Boolean);
+    }
+    case Format2.TypeFormat.Number: {
+      return formatScalar(TypeEnum2.Number);
+    }
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
+      return formatScalar(TypeEnum2.String);
+    }
+    case Format2.TypeFormat.Percent: {
+      return `${value3 * 100}%`;
+    }
+    case Format2.TypeFormat.Currency: {
+      return value3.toLocaleString(locale, {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+    }
+    case Format2.TypeFormat.Date: {
+      try {
+        return formatDate(new Date(value3), "yyyy-MM-dd");
+      } catch (error) {
+        return "Invalid Date";
+      }
+    }
+    case Format2.TypeFormat.Time: {
+      try {
+        return formatDate(new Date(value3), "HH:mm:ss");
+      } catch (error) {
+        return "Invalid Time";
+      }
+    }
+    case Format2.TypeFormat.DateTime: {
+      try {
+        return formatDate(new Date(value3), "yyyy-MM-dd HH:mm:ss");
+      } catch (error) {
+        return "Invalid DateTime";
+      }
+    }
+    case Format2.TypeFormat.GeoPoint: {
+      if (value3 === null || value3 === void 0) {
+        return "";
+      }
+      if (Array.isArray(value3) && value3.length >= 2 && value3.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation2.fromGeoPoint(value3);
+        return `${latitude},${longitude}`;
+      }
+      return String(value3);
+    }
+    default: {
+      if (value3 === null || value3 === "undefined") {
+        return "";
+      }
+      return String(value3);
+    }
   }
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange, readonly }) => {
-  var _effect = _useSignals6();
-  try {
-    const { status, error } = getStatus();
-    const checked = Boolean(getValue3());
-    const { t } = useTranslation4(translationKey);
-    return /* @__PURE__ */ React6.createElement(Input6.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
-      error,
-      label
-    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ React6.createElement(Input6.Switch, {
-      disabled: !!readonly,
-      checked,
-      onCheckedChange: (value2) => onValueChange(type, value2)
-    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.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 SelectInput = ({ type, label, inputOnly, readonly, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  var _effect = _useSignals6();
-  try {
-    const { status, error } = getStatus();
-    const value2 = getValue3();
-    const handleValueChange = useCallback3((value3) => onValueChange(type, value3), [
-      type,
-      onValueChange
-    ]);
-    return readonly && !value2 ? null : /* @__PURE__ */ React6.createElement(Input6.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
-      error,
-      label
-    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value2)?.label ?? String(value2)) : /* @__PURE__ */ React6.createElement(Select.Root, {
-      value: value2,
-      onValueChange: handleValueChange
-    }, /* @__PURE__ */ React6.createElement(Select.TriggerButton, {
-      classNames: "is-full",
-      disabled: !!readonly,
-      placeholder
-    }), /* @__PURE__ */ React6.createElement(Select.Portal, null, /* @__PURE__ */ React6.createElement(Select.Content, null, /* @__PURE__ */ React6.createElement(Select.Viewport, null, options?.map(({ value: value3, label: label2 }) => (
-      // NOTE: Numeric values are converted to and from strings.
-      /* @__PURE__ */ React6.createElement(Select.Option, {
-        key: String(value3),
-        value: String(value3)
-      }, label2 ?? String(value3))
-    ))), /* @__PURE__ */ React6.createElement(Select.Arrow, null)))), inputOnly && /* @__PURE__ */ React6.createElement(Input6.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 MarkdownInput = ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals6();
-  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/properties.ts
+import * as Option from "effect/Option";
+import { Annotation } from "@dxos/echo";
+import { getProperties } from "@dxos/effect";
+var getFormProperties = (ast) => {
+  return getProperties(ast).filter((prop) => Annotation.FormInputAnnotation.getFromAst(prop.type).pipe(Option.getOrElse(() => true)));
+};
+
+// src/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__ */ React6.createElement(Input6.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
-      error,
-      label
-    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.TextArea, {
-      ref: textareaRef,
-      disabled: !!readonly,
-      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__ */ React6.createElement(Input6.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 { useFocusFinders } from "@fluentui/react-tabster";
-import React13, { useCallback as useCallback11, useEffect as useEffect7, useRef as useRef3 } from "react";
-import { cardDialogOverflow, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
-
-// src/components/Form/FormActions.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8 from "react";
-import { IconButton as IconButton2, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { cardSpacing } from "@dxos/react-ui-stack";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+// src/components/Form/fields/ArrayField.tsx
+import * as Option3 from "effect/Option";
+import * as SchemaAST3 from "effect/SchemaAST";
+import React5, { useCallback as useCallback3 } from "react";
+import { findNode as findNode2, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
+import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
 
-// src/components/Form/FormContext.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { createContext, useCallback as useCallback7, useContext, useEffect as useEffect6, useMemo as useMemo3 } from "react";
-import { raise } from "@dxos/debug";
-import { getValue as getValue2 } from "@dxos/echo/internal";
-import { createJsonPath as createJsonPath2 } from "@dxos/effect";
+// src/components/Form/Form.tsx
+import { createContext } from "@radix-ui/react-context";
+import * as Schema2 from "effect/Schema";
+import * as SchemaAST2 from "effect/SchemaAST";
+import React4, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
+import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
+import { IconButton, ScrollArea, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
 
-// src/hooks/useForm.ts
-import * as SchemaAST from "effect/SchemaAST";
-import { useCallback as useCallback4, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
-import { getValue, setValue } from "@dxos/echo/internal";
-import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
-import { invariant } from "@dxos/invariant";
+// src/hooks/useFormHandler.ts
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createJsonPath, fromEffectValidationPath, getValue as getValue$ } from "@dxos/effect";
 import { log } from "@dxos/log";
+import { useDefaultValue } from "@dxos/react-ui";
 import { validateSchema } from "@dxos/schema";
-var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.ts";
-var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
-  invariant(SchemaAST.isTypeLiteral(schema.ast), void 0, {
-    F: __dxlog_file,
-    L: 96,
-    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: () => {
+      if (valuesProp !== void 0) {
+        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 values = values$;
+  const validate = useCallback((values2) => {
+    if (!schema) {
+      return false;
+    }
     let errors2 = validateSchema(schema, values2) ?? [];
+    log("validate", {
+      values: values2,
+      errors: errors2
+    }, {
+      F: __dxlog_file,
+      L: 155,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -785,36 +445,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);
@@ -824,11 +486,17 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     values,
     validate,
     onSave,
-    changed
+    changed,
+    isValid
+  ]);
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+  }, [
+    onCancel
   ]);
-  const getStatus = useCallback4((path) => {
+  const getStatus = useCallback((path) => {
     const jsonPath = Array.isArray(path) ? createJsonPath(path) : path;
-    const matchingError = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`));
+    const [_, error] = Object.entries(errors).find(([errorPath]) => errorPath === jsonPath || errorPath.startsWith(`${jsonPath}.`) || errorPath.startsWith(`${jsonPath}[`)) ?? [];
     const isTouched = touched[jsonPath];
     if (!isTouched) {
       return {
@@ -837,111 +505,138 @@ 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, value2) => {
+  const onValueChange = useCallback((path, type, value3) => {
+    log("onValueChange", {
+      path,
+      value: value3
+    }, {
+      F: __dxlog_file,
+      L: 254,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
     const jsonPath = createJsonPath(path);
-    let parsedValue = value2;
+    const pathArray = path;
+    let parsedValue = value3;
     try {
-      if (type === "number") {
-        parsedValue = parseFloat(value2) || 0;
+      if (type._tag === "NumberKeyword") {
+        parsedValue = parseFloat(value3) || 0;
       }
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 217,
+        L: 264,
         S: void 0,
         C: (f, a) => f(...a)
       });
       parsedValue = void 0;
     }
-    const newValues = {
-      ...setValue(values, jsonPath, parsedValue)
-    };
-    setValues(newValues);
+    const newValues = mergeAtPath(values, pathArray, parsedValue);
     const newChanged = {
-      ...changed,
       [jsonPath]: true
     };
-    setChanged(newChanged);
-    onValuesChanged?.(newValues);
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, {
-        changed: newChanged
-      });
+    setChanged((prev) => ({
+      ...prev,
+      ...newChanged
+    }));
+    const isValid2 = validate(newValues);
+    onValuesChanged?.(newValues, {
+      isValid: isValid2,
+      changed: newChanged
+    });
+    if (valuesProp === void 0) {
+      setValues(newValues);
     }
   }, [
     values,
-    onValuesChanged,
     validate,
-    onValid,
-    changed
+    onValuesChanged,
+    valuesProp
   ]);
-  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, value2) => {
-  invariant(obj, void 0, {
-    F: __dxlog_file,
-    L: 280,
-    S: void 0,
-    A: [
-      "obj",
-      ""
-    ]
-  });
-  return Object.keys(obj).reduce((acc, key) => ({
-    ...acc,
-    [key]: value2
-  }), {});
+var mergeAtPath = (obj, path, value3) => {
+  if (path.length === 0) {
+    return value3;
+  }
+  const [head2, ...rest] = path;
+  const child = rest.length === 0 ? value3 : mergeAtPath(obj?.[head2], rest, value3);
+  if (Array.isArray(obj)) {
+    const copy = [
+      ...obj
+    ];
+    copy[head2] = child;
+    return copy;
+  }
+  return {
+    ...obj,
+    [head2]: child
+  };
 };
 var flatMap = (errors) => {
   return errors.reduce((result, { path, message }) => {
@@ -953,1618 +648,1952 @@ var flatMap = (errors) => {
   }, {});
 };
 
-// src/hooks/useRefQueryLookupHandler.ts
-import { useCallback as useCallback5 } from "react";
-import { Obj } from "@dxos/echo";
-import { getObjectDXN } from "@dxos/echo/internal";
-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: Obj.getLabel(object) ?? object?.id ?? ""
-      };
-      return item;
-    }).filter(isNonNullable);
+    }
   }, [
-    space
+    form.isValid,
+    form.canSave,
+    form.onSave,
+    form.autoSave
   ]);
-};
-
-// src/hooks/useQueryRefOptions.ts
-import { useCallback as useCallback6, useEffect as useEffect5, useState as useState4 } from "react";
-import { log as log2 } from "@dxos/log";
-var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useQueryRefOptions.ts";
-var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
-  const [options, setOptions] = useState4([]);
-  const [loading, setLoading] = useState4(false);
-  const [state, setState] = useState4({});
-  const update = useCallback6(() => setState({}), []);
-  useEffect5(() => {
-    if (!refTypeInfo || !onQueryRefOptions) {
+  useEffect2(() => {
+    if (!formElement) {
       return;
     }
-    const fetchOptions = async () => {
-      setLoading(true);
-      try {
-        const fetchedOptions = await onQueryRefOptions(refTypeInfo);
-        setOptions(fetchedOptions.map((option) => {
-          const dxn = option.dxn.toString();
-          return {
-            id: dxn,
-            label: option.label ?? dxn,
-            hue: "neutral"
-          };
-        }));
-      } catch (error) {
-        log2.error("Failed to fetch ref options:", error, {
-          F: __dxlog_file2,
-          L: 51,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setOptions([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-    void fetchOptions();
+    return addEventListener(formElement, "keydown", handleKeyDown);
   }, [
-    refTypeInfo,
-    onQueryRefOptions,
-    state
+    formElement,
+    handleKeyDown
   ]);
-  return {
-    options,
-    update,
-    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, value2) => onValueChange(stablePath, type, value2),
-    onBlur: () => onTouched(stablePath)
-  }), [
-    getStatus,
-    getFormValue,
-    onValueChange,
-    onTouched,
-    stablePath
-  ]);
+// src/components/Form/FormFieldComponent.tsx
+import React, { Component } from "react";
+import { Icon, Input, Tooltip } from "@dxos/react-ui";
+import { inputTextLabel } from "@dxos/ui-theme";
+var FormFieldLabel = ({ label, error, readonly, asChild }) => {
+  const Label = readonly || asChild ? "span" : Input.Label;
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex items-center justify-between"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    className: inputTextLabel
+  }, label), error && /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+    asChild: true,
+    content: error,
+    side: "bottom"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--warning--regular",
+    size: 4,
+    classNames: "text-error-text"
+  })));
 };
-var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
-  var _effect = _useSignals7();
-  try {
-    const form = useForm(formOptions);
-    const handleKeyDown = useCallback7((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.canSave,
-      form.formIsValid,
-      form.handleSave,
-      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__ */ React7.createElement(FormContext.Provider, {
-      value: form
-    }, children);
-  } finally {
-    _effect.f();
+FormFieldLabel.displayName = "Form.FieldLabel";
+var FormFieldWrapper = (props) => {
+  const { children, readonly, layout, label, getStatus, getValue } = props;
+  const { status, error } = getStatus();
+  const value3 = getValue();
+  if (layout === "static" && value3 == null) {
+    return null;
   }
+  const str = String(value3 ?? "");
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "contents"
+  }, /* @__PURE__ */ React.createElement(Input.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React.createElement("p", null, str) : children ? children({
+    value: value3
+  }) : null, layout === "full" && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Validation, null, error))));
 };
-
-// src/components/Form/FormActions.tsx
-var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
-  var _effect = _useSignals8();
-  try {
-    const { t } = useTranslation5(translationKey);
-    const { canSave, handleSave } = useFormContext();
-    return /* @__PURE__ */ React8.createElement("div", {
-      role: "none",
-      className: mx4(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
-    }, onCancel && !readonly && /* @__PURE__ */ React8.createElement(IconButton2, {
-      "data-testid": "cancel-button",
-      icon: "ph--x--regular",
-      label: t("button cancel"),
-      onClick: onCancel
-    }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
-      type: "submit",
-      "data-testid": "save-button",
-      disabled: !canSave,
-      icon: "ph--check--regular",
-      label: t("button save"),
-      onClick: handleSave
-    }));
-  } finally {
-    _effect.f();
+var FormFieldErrorBoundary = class extends Component {
+  static getDerivedStateFromError(error) {
+    return {
+      error
+    };
+  }
+  state = {
+    error: void 0
+  };
+  componentDidUpdate(prevProps) {
+    if (prevProps.path !== this.props.path) {
+      this.resetError();
+    }
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ React.createElement("div", {
+        className: "flex gap-2 border border-rose-fill font-mono text-sm"
+      }, /* @__PURE__ */ React.createElement("span", {
+        className: "bg-rose-fill text-surface-text px-1 font-thin"
+      }, "ERROR"), String(this.props.path?.join(".")));
+    }
+    return this.props.children;
+  }
+  resetError() {
+    this.setState({
+      error: void 0
+    });
   }
 };
 
-// src/components/Form/FormContent.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
-import * as Function2 from "effect/Function";
-import * as Schema from "effect/Schema";
-import * as SchemaAST4 from "effect/SchemaAST";
-import * as StringEffect from "effect/String";
-import React12, { forwardRef as forwardRef2, useMemo as useMemo6 } from "react";
-import { createJsonPath as createJsonPath3, findNode as findNode3, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx6 } from "@dxos/react-ui-theme";
-import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
+// src/components/Form/FormFieldSet.tsx
+import React3, { forwardRef, useMemo as useMemo3 } from "react";
+import { mx } from "@dxos/ui-theme";
 import { isTruthy } from "@dxos/util";
 
-// src/util/field.ts
-import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo/internal";
-var parseValue = ({ type, format, value: value2 }) => {
-  if (value2 === void 0 || value2 === null || value2 === "") {
-    return void 0;
-  }
-  const parseScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum.Boolean: {
-        if (typeof value2 === "string") {
-          const lowercaseValue = value2.toLowerCase();
-          if (lowercaseValue === "0" || lowercaseValue === "false") {
-            return false;
-          } else if (lowercaseValue === "1" || lowercaseValue === "true") {
-            return true;
-          }
-        }
-        return Boolean(value2);
-      }
-      case TypeEnum.Number: {
-        const cleaned = typeof value2 === "string" ? value2.replace(/[^0-9.-]+/g, "") : value2;
-        const num = Number(cleaned);
-        return Number.isNaN(num) ? null : num;
-      }
-      case TypeEnum.String:
-      case TypeEnum.Ref:
-        return String(value2);
-      default: {
-        return value2;
-      }
-    }
+// src/components/Form/FormField.tsx
+import * as Match from "effect/Match";
+import * as Option2 from "effect/Option";
+import * as Schema from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
+import * as String2 from "effect/String";
+import React2, { 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 } from "@dxos/react-ui";
+var FormField = (props) => {
+  const {
+    type,
+    name,
+    path,
+    projection,
+    fieldMap,
+    fieldProvider,
+    readonly,
+    layout,
+    // RefFieldProps
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    db,
+    schemaHook,
+    getOptions: getRefOptions,
+    onCreate
+  } = props;
+  const { t } = useTranslation(translationKey);
+  const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
+  const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
+  const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
+  const label = useMemo2(() => title ?? String2.capitalize(name), [
+    title,
+    name
+  ]);
+  const placeholder = useMemo2(() => examples?.length ? `${t("example placeholder")}: ${examples[0]}` : description ?? label, [
+    examples,
+    description,
+    label
+  ]);
+  const fieldState = useFormFieldState(FormField.displayName, path);
+  const fieldProps = {
+    type,
+    format: Format3.FormatAnnotation.getFromAst(type).pipe((annotation) => Option2.getOrUndefined(annotation)),
+    readonly,
+    label,
+    placeholder,
+    layout,
+    ...fieldState
   };
-  if (!format) {
-    return parseScalar(type);
+  const jsonPath = createJsonPath2(path ?? []);
+  const CustomField = fieldMap?.[jsonPath];
+  if (CustomField) {
+    return /* @__PURE__ */ React2.createElement(CustomField, fieldProps);
   }
-  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(value2);
-      return isNaN(date.getTime()) ? null : date;
-    }
-    case FormatEnum.GeoPoint: {
-      if (typeof value2 === "string") {
-        const cleaned = value2.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 value2;
+  const component = fieldProvider?.({
+    schema: Schema.make(type),
+    prop: name,
+    fieldProps
+  });
+  if (component) {
+    return component;
+  }
+  if (isArrayType2(type)) {
+    return /* @__PURE__ */ React2.createElement(ArrayField, {
+      fieldProps: fieldState,
+      label,
+      ...props
+    });
+  }
+  const Field = getFormField(fieldProps);
+  if (Field) {
+    return /* @__PURE__ */ React2.createElement(Field, fieldProps);
+  }
+  const options = getOptions(type);
+  if (options) {
+    const fieldProjections = projection?.getFieldProjections();
+    const fieldProjection = fieldProjections?.find((fp) => fp.field.path === name);
+    const selectOptions = fieldProjection?.props.options;
+    return /* @__PURE__ */ React2.createElement(SelectField, {
+      ...fieldProps,
+      options: options.map((option) => {
+        const selectOption = selectOptions?.find((so) => so.id === globalThis.String(option));
+        return {
+          value: option,
+          label: selectOption?.title ?? option.toString()
+        };
+      })
+    });
+  }
+  const refProps = getRefProps(type);
+  if (refProps) {
+    return /* @__PURE__ */ React2.createElement(RefField, {
+      ...fieldProps,
+      ...refProps,
+      createOptionLabel,
+      createOptionIcon,
+      createInitialValuePath,
+      db,
+      schemaHook,
+      getOptions: getRefOptions,
+      onCreate
+    });
+  }
+  if (isNestedType(type)) {
+    const baseNode = findNode(type, isDiscriminatedUnion);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
+    if (typeLiteral) {
+      const schema = Schema.make(typeLiteral);
+      return /* @__PURE__ */ React2.createElement(FormFieldSet, {
+        schema,
+        path,
+        readonly,
+        layout,
+        label,
+        projection,
+        fieldMap,
+        fieldProvider,
+        createOptionLabel,
+        createOptionIcon,
+        createInitialValuePath,
+        db,
+        schemaHook,
+        getOptions: getRefOptions,
+        onCreate
+      });
     }
   }
+  return null;
 };
-var cellClassesForFieldType = ({ type, format }) => {
-  switch (format || type) {
-    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"
-      ];
-    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;
+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 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/internal";
-var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-        return value2.toLocaleString().toUpperCase();
-      case TypeEnum2.Number:
-        return value2.toLocaleString(locale);
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value2);
-      default: {
-        return String(value2);
-      }
-    }
-  };
-  if (!format) {
-    return formatScalar(type);
+var getOptions = (ast) => {
+  if (isLiteralUnion(ast)) {
+    return ast.types.map((type) => type.literal).filter((v) => v !== null);
   }
-  switch (format) {
-    case FormatEnum2.Boolean: {
-      return formatScalar(TypeEnum2.Boolean);
-    }
-    case FormatEnum2.Number: {
-      return formatScalar(TypeEnum2.Number);
-    }
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
-      return formatScalar(TypeEnum2.String);
-    }
-    case FormatEnum2.Percent: {
-      return `${value2 * 100}%`;
-    }
-    case FormatEnum2.Currency: {
-      return value2.toLocaleString(locale, {
-        style: "currency",
-        currency: "USD",
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      });
-    }
-    case FormatEnum2.Date: {
-      try {
-        return formatDate(new Date(value2), "yyyy-MM-dd");
-      } catch (error) {
-        return "Invalid Date";
-      }
-    }
-    case FormatEnum2.Time: {
-      try {
-        return formatDate(new Date(value2), "HH:mm:ss");
-      } catch (error) {
-        return "Invalid Time";
-      }
-    }
-    case FormatEnum2.DateTime: {
-      try {
-        return formatDate(new Date(value2), "yyyy-MM-dd HH:mm:ss");
-      } catch (error) {
-        return "Invalid DateTime";
-      }
+  return Format3.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option2.getOrUndefined(annotation));
+};
+
+// src/components/Form/FormFieldSet.tsx
+var FORM_FIELDSET_NAME = "Form.FieldSet";
+var FormFieldSet = /* @__PURE__ */ forwardRef(({ label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
+  const values = useFormValues(FORM_FIELDSET_NAME, path);
+  const properties = useMemo3(() => {
+    if (!schema) {
+      return [];
     }
-    case FormatEnum2.GeoPoint: {
-      if (value2 === null || value2 === void 0) {
-        return "";
-      }
-      if (Array.isArray(value2) && value2.length >= 2 && value2.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value2);
-        return `${latitude},${longitude}`;
+    const props2 = getFormProperties(schema.ast);
+    if (projection) {
+      const fieldProjections = projection.getFieldProjections();
+      const hiddenProperties = new Set(projection.getHiddenProperties());
+      const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name.toString()));
+      const orderedProps = [];
+      for (const fieldProjection of fieldProjections) {
+        const fieldPath = String(fieldProjection.field.path);
+        const prop = visibleProps.find((p) => p.name === fieldPath);
+        if (prop) {
+          orderedProps.push(prop);
+        }
       }
-      return String(value2);
+      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
+      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
+      orderedProps.push(...remainingProps);
+      return orderedProps;
     }
-    default: {
-      if (value2 === null || value2 === "undefined") {
-        return "";
-      }
-      return String(value2);
+    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__ */ React3.createElement("div", {
+    role: "form",
+    className: mx("w-full", layout === "inline" && "flex flex-col gap-2"),
+    ref: forwardRef4
+  }, layout !== "inline" && label && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
+    label,
+    asChild: true
+  }), properties.map((property) => {
+    const name = property.name.toString();
+    return /* @__PURE__ */ React3.createElement(FormFieldErrorBoundary, {
+      key: name,
+      path: [
+        ...path ?? [],
+        name
+      ]
+    }, /* @__PURE__ */ React3.createElement(FormField, {
+      type: property.type,
+      name,
+      path: [
+        ...path ?? [],
+        name
+      ],
+      readonly,
+      layout,
+      projection,
+      ...props
+    }));
+  }).filter(isTruthy));
+});
+FormFieldSet.displayName = FORM_FIELDSET_NAME;
+
+// src/components/Form/Form.tsx
+var omitId = (schema) => schema.pipe(Schema2.omit("id"));
+var [FormContextProvider, useFormContext] = createContext("Form");
+var useFormValues = (componentName, path, defaultValue) => {
+  const stablePath = useMemo4(() => path ?? [], [
+    path ? path.join(".") : void 0
+  ]);
+  const jsonPath = createJsonPath3(stablePath);
+  const { form: { values, onValueChange } } = useFormContext(componentName);
+  const value3 = getValue$2(values, jsonPath);
+  const lastAppliedPathRef = useRef(null);
+  useEffect3(() => {
+    if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
+      lastAppliedPathRef.current = jsonPath;
+      onValueChange(stablePath, SchemaAST2.stringKeyword, defaultValue());
     }
+  }, [
+    value3,
+    defaultValue,
+    onValueChange,
+    stablePath,
+    jsonPath
+  ]);
+  return value3;
+};
+var useFormFieldState = (componentName, path = []) => {
+  const stablePath = useMemo4(() => path, [
+    Array.isArray(path) ? path.join(".") : path
+  ]);
+  const { form: { getStatus, getValue, onBlur, onValueChange } } = useFormContext(componentName);
+  return useMemo4(() => ({
+    getStatus: () => getStatus(stablePath),
+    getValue: () => getValue(stablePath),
+    onBlur: () => onBlur(stablePath),
+    onValueChange: (ast, value3) => onValueChange(stablePath, ast, value3)
+  }), [
+    getStatus,
+    getValue,
+    onBlur,
+    onValueChange,
+    stablePath
+  ]);
+};
+var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
+  const form = useFormHandler({
+    schema,
+    values,
+    onSave,
+    onCancel,
+    ...props
+  });
+  return /* @__PURE__ */ React4.createElement(FormContextProvider, {
+    form,
+    ...props
+  }, children);
+};
+FormRoot.displayName = "Form.Root";
+var FORM_VIEWPORT_NAME = "Form.Viewport";
+var FormViewport = ({ children, classNames, margin = true, padding = true, thin = true, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
+    orientation: "vertical",
+    classNames,
+    margin,
+    padding,
+    thin,
+    ...props
+  }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, children));
+};
+FormViewport.displayName = FORM_VIEWPORT_NAME;
+var FORM_CONTENT_NAME = "Form.Content";
+var FormContent = ({ classNames, children }) => {
+  const { form, testId } = useFormContext(FORM_CONTENT_NAME);
+  const ref = useRef(null);
+  useKeyHandler(ref.current, form);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref,
+    role: "form",
+    className: mx2("w-full flex flex-col gap-form-padding", classNames),
+    "data-testid": testId
+  }, children);
+};
+FormContent.displayName = FORM_CONTENT_NAME;
+var FORM_FIELDSET_NAME2 = "Form.FieldSet";
+var FormFieldSet2 = (props) => {
+  const { form, ...contextProps } = useFormContext(FORM_FIELDSET_NAME2);
+  return /* @__PURE__ */ React4.createElement(FormFieldSet, {
+    schema: form.schema,
+    ...contextProps,
+    ...props
+  });
+};
+FormFieldSet2.displayName = FORM_FIELDSET_NAME2;
+var FORM_ACTIONS_NAME = "Form.Actions";
+var FormActions = ({ classNames }) => {
+  const { t } = useTranslation2(translationKey);
+  const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
+  if (readonly || layout === "static") {
+    return null;
   }
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: mx2("grid grid-flow-col gap-2 auto-cols-fr py-form-padding", classNames)
+  }, onCancel && /* @__PURE__ */ React4.createElement(IconButton, {
+    icon: "ph--x--regular",
+    iconEnd: true,
+    label: t("cancel button label"),
+    onClick: onCancel,
+    "data-testid": "cancel-button"
+  }), onSave && /* @__PURE__ */ React4.createElement(IconButton, {
+    type: "submit",
+    variant: "primary",
+    disabled: !canSave,
+    icon: "ph--check--regular",
+    iconEnd: true,
+    label: t("save button label"),
+    onClick: onSave,
+    "data-testid": "save-button"
+  }));
 };
-var formatForEditing = ({ type, format, value: value2, locale = void 0 }) => {
-  const formatScalar = (type2) => {
-    switch (type2) {
-      case TypeEnum2.Boolean:
-      case TypeEnum2.Number:
-      case TypeEnum2.String:
-      case TypeEnum2.Ref:
-        return String(value2);
-      default:
-        return String(value2);
+FormActions.displayName = FORM_ACTIONS_NAME;
+var FORM_SUBMIT_NAME = "Form.Submit";
+var FormSubmit = ({ classNames, label, icon, disabled }) => {
+  const { t } = useTranslation2(translationKey);
+  const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
+  if (readonly || layout === "static") {
+    return null;
+  }
+  return /* @__PURE__ */ React4.createElement("div", {
+    role: "none",
+    className: mx2("flex w-full pt-form-padding", classNames)
+  }, /* @__PURE__ */ React4.createElement(IconButton, {
+    classNames: "w-full",
+    type: "submit",
+    variant: "primary",
+    disabled: disabled ?? !canSave,
+    icon: icon ?? "ph--check--regular",
+    label: label ?? t("save button label"),
+    onClick: onSave,
+    "data-testid": "save-button"
+  }));
+};
+FormSubmit.displayName = FORM_SUBMIT_NAME;
+var Form = {
+  Root: FormRoot,
+  Viewport: FormViewport,
+  Content: FormContent,
+  FieldSet: FormFieldSet2,
+  Label: FormFieldLabel,
+  Actions: FormActions,
+  Submit: FormSubmit
+};
+
+// src/components/Form/fields/ArrayField.tsx
+var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
+  const { t } = useTranslation3(translationKey);
+  const elementType = getArrayElementType2(type);
+  const { onValueChange } = inputProps;
+  const values = useFormValues(ArrayField.displayName, path, () => []);
+  const getDefaultObjectValue = (typeNode) => {
+    const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
+    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST3.isTypeLiteral);
+    if (!typeLiteral) {
+      return {};
     }
+    return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
+      const defaultValue = SchemaAST3.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      return [
+        prop.name,
+        defaultValue
+      ];
+    }));
   };
-  if (!format) {
-    return formatScalar(type);
+  const handleAdd = useCallback3(() => {
+    const defaultValue = isNestedType2(type) && elementType ? getDefaultObjectValue(elementType) : getDefaultValue(elementType);
+    values && onValueChange(type, [
+      ...values,
+      defaultValue
+    ]);
+  }, [
+    onValueChange,
+    type,
+    elementType,
+    values
+  ]);
+  const handleDelete = useCallback3((idx) => {
+    onValueChange(type, values?.filter((_, i) => i !== idx));
+  }, [
+    onValueChange,
+    type,
+    values
+  ]);
+  if (!elementType || (readonly || layout === "static") && values && values.length < 1) {
+    return null;
   }
-  switch (format) {
-    case FormatEnum2.Boolean:
-    case FormatEnum2.Number:
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
-      return formatScalar(type);
-    }
-    case FormatEnum2.Percent: {
-      return String(value2 * 100);
-    }
-    case FormatEnum2.Currency: {
-      return String(value2);
-    }
-    case FormatEnum2.DateTime: {
-      const date = new Date(value2);
-      return date.toISOString();
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, (layout !== "static" || values && values.length > 0) && /* @__PURE__ */ React5.createElement(FormFieldLabel, {
+    readonly,
+    label,
+    asChild: true
+  }), /* @__PURE__ */ React5.createElement("div", {
+    role: "none",
+    className: "flex flex-col gap-2"
+  }, values?.map((_, index) => {
+    return /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      key: index,
+      className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
+    }, /* @__PURE__ */ React5.createElement(FormField, {
+      autoFocus: index === values.length - 1,
+      type: elementType,
+      path: [
+        ...path ?? [],
+        index
+      ],
+      readonly: readonly || layout === "static",
+      layout: "inline",
+      ...props
+    }), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "flex flex-col h-full justify-end"
+    }, /* @__PURE__ */ React5.createElement("div", {
+      role: "none",
+      className: "flex items-center h-[2rem]"
+    }, /* @__PURE__ */ React5.createElement(IconButton2, {
+      icon: "ph--x--regular",
+      iconOnly: true,
+      label: t("button remove"),
+      onClick: () => handleDelete(index),
+      classNames: "self-center"
+    }))));
+  })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
+    classNames: "flex w-full",
+    icon: "ph--plus--regular",
+    label: t("add field"),
+    onClick: handleAdd
+  }));
+};
+ArrayField.displayName = "Form.ArrayField";
+var getDefaultValue = (ast) => {
+  switch (ast?._tag) {
+    case "StringKeyword": {
+      return "";
     }
-    case FormatEnum2.Date: {
-      const date = new Date(value2);
-      return date.toISOString().split("T")[0];
+    case "NumberKeyword": {
+      return 0;
     }
-    case FormatEnum2.Time: {
-      const date = new Date(value2);
-      return date.toISOString().split("T")[1].split(".")[0];
+    case "BooleanKeyword": {
+      return false;
     }
-    case FormatEnum2.GeoPoint: {
-      if (value2 === null || value2 === void 0) {
-        return "";
-      }
-      if (Array.isArray(value2) && value2.length >= 2 && value2.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value2);
-        return `${latitude},${longitude}`;
-      }
-      return String(value2);
+    case "Suspend": {
+      return getDefaultValue(ast.f());
     }
     default: {
-      return String(value2);
+      if (ast && isNestedType2(ast)) {
+        return {};
+      } else {
+        throw new Error(`Unsupported type: ${ast?._tag}`);
+      }
     }
   }
 };
 
-// src/util/refs.ts
-import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo/internal";
-import { findAnnotation } from "@dxos/effect";
-
-// src/util/schema.ts
-import * as SchemaAST2 from "effect/SchemaAST";
-import { findNode } from "@dxos/effect";
-var findArrayElementType = (ast) => {
-  const tupleType = findNode(ast, SchemaAST2.isTupleType);
-  return tupleType?.rest[0]?.type;
+// src/components/Form/fields/BooleanField.tsx
+import React6, { useCallback as useCallback4 } from "react";
+import { Input as Input2 } from "@dxos/react-ui";
+var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
+  const handleChange = useCallback4((value3) => onValueChange?.(type, value3), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React6.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 }) => /* @__PURE__ */ React6.createElement(Input2.Switch, {
+    disabled: !!readonly,
+    checked: value3,
+    onCheckedChange: handleChange
+  }));
 };
 
-// src/util/refs.ts
-var getRefProps = (property) => {
-  const { ast, format, array } = property;
-  if (format === FormatEnum3.Ref) {
-    return {
-      ast,
-      isArray: false
-    };
-  }
-  if (array) {
-    const elementType = findArrayElementType(ast);
-    if (elementType) {
-      const annotation = findAnnotation(elementType, ReferenceAnnotationId);
-      if (annotation) {
-        return {
-          ast: elementType,
-          isArray: true
+// src/components/Form/fields/GeoPointField.tsx
+import React7, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo5, useState as useState2 } from "react";
+import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
+import { Input as Input3, useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { safeParseFloat } from "@dxos/util";
+var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
+  const { t } = useTranslation4(translationKey);
+  const { status, error } = getStatus();
+  const geoPoint = useMemo5(() => getValue() ?? [
+    0,
+    0
+  ], [
+    getValue
+  ]);
+  const value3 = useMemo5(() => GeoLocation3.fromGeoPoint(geoPoint), [
+    geoPoint
+  ]);
+  const [longitudeText, setLongitudeText] = useState2(value3.longitude?.toString());
+  const [latitudeText, setLatitudeText] = useState2(value3.latitude?.toString());
+  useEffect4(() => {
+    const location = GeoLocation3.fromGeoPoint(geoPoint);
+    setLongitudeText(location.longitude?.toString());
+    setLatitudeText(location.latitude?.toString());
+  }, [
+    geoPoint
+  ]);
+  const handleChange = useCallback5((coordinateType, setText) => (event) => {
+    const inputText = event.target.value;
+    setText(inputText);
+    if (inputText !== "" && inputText !== "-") {
+      const coord = safeParseFloat(inputText);
+      if (coord !== void 0 && !isNaN(coord)) {
+        const currentLocation = GeoLocation3.fromGeoPoint(getValue() ?? [
+          0,
+          0
+        ]);
+        const newLocation = {
+          ...currentLocation,
+          [coordinateType]: coord
         };
+        const newValue = GeoLocation3.toGeoPoint(newLocation);
+        onValueChange(type, newValue);
       }
     }
+  }, [
+    type,
+    getValue,
+    onValueChange
+  ]);
+  if ((readonly || layout === "static") && !value3?.latitude && !value3?.longitude) {
+    return null;
   }
-  return void 0;
+  return /* @__PURE__ */ React7.createElement(Input3.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React7.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label,
+    asChild: true
+  }), layout === "static" ? /* @__PURE__ */ React7.createElement(LatLng, value3) : /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "grid grid-cols-2 gap-2"
+  }, /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("latitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+    type: "number",
+    step: "0.00001",
+    min: "-90",
+    max: "90",
+    disabled: !!readonly,
+    placeholder: t("latitude placeholder"),
+    value: latitudeText ?? "",
+    onChange: handleChange("latitude", setLatitudeText),
+    onBlur
+  }))), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("longitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+    type: "number",
+    step: "0.00001",
+    min: "-180",
+    max: "180",
+    disabled: !!readonly,
+    placeholder: t("longitude placeholder"),
+    value: longitudeText ?? "",
+    onChange: handleChange("longitude", setLongitudeText),
+    onBlur
+  })))));
+};
+var LatLng = ({ latitude = 0, longitude = 0 }) => {
+  const latHem = latitude >= 0 ? "N" : "S";
+  const lngHem = longitude >= 0 ? "E" : "W";
+  return /* @__PURE__ */ React7.createElement("span", {
+    className: "inline-flex items-center gap-1"
+  }, /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+    className: "text-subdued"
+  }, "\xB0", latHem)), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
+    className: "text-subdued"
+  }, "\xB0", lngHem)));
 };
 
-// src/components/Form/ArrayField.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import * as Function from "effect/Function";
-import * as SchemaAST3 from "effect/SchemaAST";
-import * as String2 from "effect/String";
-import React9, { Fragment, useCallback as useCallback8 } from "react";
-import { SimpleType, findNode as findNode2, getDiscriminatedType, isDiscriminatedUnion } 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";
-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 = _useSignals9();
-  try {
-    const { t } = useTranslation6(translationKey);
-    const { ast, name, type, title } = property;
-    const values = useFormValues(path ?? []) ?? [];
-    invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
-      F: __dxlog_file3,
-      L: 37,
-      S: void 0,
-      A: [
-        "Array.isArray(values)",
-        "`Values at path ${path?.join('.')} must be an array.`"
-      ]
-    });
-    const label = title ?? Function.pipe(name, String2.capitalize);
-    const elementType = findArrayElementType(ast);
-    const getDefaultObjectValue = (typeNode) => {
-      const baseNode = findNode2(typeNode, isDiscriminatedUnion);
-      const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode2(typeNode, SchemaAST3.isTypeLiteral);
-      if (!typeLiteral) {
-        return {};
-      }
-      return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
-        prop.name,
-        prop.defaultValue
-      ]));
-    };
-    const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-    const handleAdd = useCallback8(() => {
-      inputProps.onValueChange(type, [
-        ...values,
-        getDefaultValue()
-      ]);
-    }, [
-      type,
-      elementType,
-      inputProps,
-      values
-    ]);
-    const handleRemove = useCallback8((index) => {
-      const newValues = values.filter((_, i) => i !== index);
-      inputProps.onValueChange(type, newValues);
-    }, [
-      type,
-      inputProps,
-      values
-    ]);
-    if (!elementType) {
-      return null;
+// src/components/Form/fields/MarkdownField.tsx
+import React8, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2 } from "react";
+import { Input as Input4 } from "@dxos/react-ui";
+var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const textareaRef = useRef2(null);
+  const adjustHeight = useCallback6(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.blockSize = "auto";
+      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
     }
-    return readonly && values.length < 1 ? null : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(InputHeader, {
-      readonly: true,
-      label
-    }), /* @__PURE__ */ React9.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__ */ React9.createElement(FormField, {
-        property: {
-          ...property,
-          array: false,
-          ast: elementType
-        },
-        path: [
-          ...path ?? [],
-          index
-        ],
-        readonly,
-        inline: true,
-        Custom,
-        lookupComponent
-      });
-      return readonly ? field : /* @__PURE__ */ React9.createElement(Fragment, {
-        key: index
-      }, /* @__PURE__ */ React9.createElement("div", {
-        role: "none"
-      }, field), /* @__PURE__ */ React9.createElement(IconButton3, {
-        icon: "ph--trash--regular",
-        iconOnly: true,
-        label: t("button remove"),
-        onClick: () => handleRemove(index),
-        classNames: "self-center"
-      }));
-    })), !readonly && /* @__PURE__ */ React9.createElement(IconButton3, {
-      classNames: "is-full mlb-cardSpacingBlock flex",
-      icon: "ph--plus--regular",
-      label: t("add field"),
-      onClick: handleAdd
-    }));
-  } finally {
-    _effect.f();
+  }, []);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    adjustHeight
+  ]);
+  useEffect5(() => {
+    adjustHeight();
+  }, [
+    getValue(),
+    adjustHeight
+  ]);
+  const handleChange = useCallback6((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  const value3 = getValue();
+  if ((readonly || layout === "static") && !value3) {
+    return null;
   }
+  return /* @__PURE__ */ React8.createElement(Input4.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React8.createElement("p", null, value3) : /* @__PURE__ */ React8.createElement(Input4.TextArea, {
+    ref: textareaRef,
+    disabled: !!readonly,
+    placeholder,
+    value: value3 ?? "",
+    classNames: "min-h-auto max-h-40 overflow-auto",
+    onChange: handleChange,
+    onBlur,
+    style: {
+      resize: "none"
+    },
+    spellCheck: false
+  }), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
 };
 
-// src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo/internal";
-var getInputComponent = (type, format) => {
-  switch (format) {
-    case FormatEnum4.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum4.Markdown:
-      return MarkdownInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
-  }
+// src/components/Form/fields/NumberField.tsx
+import React9, { useCallback as useCallback7 } from "react";
+import { Input as Input5 } from "@dxos/react-ui";
+import { safeParseFloat as safeParseFloat2 } from "@dxos/util";
+var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  const handleChange = useCallback7((event) => onValueChange(type, safeParseFloat2(event.target.value) || 0), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React9.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React9.createElement(Input5.TextInput, {
+    type: "number",
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
 };
 
-// src/components/Form/RefField.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+// src/components/Form/fields/RefField.tsx
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import React11, { useCallback as useCallback10, useMemo as useMemo5 } from "react";
-import { Expando, Ref, ReferenceAnnotationId as ReferenceAnnotationId2, getTypeAnnotation } from "@dxos/echo/internal";
-import { findAnnotation as findAnnotation2 } from "@dxos/effect";
+import React11, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
+import { Entity, Filter, Obj, Ref as Ref2, Type } from "@dxos/echo";
+import { ReferenceAnnotationId } from "@dxos/echo/internal";
+import { useQuery, useSchema as useSchema$ } from "@dxos/echo-react";
+import { findAnnotation } from "@dxos/effect";
 import { DXN } from "@dxos/keys";
-import { DxAnchor, DxTagPickerItem } from "@dxos/lit-ui/react";
-import { Button as Button2, Icon as Icon3, Input as Input7, useTranslation as useTranslation8 } from "@dxos/react-ui";
-import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
-import { isNonNullable as isNonNullable2 } from "@dxos/util";
+import { DxAnchor } from "@dxos/lit-ui/react";
+import { Button, Icon as Icon2, Input as Input6, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import React10, { forwardRef, useCallback as useCallback9, useMemo as useMemo4, useState as useState5 } from "react";
-import { Icon as Icon2, Popover, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { Combobox } from "@dxos/react-ui-searchlist";
-var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
-  var _effect = _useSignals10();
-  try {
-    const { t } = useTranslation7(translationKey);
-    const [searchString, setSearchString] = useState5("");
-    const [showForm, setShowForm] = useState5(false);
-    const handleFormSave = useCallback9((values) => {
-      onCreate?.(values);
-      setShowForm(false);
-      setSearchString("");
-    }, [
-      onCreate
-    ]);
-    const handleFormCancel = useCallback9(() => {
-      setShowForm(false);
-      setSearchString("");
-    }, []);
-    const handleClick = useCallback9((event) => {
-      if (createSchema && event.target.closest('[data-value="__create__"]')) {
-        event.stopPropagation();
-        event.preventDefault();
-        setShowForm(true);
-      }
-    }, [
-      createSchema
-    ]);
-    const handleKeyDown = useCallback9((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 = useMemo4(() => options.reduce((acc, option) => {
-      acc[option.id.toLowerCase()] = option.label.toLowerCase();
-      return acc;
-    }, {}), [
-      options
-    ]);
-    return /* @__PURE__ */ React10.createElement(Combobox.Content, {
-      ...props,
-      ref,
-      filter: (value2, search) => value2 === "__create__" || labelById[value2]?.includes(search.toLowerCase()) ? 1 : 0,
-      onClickCapture: handleClick,
-      onKeyDownCapture: handleKeyDown
-    }, showForm && createSchema ? /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form, {
-      schema: createSchema,
-      values: createInitialValuePath ? {
-        [createInitialValuePath]: searchString
-      } : {},
-      onSave: handleFormSave,
-      onCancel: handleFormCancel,
-      testId: "create-referenced-object-form"
-    })) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Combobox.Input, {
-      placeholder: t("ref field combobox input placeholder"),
-      value: searchString,
-      onValueChange: setSearchString,
-      autoFocus: true
-    }), /* @__PURE__ */ React10.createElement(Combobox.List, null, options.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
-      key: option.id,
-      value: option.id,
-      onSelect: () => onSelect(option.id),
-      classNames: "flex items-center gap-2"
-    }, /* @__PURE__ */ React10.createElement("span", {
-      className: "grow"
-    }, option.label), selectedIds?.includes(option.id) && /* @__PURE__ */ React10.createElement(Icon2, {
-      icon: "ph--check--regular"
-    }))), searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React10.createElement(Combobox.Item, {
-      value: "__create__",
-      classNames: "flex items-center gap-2"
-    }, /* @__PURE__ */ React10.createElement(Icon2, {
-      icon: createOptionIcon
-    }), t(createOptionLabel[0], {
+import React10, { forwardRef as forwardRef2, useCallback as useCallback8, useState as useState3 } from "react";
+import { Popover, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-searchlist";
+var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+  const { t } = useTranslation5(translationKey);
+  const { query } = useSearchListInput();
+  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
+    value: "__create__",
+    label: t(createOptionLabel[0], {
       ns: createOptionLabel[1].ns,
-      text: searchString
-    })))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
-  } finally {
-    _effect.f();
-  }
+      text: query
+    }),
+    icon: createOptionIcon,
+    classNames: "flex items-center gap-2",
+    closeOnSelect: false,
+    onSelect: () => {
+      onCreateItemSelect(query);
+    }
+  });
+};
+var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
+  const { t } = useTranslation5(translationKey);
+  const [showForm, setShowForm] = useState3(false);
+  const [formInitialValue, setFormInitialValue] = useState3("");
+  const { results, handleSearch } = useSearchListResults({
+    items: options
+  });
+  const handleFormSave = useCallback8((values) => {
+    onCreate?.(values);
+    setShowForm(false);
+    setFormInitialValue("");
+  }, [
+    onCreate
+  ]);
+  const handleFormCancel = useCallback8(() => {
+    setShowForm(false);
+    setFormInitialValue("");
+  }, []);
+  const handleKeyDown = useCallback8((event) => {
+    if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
+      event.stopPropagation();
+      event.preventDefault();
+      const input = event.currentTarget.querySelector('input[type="text"]');
+      const currentQuery = input?.value || "";
+      setFormInitialValue(currentQuery);
+      setShowForm(true);
+    }
+  }, [
+    createSchema
+  ]);
+  return /* @__PURE__ */ React10.createElement(Combobox.Content, {
+    ...props,
+    ref,
+    onSearch: handleSearch,
+    onKeyDownCapture: handleKeyDown
+  }, showForm && createSchema ? /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
+    testId: "create-referenced-object-form",
+    schema: createSchema,
+    values: createInitialValuePath ? {
+      [createInitialValuePath]: formInitialValue
+    } : {},
+    onSave: handleFormSave,
+    onCancel: handleFormCancel
+  }, /* @__PURE__ */ React10.createElement(Form.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Content, null, /* @__PURE__ */ React10.createElement(Form.FieldSet, null), /* @__PURE__ */ React10.createElement(Form.Actions, null))))) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Combobox.Input, {
+    placeholder: t("ref field combobox input placeholder"),
+    autoFocus: true
+  }), /* @__PURE__ */ React10.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
+    key: option.id,
+    value: option.id,
+    label: option.label,
+    checked: selectedIds?.includes(option.id),
+    onSelect: () => onSelect(option.id),
+    classNames: "flex items-center gap-2"
+  })), createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
+    createOptionLabel,
+    createOptionIcon,
+    onCreateItemSelect: (query) => {
+      setFormInitialValue(query);
+      setShowForm(true);
+    }
+  }))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
 });
 ObjectPickerContent.displayName = "ObjectPickerContent";
 var ObjectPicker = {
   Root: Combobox.Root,
+  Portal: Combobox.Portal,
   Trigger: Combobox.Trigger,
   VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent
 };
 
-// src/components/Form/RefField.tsx
-var isRefSnapShot = (val) => {
+// src/components/Form/fields/RefField.tsx
+var isRefSnapshot = (val) => {
   return typeof val === "object" && typeof val?.["/"] === "string";
 };
-var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, getValue: getValue3, createOptionLabel, createOptionIcon, onBlur, onCreate, createSchema, createInitialValuePath, onQueryRefOptions, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
-  try {
-    const { t } = useTranslation8(translationKey);
-    const refTypeInfo = useMemo5(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
-      ast
-    ]);
-    const { options: availableOptions, update: updateOptions, loading: _loading } = useQueryRefOptions({
-      refTypeInfo,
-      onQueryRefOptions
-    });
-    if (refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-      return /* @__PURE__ */ React11.createElement(RefFieldFallback, {
-        type,
-        label,
-        placeholder,
-        readonly,
-        inputOnly,
-        getValue: getValue3,
-        onBlur,
-        onValueChange,
-        ...restInputProps
-      });
-    }
-    const handleGetValue = useCallback10(() => {
-      const formValue = getValue3();
-      const unknownToRefOption = (val) => {
-        const isRef = Ref.isRef(val);
-        if (isRef || isRefSnapShot(val)) {
-          const dxnString = isRef ? val.dxn.toString() : val["/"];
-          const matchingOption = availableOptions.find((option2) => option2.id === dxnString);
-          if (matchingOption) {
-            return matchingOption;
-          }
-        }
-        return void 0;
-      };
-      if (array && Array.isArray(formValue)) {
-        return formValue.map(unknownToRefOption).filter(isNonNullable2) ?? [];
-      }
-      const option = unknownToRefOption(formValue);
-      if (option) {
-        return [
-          option
-        ];
-      }
-      return [];
-    }, [
-      getValue3,
-      availableOptions,
-      array
-    ]);
-    const handleUpdate = useCallback10((ids) => {
-      if (ids.length === 0) {
-        onValueChange("object", void 0);
-        return;
-      }
-      const refs = ids.map((id) => {
-        const item = availableOptions.find((option) => option.id === id);
-        if (item) {
-          const dxn = DXN.parse(item.id);
-          return Ref.fromDXN(dxn);
+var defaultGetOptions = (results) => results.map((result) => {
+  const id = Entity.getDXN(result).toString();
+  const label = Entity.getLabel(result);
+  return {
+    id,
+    label: label ?? id
+  };
+});
+var defaultResultsHook = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj.Unknown) ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
+var RefField = (props) => {
+  const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, db, resultsHook: useResults = defaultResultsHook, schemaHook: useSchema = useSchema$, getOptions: getOptions2 = defaultGetOptions, onCreate, onValueChange } = props;
+  const { t } = useTranslation6(translationKey);
+  const { status, error } = getStatus();
+  const typename = useMemo6(() => type ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
+    type
+  ]);
+  const results = useResults(db, typename);
+  const options = useMemo6(() => getOptions2(results), [
+    results,
+    getOptions2
+  ]);
+  const handleGetValue = useCallback9(() => {
+    const formValue = getValue();
+    const unknownToRefOption = (value3) => {
+      const isRef = Ref2.isRef(value3);
+      if (isRef || isRefSnapshot(value3)) {
+        const dxnString = isRef ? value3.dxn.toString() : value3["/"];
+        const matchingOption = options.find((option) => option.id === dxnString);
+        if (matchingOption) {
+          return matchingOption;
         }
-        return null;
-      }).filter(isNonNullable2);
-      if (array) {
-        onValueChange("object", refs);
-      } else {
-        onValueChange("object", refs[0]);
       }
-    }, [
-      availableOptions,
-      array,
-      onValueChange
-    ]);
-    const handleCreate = useCallback10((values) => {
-      onCreate?.(values);
-      updateOptions();
-    }, [
-      onCreate,
-      updateOptions
-    ]);
-    if (!refTypeInfo) {
-      return null;
+      return void 0;
+    };
+    return unknownToRefOption(formValue);
+  }, [
+    options,
+    getValue
+  ]);
+  const handleUpdate = useCallback9((id) => {
+    const item2 = options.find((option) => option.id === id);
+    const ref = item2 ? Ref2.fromDXN(DXN.parse(item2.id)) : void 0;
+    onValueChange(type, ref);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const item = handleGetValue();
+  const selectedIds = useMemo6(() => item ? [
+    item.id
+  ] : [], [
+    item
+  ]);
+  const createSchema = useSchema(db, typename);
+  const handleCreate = useCallback9((values) => {
+    if (createSchema && onCreate) {
+      onCreate(createSchema, values);
     }
-    const { status, error } = restInputProps.getStatus();
-    const items = handleGetValue();
-    const selectedIds = useMemo5(() => items.map((i) => i.id), [
-      items
-    ]);
-    const toggleSelect = useCallback10((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
-    ]);
-    return readonly && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input7.Root, {
-      validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
-      error,
-      label
-    }), /* @__PURE__ */ React11.createElement("div", {
-      "data-no-submit": true
-    }, readonly ? items.length < 1 ? /* @__PURE__ */ React11.createElement("p", {
-      className: mx5(descriptionText, "mbe-2")
-    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React11.createElement(DxAnchor, {
-      key: item.id,
-      refid: item.id,
-      rootclassname: "mie-1"
-    }, item.label)) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React11.createElement(Button2, {
-      variant: "ghost",
-      classNames: "is-full text-start gap-2"
-    }, /* @__PURE__ */ React11.createElement("div", {
-      role: "none",
-      className: "grow"
-    }, items?.length ? items?.map((item) => /* @__PURE__ */ React11.createElement(DxTagPickerItem, {
-      key: item.id,
-      itemId: item.id,
-      label: item.label,
-      ...item.hue ? {
-        hue: item.hue
-      } : {},
-      removeLabel: t("remove item label"),
-      onItemClick: (event) => {
-        if (event.action === "remove") {
-          toggleSelect(item.id);
-        }
-      }
-    })) : /* @__PURE__ */ React11.createElement("span", {
-      className: "text-description"
-    }, placeholder ?? t("ref field placeholder", {
-      count: array ? 99 : 1
-    }))), /* @__PURE__ */ React11.createElement(Icon3, {
-      size: 3,
-      icon: "ph--caret-down--bold"
-    }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
-      options: availableOptions,
-      selectedIds,
-      onSelect: toggleSelect,
-      createSchema,
-      createOptionLabel,
-      createOptionIcon,
-      createInitialValuePath,
-      onCreate: handleCreate
-    }))), inputOnly && /* @__PURE__ */ React11.createElement(Input7.DescriptionAndValidation, null, error));
-  } finally {
-    _effect.f();
+  }, [
+    createSchema,
+    onCreate
+  ]);
+  const handleSelect = useCallback9((id) => {
+    if (item?.id === id) {
+      handleUpdate(void 0);
+    } else {
+      handleUpdate(id);
+    }
+  }, [
+    item,
+    handleUpdate
+  ]);
+  if (!typename || (readonly || layout === "static") && !item) {
+    return null;
   }
+  return /* @__PURE__ */ React11.createElement(Input6.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React11.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React11.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React11.createElement("p", {
+    className: mx3("text-description", "mb-2")
+  }, t("empty readonly ref field label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
+    key: item.id,
+    dxn: item.id,
+    rootclassname: "me-1"
+  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
+    asChild: true,
+    classNames: "p-0"
+  }, item ? /* @__PURE__ */ React11.createElement("div", {
+    className: "flex gap-2 w-full"
+  }, /* @__PURE__ */ React11.createElement(Input6.Root, {
+    key: item.id
+  }, /* @__PURE__ */ React11.createElement(Input6.TextInput, {
+    value: item.label,
+    readOnly: true,
+    classNames: "w-full"
+  }))) : /* @__PURE__ */ React11.createElement(Button, {
+    classNames: "w-full text-start gap-2"
+  }, /* @__PURE__ */ React11.createElement("div", {
+    role: "none",
+    className: "grow overflow-hidden"
+  }, /* @__PURE__ */ React11.createElement("span", {
+    className: "flex truncate text-description"
+  }, placeholder ?? t("ref field placeholder"))), /* @__PURE__ */ React11.createElement(Icon2, {
+    size: 3,
+    icon: "ph--caret-down--bold"
+  }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
+    classNames: "dx-card-popover-width",
+    options,
+    selectedIds,
+    createSchema: createSchema && omitId(createSchema),
+    createOptionLabel,
+    createOptionIcon,
+    createInitialValuePath,
+    onCreate: handleCreate,
+    onSelect: handleSelect
+  })))), layout === "full" && /* @__PURE__ */ React11.createElement(Input6.DescriptionAndValidation, null, error));
 };
-var RefFieldFallback = ({ type, label, readonly, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
-  try {
-    const handleOnValueChange = (_type, dxnString) => {
-      const dxn = DXN.tryParse(dxnString);
-      if (dxn) {
-        onValueChange?.("object", Ref.fromDXN(dxn));
-      } else if (dxnString === "") {
-        onValueChange?.("object", void 0);
-      } else {
-        onValueChange?.("string", dxnString);
-      }
-    };
-    const handleGetValue = () => {
-      const formValue = getValue3();
-      if (typeof formValue === "string") {
-        return formValue;
-      }
-      if (Ref.isRef(formValue)) {
-        return formValue.dxn.toString();
-      }
-      return void 0;
-    };
-    return /* @__PURE__ */ React11.createElement(TextInput, {
-      type,
-      label,
-      readonly,
-      placeholder,
-      inputOnly,
-      getValue: handleGetValue,
-      onValueChange: handleOnValueChange,
-      ...restInputProps
-    });
-  } finally {
-    _effect.f();
+
+// src/components/Form/fields/SelectField.tsx
+import React12, { useCallback as useCallback10 } from "react";
+import { Input as Input7, Select } from "@dxos/react-ui";
+var SelectField = ({ type, readonly, label, layout, placeholder, options, getStatus, getValue, onValueChange }) => {
+  const { status, error } = getStatus();
+  const value3 = getValue();
+  const handleValueChange = useCallback10((value4) => onValueChange(type, value4), [
+    type,
+    onValueChange
+  ]);
+  if ((readonly || layout === "static") && value3 == null) {
+    return null;
   }
+  return /* @__PURE__ */ React12.createElement(Input7.Root, {
+    validationValence: status
+  }, layout !== "inline" && /* @__PURE__ */ React12.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), layout === "static" ? /* @__PURE__ */ React12.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value3)?.label ?? String(value3)) : /* @__PURE__ */ React12.createElement(Select.Root, {
+    value: value3,
+    onValueChange: handleValueChange
+  }, /* @__PURE__ */ React12.createElement(Select.TriggerButton, {
+    classNames: "w-full",
+    disabled: !!readonly,
+    placeholder
+  }), /* @__PURE__ */ React12.createElement(Select.Portal, null, /* @__PURE__ */ React12.createElement(Select.Content, null, /* @__PURE__ */ React12.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
+    // NOTE: Numeric values are converted to and from strings.
+    /* @__PURE__ */ React12.createElement(Select.Option, {
+      key: String(value4),
+      value: String(value4)
+    }, label2 ?? String(value4))
+  ))), /* @__PURE__ */ React12.createElement(Select.Arrow, null)))), layout === "full" && /* @__PURE__ */ React12.createElement(Input7.DescriptionAndValidation, null, error));
 };
 
-// src/components/Form/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptions, createOptionLabel, createOptionIcon, onCreate, createSchema, createInitialValuePath, lookupComponent, Custom }) => {
-  var _effect = _useSignals12();
-  try {
-    const { ast, name, type, format, title, description, options, examples, array } = property;
-    const inputProps = useInputProps(path);
-    const label = useMemo6(() => title ?? Function2.pipe(name, StringEffect.capitalize), [
-      title,
-      name
-    ]);
-    const placeholder = useMemo6(() => examples?.length ? `Example: "${examples[0]}"` : description, [
-      examples,
-      description
-    ]);
-    const FoundComponent = lookupComponent?.({
-      prop: name,
-      schema: Schema.make(ast),
-      inputProps: {
-        type,
-        format,
-        label,
-        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,
-        readonly,
-        ...inputProps
-      });
-    }
-    const refProps = getRefProps(property);
-    if (refProps) {
-      return /* @__PURE__ */ React12.createElement(RefField, {
-        ast: refProps.ast,
-        array: refProps.isArray,
-        type,
-        format,
-        label,
-        placeholder,
-        readonly,
-        inputOnly: inline,
-        onQueryRefOptions,
-        createOptionLabel,
-        createOptionIcon,
-        onCreate,
-        createSchema,
-        createInitialValuePath,
-        ...inputProps
-      });
-    }
-    if (array) {
-      return /* @__PURE__ */ React12.createElement(ArrayField, {
-        property,
-        path,
-        inputProps,
-        readonly,
-        Custom
-      });
+// src/components/Form/fields/SelectOptionField.tsx
+import React13, { useCallback as useCallback11, useEffect as useEffect6, useRef as useRef3, useState as useState4 } from "react";
+import { PublicKey } from "@dxos/keys";
+import { IconButton as IconButton3, Input as Input8, Tag, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { List } from "@dxos/react-ui-list";
+import { HuePicker } from "@dxos/react-ui-pickers";
+import { hues, osTranslations, subtleHover } from "@dxos/ui-theme";
+var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
+  const { t } = useTranslation7(translationKey);
+  const { status, error } = getStatus();
+  const [selected, setSelectedId] = useState4(null);
+  const [isNewOption, setIsNewOption] = useState4(false);
+  const inputRef = useRef3(null);
+  const options = getValue();
+  useEffect6(() => {
+    if (options === void 0) {
+      onValueChange(type, []);
     }
-    const InputComponent = getInputComponent(type, format);
-    if (InputComponent) {
-      return /* @__PURE__ */ React12.createElement(InputComponent, {
-        type,
-        format,
-        label,
-        inputOnly: inline,
-        placeholder,
-        readonly,
-        ...inputProps
-      });
+  }, [
+    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)];
     }
-    if (options) {
-      return /* @__PURE__ */ React12.createElement(SelectInput, {
-        type,
-        format,
-        readonly,
-        inputOnly: inline,
-        label,
-        options: options.map((option) => ({
-          value: option,
-          label: String(option)
-        })),
-        placeholder,
-        ...inputProps
-      });
+    const lastThree = new Set(options?.slice(-3).map((option) => option.color) ?? []);
+    const availableHues = hues.filter((hue) => !lastThree.has(hue));
+    return availableHues[Math.floor(Math.random() * availableHues.length)] ?? hues[Math.floor(Math.random() * hues.length)];
+  };
+  const handleAdd = useCallback11(() => {
+    const newId = PublicKey.random().truncate();
+    const newOption = {
+      id: newId,
+      title: "",
+      color: randomHue()
+    };
+    onValueChange(type, [
+      ...options ?? [],
+      newOption
+    ]);
+    setSelectedId(newId);
+    setIsNewOption(true);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleDelete = useCallback11((id) => {
+    const newOptions = options?.filter((option) => option.id !== id) ?? [];
+    onValueChange(type, newOptions);
+    setSelectedId(null);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleMove = useCallback11((from, to) => {
+    if (!options) {
+      return;
     }
-    if (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: mx6("text-lg mlb-inputSpacingBlock first:mbs-0")
-        }, label), /* @__PURE__ */ React12.createElement(FormFields, {
-          schema: Schema.make(typeLiteral),
-          path,
-          readonly,
-          projection,
-          onQueryRefOptions,
-          createOptionLabel,
-          createOptionIcon,
-          onCreate,
-          Custom,
-          lookupComponent
-        }));
-      }
+    const newOptions = [
+      ...options
+    ];
+    const [removed] = newOptions.splice(from, 1);
+    newOptions.splice(to, 0, removed);
+    onValueChange(type, newOptions);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleClick = useCallback11((id) => {
+    setSelectedId((current) => current === id ? null : id);
+  }, []);
+  const handleTitleChange = useCallback11((id) => (e) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      title: e.target.value
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  const handleKeyDown = useCallback11((ev) => {
+    if (ev.key === "Enter") {
+      setSelectedId(null);
     }
-    return null;
-  } finally {
-    _effect.f();
-  }
+  }, []);
+  const handleColorChange = useCallback11((id) => (hue) => {
+    const newOptions = options?.map((o) => o.id === id ? {
+      ...o,
+      color: hue
+    } : o);
+    onValueChange(type, newOptions ?? []);
+  }, [
+    options,
+    type,
+    onValueChange
+  ]);
+  useEffect6(() => {
+    if (selected && isNewOption && inputRef.current) {
+      inputRef.current.focus();
+      setIsNewOption(false);
+    }
+  }, [
+    selected,
+    isNewOption
+  ]);
+  return /* @__PURE__ */ React13.createElement(Input8.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React13.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React13.createElement("div", {
+    role: "none"
+  }, options && /* @__PURE__ */ React13.createElement(List.Root, {
+    items: options,
+    isItem: (_item) => true,
+    onMove: readonly ? void 0 : handleMove,
+    readonly: !!readonly
+  }, ({ items }) => /* @__PURE__ */ React13.createElement("div", {
+    role: "list",
+    className: "w-full overflow-auto"
+  }, items?.map((item) => /* @__PURE__ */ React13.createElement("div", {
+    key: item.id
+  }, /* @__PURE__ */ React13.createElement(List.Item, {
+    role: "button",
+    item,
+    classNames: [
+      subtleHover,
+      "flex flex-col cursor-pointer rounded-xs"
+    ],
+    "aria-expanded": selected === item.id
+  }, /* @__PURE__ */ React13.createElement("div", {
+    className: "flex items-center"
+  }, /* @__PURE__ */ React13.createElement(List.ItemDragHandle, {
+    disabled: !!readonly
+  }), /* @__PURE__ */ React13.createElement(List.ItemTitle, {
+    onClick: () => handleClick(item.id),
+    classNames: "flex-1"
+  }, /* @__PURE__ */ React13.createElement(Tag, {
+    palette: item.color
+  }, item.title || "\u200B")), /* @__PURE__ */ React13.createElement(IconButton3, {
+    iconOnly: true,
+    variant: "ghost",
+    label: t(selected === item.id ? "collapse label" : "expand label", {
+      ns: osTranslations
+    }),
+    icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+    onClick: () => handleClick(item.id)
+  })), selected === item.id && /* @__PURE__ */ React13.createElement("div", {
+    className: "flex flex-col p-form-padding gap-1 dx-density-fine"
+  }, /* @__PURE__ */ React13.createElement(Input8.Label, {
+    classNames: "text-xs"
+  }, t("select option label")), /* @__PURE__ */ React13.createElement("div", {
+    className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
+  }, /* @__PURE__ */ React13.createElement(Input8.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__ */ React13.createElement(HuePicker, {
+    disabled: !!readonly,
+    value: item.color,
+    onChange: handleColorChange(item.id)
+  }), /* @__PURE__ */ React13.createElement(IconButton3, {
+    disabled: !!readonly,
+    icon: "ph--trash--fill",
+    iconOnly: true,
+    label: t("select option delete"),
+    onClick: () => handleDelete(item.id)
+  })))))), /* @__PURE__ */ React13.createElement(IconButton3, {
+    variant: "ghost",
+    icon: "ph--plus--regular",
+    label: t("select option add"),
+    onClick: handleAdd,
+    disabled: !!readonly,
+    classNames: "w-full"
+  })))));
 };
-var FormFields = /* @__PURE__ */ forwardRef2(({ classNames, schema, path, filter, sort, projection, readonly, lookupComponent, Custom, onQueryRefOptions, ...props }, forwardRef4) => {
-  var _effect = _useSignals12();
-  try {
-    const values = useFormValues(path);
-    const properties = useMemo6(() => {
-      const props2 = getSchemaProperties2(schema.ast, values);
-      if (projection) {
-        const fieldProjections = projection.getFieldProjections();
-        const hiddenProperties = new Set(projection.getHiddenProperties());
-        const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name));
-        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((fp) => String(fp.field.path)));
-        const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name));
-        orderedProps.push(...remainingProps);
-        return orderedProps;
-      }
-      const filtered = filter ? filter(props2) : props2;
-      return sort ? filtered.sort((a, b) => sort.indexOf(a.name) - sort.indexOf(b.name)) : filtered;
-    }, [
-      schema,
-      values,
-      filter,
-      sort,
-      projection?.fields
-    ]);
-    return /* @__PURE__ */ React12.createElement("div", {
-      role: "form",
-      className: mx6("is-full", classNames),
-      ref: forwardRef4
-    }, properties.map((property) => {
-      return /* @__PURE__ */ React12.createElement(FormField, {
-        key: property.name,
-        property,
-        path: [
-          ...path ?? [],
-          property.name
-        ],
-        readonly,
-        projection,
-        onQueryRefOptions,
-        lookupComponent,
-        Custom,
-        ...props
-      });
-    }).filter(isTruthy));
-  } finally {
-    _effect.f();
-  }
-});
 
-// src/components/Form/Form.tsx
-var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, schema, onCancel, onValuesChanged, onValidate, onSave, ...props }) => {
-  var _effect = _useSignals13();
-  try {
-    const formRef = useRef3(null);
-    const { findFirstFocusable } = useFocusFinders();
-    useEffect7(() => {
-      if (autoFocus && formRef.current) {
-        const firstFocusable = findFirstFocusable(formRef.current);
-        if (firstFocusable) {
-          firstFocusable.focus();
-        }
-      }
-    }, [
-      autoFocus
-    ]);
-    const handleValid = useCallback11(async (values, meta) => {
-      if (autoSave) {
-        await onSave?.(values, meta);
-      }
-    }, [
-      autoSave,
-      onSave
-    ]);
-    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 && !readonly && /* @__PURE__ */ React13.createElement(FormActions, {
-      readonly,
-      onCancel,
-      outerSpacing
-    })));
-  } finally {
-    _effect.f();
-  }
+// src/components/Form/fields/TextField.tsx
+import React14, { useCallback as useCallback12 } from "react";
+import { Input as Input9 } from "@dxos/react-ui";
+var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React14.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React14.createElement(Input9.TextInput, {
+    noAutoFill: true,
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
+};
+
+// src/components/Form/fields/TextAreaField.tsx
+import React15, { useCallback as useCallback13 } from "react";
+import { Input as Input10 } from "@dxos/react-ui";
+var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+  const handleChange = useCallback13((event) => onValueChange(type, event.target.value), [
+    type,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React15.createElement(FormFieldWrapper, {
+    readonly,
+    ...props
+  }, ({ value: value3 = "" }) => /* @__PURE__ */ React15.createElement(Input10.TextArea, {
+    rows: 3,
+    disabled: !!readonly,
+    placeholder,
+    value: value3,
+    onChange: handleChange,
+    onBlur
+  }));
+};
+
+// src/components/Form/fields/TupleField.tsx
+import React16 from "react";
+import { Input as Input11 } from "@dxos/react-ui";
+import { mx as mx4 } from "@dxos/ui-theme";
+import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
+var gridCols = [
+  "grid-cols-1",
+  "grid-cols-2",
+  "grid-cols-3",
+  "grid-cols-4"
+];
+var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValueChange, onBlur }) => {
+  const { status, error } = getStatus();
+  const values = getValue() ?? {};
+  return /* @__PURE__ */ React16.createElement(Input11.Root, {
+    validationValence: status
+  }, /* @__PURE__ */ React16.createElement(FormFieldLabel, {
+    error,
+    readonly,
+    label
+  }), /* @__PURE__ */ React16.createElement("div", {
+    className: mx4("grid gap-2", gridCols[binding.length - 1])
+  }, binding.map((prop) => /* @__PURE__ */ React16.createElement(Input11.TextInput, {
+    key: prop,
+    type: "number",
+    disabled: !!readonly,
+    value: values[prop],
+    onChange: (event) => {
+      onValueChange(type, {
+        ...values,
+        [prop]: safeParseFloat3(event.target.value, 0)
+      });
+    },
+    onBlur
+  }))));
 };
 
 // src/components/FieldEditor/FieldEditor.tsx
-var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, outerSpacing }) => {
-  var _effect = _useSignals14();
-  try {
-    const { t } = useTranslation9(translationKey);
-    const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
-    useEffect8(() => setProps(projection.getFieldProjection(field.id).props), [
-      field,
-      projection
-    ]);
-    const [schemas, setSchemas] = useState6([]);
-    useAsyncEffect(async () => {
-      if (!registry) {
-        return;
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
+var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
+  const { t } = useTranslation8(translationKey);
+  const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
+  useEffect7(() => setProps(projection.getFieldProjection(field.id).props), [
+    field,
+    projection
+  ]);
+  const [schemas, setSchemas] = useState5([]);
+  useAsyncEffect(async () => {
+    if (!registry) {
+      return;
+    }
+    const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
+      fire: true
+    });
+    const schemas2 = await registry.query().run();
+    setSchemas(schemas2);
+    return () => subscription?.();
+  }, [
+    registry
+  ]);
+  const [referenceSchema, setReferenceSchema] = useState5();
+  useEffect7(() => {
+    setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
+  }, [
+    schemas,
+    props?.referenceSchema
+  ]);
+  const [{ fieldSchema }, setFieldSchema] = useState5({
+    fieldSchema: getFormatSchema(props?.format)
+  });
+  const fieldMap = useMemo7(() => ({
+    ["format"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
+      ...props2,
+      options: FormatEnums.filter((value3) => value3 !== Format4.TypeFormat.None).map((value3) => ({
+        value: value3,
+        label: t(`format ${value3}`)
+      }))
+    }),
+    ["referenceSchema"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
+      ...props2,
+      options: schemas.map((schema) => ({
+        value: schema.typename
+      }))
+    }),
+    ["referencePath"]: (props2) => /* @__PURE__ */ React17.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__ */ React17.createElement(SelectOptionField, props2)
+  }), [
+    t,
+    schemas,
+    referenceSchema
+  ]);
+  const propIsNotType = useCallback14((props2) => props2.filter((prop) => prop.name !== "type"), []);
+  const handleValuesChanged = useCallback14((_props) => {
+    setFieldSchema((prev) => {
+      const fieldSchema2 = getFormatSchema(_props.format);
+      if (prev.fieldSchema === fieldSchema2) {
+        return prev;
       }
-      const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
-        fire: true
-      });
-      const schemas2 = await registry.query().run();
-      setSchemas(schemas2);
-      return () => subscription?.();
-    }, [
-      registry
-    ]);
-    const [referenceSchema, setReferenceSchema] = useState6();
-    useEffect8(() => {
-      setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
-    }, [
-      schemas,
-      props?.referenceSchema
-    ]);
-    const [{ fieldSchema }, setFieldSchema] = useState6({
-      fieldSchema: getFormatSchema(props?.format)
+      return {
+        fieldSchema: fieldSchema2
+      };
     });
-    const handleValuesChanged = useCallback12((_props) => {
-      setFieldSchema((prev) => {
-        const fieldSchema2 = getFormatSchema(_props.format);
-        if (prev.fieldSchema === fieldSchema2) {
-          return prev;
+    setReferenceSchema((prev) => {
+      if (_props.referenceSchema !== prev?.typename) {
+        const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
+        if (newSchema) {
+          return newSchema;
         }
+      }
+      return prev;
+    });
+    setProps((props2) => {
+      const type = formatToType[_props.format];
+      const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
+      if (props2.type !== type) {
         return {
-          fieldSchema: fieldSchema2
+          ...props2,
+          ..._props,
+          ...additionalProps,
+          type
         };
-      });
-      setReferenceSchema((prev) => {
-        if (_props.referenceSchema !== prev?.typename) {
-          const newSchema = schemas.find((schema) => schema.typename === _props.referenceSchema);
-          if (newSchema) {
-            return newSchema;
-          }
-        }
-        return prev;
-      });
-      setProps((props2) => {
-        const type = formatToType[_props.format];
-        const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
-        if (props2.type !== type) {
-          return {
-            ...props2,
-            ..._props,
-            ...additionalProps,
-            type
-          };
+      }
+      return _props;
+    });
+  }, [
+    schemas,
+    props.format,
+    props.referenceSchema
+  ]);
+  const handleValidate = useCallback14(({ property }) => {
+    if (property && projection.getFields().find((f) => f.path === property && f.path !== field.path)) {
+      return [
+        {
+          path: "property",
+          message: `property is not unique: '${property}'`
         }
-        return _props;
+      ];
+    }
+  }, [
+    projection.getFields(),
+    field
+  ]);
+  const handleSave = useCallback14((props2) => {
+    if (view) {
+      Obj2.change(view, () => {
+        projection.setFieldProjection({
+          field,
+          props: props2
+        });
       });
-    }, [
-      schemas,
-      props.format,
-      props.referenceSchema
-    ]);
-    const handleValidate = useCallback12(({ property }) => {
-      if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
-        return [
-          {
-            path: "property",
-            message: `property is not unique: '${property}'`
-          }
-        ];
-      }
-    }, [
-      projection.fields,
-      field
-    ]);
-    const handleSave = useCallback12((props2) => {
+    } else {
       projection.setFieldProjection({
         field,
         props: props2
       });
-      onSave();
-    }, [
-      projection,
-      field,
-      onSave
-    ]);
-    const handleCancel = useCallback12(() => {
-      requestAnimationFrame(() => onCancel?.());
-      onSave();
-    }, [
-      onSave
-    ]);
-    const custom = useMemo7(() => ({
-      ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
-        ...props2,
-        options: FormatEnums.filter((value2) => value2 !== FormatEnum5.None).map((value2) => ({
-          value: value2,
-          label: t(`format ${value2}`)
-        }))
-      }),
-      ["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 = useCallback12((props2) => props2.filter((p) => p.name !== "type"), []);
-    if (!fieldSchema) {
-      log3.warn("invalid format", {
-        props
-      }, {
-        F: __dxlog_file4,
-        L: 180,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
-      return null;
     }
-    return /* @__PURE__ */ React14.createElement(Form, {
-      key: field.id,
-      autoFocus: true,
-      readonly,
-      values: props,
-      schema: fieldSchema,
-      filter: propIsNotType,
-      sort: [
-        "property",
-        "format"
-      ],
-      onValuesChanged: handleValuesChanged,
-      onValidate: handleValidate,
-      onSave: handleSave,
-      onCancel: handleCancel,
-      Custom: custom,
-      outerSpacing
+    onSave();
+  }, [
+    projection,
+    field,
+    view,
+    onSave
+  ]);
+  const handleCancel = useCallback14(() => {
+    onSave();
+    requestAnimationFrame(() => onCancel?.());
+  }, [
+    onSave
+  ]);
+  if (!fieldSchema) {
+    log2.warn("invalid format", {
+      props
+    }, {
+      F: __dxlog_file2,
+      L: 172,
+      S: void 0,
+      C: (f, a) => f(...a)
     });
-  } finally {
-    _effect.f();
+    return null;
   }
+  return /* @__PURE__ */ React17.createElement(Form.Root, {
+    key: field.id,
+    fieldMap,
+    autoFocus: true,
+    readonly,
+    schema: fieldSchema,
+    values: props,
+    exclude: propIsNotType,
+    sort: [
+      "property",
+      "format"
+    ],
+    onValuesChanged: handleValuesChanged,
+    onValidate: handleValidate,
+    onSave: handleSave,
+    onCancel: handleCancel
+  }, /* @__PURE__ */ React17.createElement(Form.Content, null, /* @__PURE__ */ React17.createElement(Form.FieldSet, null), /* @__PURE__ */ React17.createElement(Form.Actions, null)));
+};
+
+// src/components/Settings/Settings.tsx
+import React18 from "react";
+import { Button as Button2, Input as Input12, ScrollArea as ScrollArea2, toLocalizedString, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/ui-theme";
+var SETTINGS_ROOT_NAME = "Settings.Root";
+var SETTINGS_SECTION_NAME = "Settings.Section";
+var SETTINGS_SECTION_HEADING_NAME = "Settings.SectionHeading";
+var SETTINGS_GROUP_NAME = "Settings.Group";
+var SETTINGS_GROUP_BUTTON_NAME = "Settings.GroupButton";
+var SETTINGS_CONTAINER_NAME = "Settings.Container";
+var SETTINGS_FRAME_NAME = "Settings.Frame";
+var SETTINGS_FRAME_ITEM_NAME = "Settings.FrameItem";
+var SETTINGS_ITEM_NAME = "Settings.Item";
+var SETTINGS_ITEM_INPUT_NAME = "Settings.ItemInput";
+var styles = {
+  title: "pb-trim-md text-base-surface-text text-lg",
+  description: "text-base text-description",
+  grid: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg"
+};
+var SettingsRoot = ({ children }) => {
+  return /* @__PURE__ */ React18.createElement(ScrollArea2.Root, {
+    orientation: "vertical",
+    className: "dx-article"
+  }, /* @__PURE__ */ React18.createElement(ScrollArea2.Viewport, {
+    classNames: "p-trim-md"
+  }, children));
+};
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+var SettingsSection = ({ title, description, children }) => {
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SettingsSectionHeading, {
+    title,
+    description
+  }), /* @__PURE__ */ React18.createElement("div", {
+    className: "w-full pt-trim-md space-y-trim-md"
+  }, children));
+};
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
+var SettingsSectionHeading = ({ title, description }) => {
+  const { t } = useTranslation9(translationKey);
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("h2", {
+    className: "px-trim-md mt-trim-md mb-trim-md text-xl"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
+    className: "px-trim-md my-trim-md text-description"
+  }, toLocalizedString(description, t)));
+};
+SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
+var SettingsGroupButton = ({ classNames, ...props }) => {
+  return /* @__PURE__ */ React18.createElement(Button2, {
+    ...props,
+    classNames: [
+      "md:col-span-2",
+      classNames
+    ]
+  });
+};
+SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
+var SettingsGroup = ({ children, classNames }) => /* @__PURE__ */ React18.createElement("div", {
+  role: "none",
+  className: mx5("group space-y-trim-md", classNames)
+}, children);
+SettingsGroup.displayName = SETTINGS_GROUP_NAME;
+var SettingsFrame = ({ children }) => /* @__PURE__ */ React18.createElement("div", {
+  role: "none",
+  className: "p-trim-md border border-separator rounded-md"
+}, children);
+SettingsFrame.displayName = SETTINGS_FRAME_NAME;
+var SettingsFrameItem = ({ title, description, children }) => {
+  const { t } = useTranslation9(translationKey);
+  return /* @__PURE__ */ React18.createElement("div", {
+    role: "group",
+    className: "min-w-0"
+  }, /* @__PURE__ */ React18.createElement("h3", {
+    className: "text-lg mb-2"
+  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
+    className: "my-trim-sm md:mb-0 text-description"
+  }, toLocalizedString(description, t)), children);
+};
+SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
+var SettingsContainer = ({ classNames, children }) => {
+  return /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: mx5([
+      "dx-article",
+      "*:first:mt-0! *:last:mb-0! px-trim-md py-trim-md",
+      "border border-separator rounded-md",
+      classNames
+    ])
+  }, children);
+};
+SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+var SettingsItem = ({ title, description = "", children }) => {
+  const { t } = useTranslation9(translationKey);
+  return /* @__PURE__ */ React18.createElement(SettingsContainer, {
+    classNames: styles.grid
+  }, /* @__PURE__ */ React18.createElement("h3", {
+    className: mx5(styles.title, "md:col-span-2")
+  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement("p", {
+    className: styles.description
+  }, toLocalizedString(description, t)), /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: "overflow-hidden text-end py-1"
+  }, children));
+};
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+var SettingsItemInput = ({ title, description = "", children }) => {
+  const { t } = useTranslation9(translationKey);
+  return /* @__PURE__ */ React18.createElement(Input12.Root, null, /* @__PURE__ */ React18.createElement(SettingsContainer, {
+    classNames: styles.grid
+  }, /* @__PURE__ */ React18.createElement(Input12.Label, {
+    classNames: mx5(styles.title, "md:col-span-2")
+  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement(Input12.DescriptionAndValidation, null, /* @__PURE__ */ React18.createElement(Input12.Description, {
+    classNames: styles.description
+  }, toLocalizedString(description, t))), /* @__PURE__ */ React18.createElement("div", {
+    role: "none",
+    className: "text-end py-1"
+  }, children)));
+};
+SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+var Settings = {
+  Root: SettingsRoot,
+  Section: SettingsSection,
+  SectionHeading: SettingsSectionHeading,
+  Group: SettingsGroup,
+  GroupButton: SettingsGroupButton,
+  Container: SettingsContainer,
+  Frame: SettingsFrame,
+  FrameItem: SettingsFrameItem,
+  Item: SettingsItem,
+  ItemInput: SettingsItemInput
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
-import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
+import { RegistryContext } from "@effect-atom/atom-react";
 import * as Array2 from "effect/Array";
-import * as Match from "effect/Match";
-import * as Option from "effect/Option";
-import * as Schema2 from "effect/Schema";
-import React15, { forwardRef as forwardRef3, useCallback as useCallback13, useImperativeHandle, useMemo as useMemo8, useState as useState7 } from "react";
-import { QueryAST } from "@dxos/echo";
-import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo/internal";
-import { Filter as Filter2, Query } from "@dxos/echo-db";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { Callout, IconButton as IconButton4, Input as Input8, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import * as Match2 from "effect/Match";
+import * as Option4 from "effect/Option";
+import * as Schema3 from "effect/Schema";
+import React19, { forwardRef as forwardRef3, useCallback as useCallback15, useContext, useImperativeHandle, useMemo as useMemo8, useState as useState6 } from "react";
+import { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj3, Query, QueryAST, Ref as Ref3 } from "@dxos/echo";
+import { View } from "@dxos/echo";
+import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
+import { invariant } from "@dxos/invariant";
+import { useObject, useQuery as useQuery2 } from "@dxos/react-client/echo";
+import { IconButton as IconButton4, Input as Input13, Message, 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 { inputTextLabel, 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 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, outerSpacing = true }, forwardedRef) => {
-  var _effect = _useSignals15();
-  try {
-    const schemaReadonly = !isMutable(schema);
-    const { t } = useTranslation10(translationKey);
-    const projectionModel = useMemo8(() => {
-      const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
-      return new ProjectionModel(jsonSchema, view.projection);
-    }, [
-      schema,
-      JSON.stringify(view.projection)
-    ]);
-    useImperativeHandle(forwardedRef, () => projectionModel, [
-      projectionModel
-    ]);
-    const [expandedField, setExpandedField] = useState7();
-    const queueTarget = Match.value(view.query.ast).pipe(Match.when({
-      type: "options"
-    }, ({ options }) => {
-      return Option.fromNullable(options.queues).pipe(Option.flatMap((queues) => Array2.head(queues)), Option.getOrUndefined);
-    }), Match.orElse(() => void 0));
-    const viewSchema = useMemo8(() => {
-      const base = Schema2.Struct({
-        query: mode === "schema" ? Format.URL.annotations({
-          title: "Record type"
-        }) : QueryAST.Query.annotations({
-          title: "Query"
-        })
-      });
-      if (mode === "query") {
-        return Schema2.Struct({
-          name: Schema2.optional(Schema2.String.annotations({
-            title: "Name"
-          })),
-          ...base.fields,
-          target: Schema2.optional(Schema2.String.annotations({
-            title: "Target Queue"
-          }))
-        }).pipe(Schema2.mutable);
-      }
-      return base.pipe(Schema2.mutable);
-    }, [
-      mode
-    ]);
-    const viewValues = useMemo8(() => ({
-      name: view.name,
-      query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
-      target: queueTarget
-    }), [
-      view.name,
-      mode,
-      view.query.ast,
-      queueTarget
-    ]);
-    const handleToggleField = useCallback13((field) => {
-      setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
-    }, [
-      readonly
-    ]);
-    const handleAdd = useCallback13(() => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 131,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      const field = projectionModel.createFieldProjection();
-      setExpandedField(field.id);
-    }, [
-      schema,
-      projectionModel,
-      readonly
-    ]);
-    const handleUpdate = useCallback13((values) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 138,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      requestAnimationFrame(() => {
-        if ("name" in values && view.name !== values.name) {
-          view.name = values.name;
-          return;
-        }
-        const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
-        onQueryChanged?.(query, values.target);
-      });
-    }, [
-      onQueryChanged,
-      readonly,
+import { ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
+import { mx as mx6, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
+  const atomRegistry = useContext(RegistryContext);
+  const schemaReadonly = !isMutable(schema);
+  const { t } = useTranslation10(translationKey);
+  const projectionModel = useMemo8(() => {
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+    const model = new ProjectionModel({
+      registry: atomRegistry,
       view,
-      queueTarget,
-      mode
-    ]);
-    const handleDelete = useCallback13((fieldId) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 154,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
-      if (fieldId === expandedField) {
-        setExpandedField(void 0);
+      baseSchema: jsonSchema,
+      change
+    });
+    return model;
+  }, [
+    atomRegistry,
+    schema,
+    view
+  ]);
+  useImperativeHandle(forwardedRef, () => projectionModel, [
+    projectionModel
+  ]);
+  const queueTarget = Match2.value(view.query.ast).pipe(Match2.when({
+    type: "from"
+  }, ({ from }) => {
+    if (from._tag !== "scope") {
+      return void 0;
+    }
+    return Option4.fromNullable(from.scope.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.map(String), Option4.getOrUndefined);
+  }), Match2.orElse(() => void 0));
+  const feeds = useQuery2(db, Filter2.type(Feed.Feed));
+  const targetRef = useMemo8(() => {
+    if (!queueTarget) {
+      return void 0;
+    }
+    const feed = feeds.find((feed2) => Feed.getQueueDxn(feed2)?.toString() === queueTarget);
+    return feed ? Ref3.fromDXN(Entity2.getDXN(feed)) : void 0;
+  }, [
+    queueTarget,
+    feeds
+  ]);
+  const viewSchema = useMemo8(() => {
+    const base = Schema3.Struct({
+      query: mode === "schema" ? Format5.URL.annotations({
+        title: "Record type"
+      }) : QueryAST.Query.annotations({
+        title: "Query"
+      })
+    });
+    if (mode === "tag") {
+      return Schema3.Struct({
+        ...base.fields,
+        target: Schema3.optional(Ref3.Ref(Feed.Feed).annotations({
+          title: "Target Feed"
+        }))
+      }).pipe(Schema3.mutable);
+    }
+    return base.pipe(Schema3.mutable);
+  }, [
+    mode
+  ]);
+  const viewValues = useMemo8(() => ({
+    query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+    target: targetRef
+  }), [
+    mode,
+    view.query.ast,
+    targetRef
+  ]);
+  const fieldMap = useMemo8(() => mode === "tag" ? customFields({
+    types,
+    tags
+  }) : void 0, [
+    mode,
+    types,
+    tags
+  ]);
+  const handleUpdate = useCallback15((values) => {
+    const targetValue = values.target;
+    let queueDxn;
+    if (Ref3.isRef(targetValue)) {
+      const feedDxn = targetValue.dxn.toString();
+      const feed = feeds.find((feed2) => Obj3.getDXN(feed2).toString() === feedDxn);
+      if (feed) {
+        queueDxn = Feed.getQueueDxn(feed)?.toString();
       }
-      onDelete?.(fieldId);
-    }, [
-      expandedField,
-      onDelete,
-      readonly
-    ]);
-    const handleMove = useCallback13((fromIndex, toIndex) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 166,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
+    }
+    const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : JSON.parse(JSON.stringify(values.query));
+    onQueryChanged?.(query, queueDxn);
+  }, [
+    onQueryChanged,
+    mode,
+    feeds
+  ]);
+  const handleDelete = useCallback15((fieldId) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 174,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    onDelete?.(fieldId);
+  }, [
+    onDelete,
+    readonly
+  ]);
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: mx6(classNames)
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Message.Root, {
+    valence: "info",
+    classNames: "my-form-padding"
+  }, /* @__PURE__ */ React19.createElement(Message.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
+    schema: viewSchema,
+    values: viewValues,
+    fieldMap,
+    db,
+    onValuesChanged: 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
+  })));
+});
+var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
+  const atomRegistry = useContext(RegistryContext);
+  const schemaReadonly = !isMutable(schema);
+  const { t } = useTranslation10(translationKey);
+  const [viewSnapshot] = useObject(view);
+  const projectionModel = useMemo8(() => {
+    const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
+    const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
+    const model = new ProjectionModel({
+      registry: atomRegistry,
+      view,
+      baseSchema: jsonSchema,
+      change
+    });
+    return model;
+  }, [
+    atomRegistry,
+    schema,
+    view
+  ]);
+  const [expandedField, setExpandedField] = useState6();
+  const handleAdd = useCallback15(() => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 239,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    const field = projectionModel.createFieldProjection();
+    setExpandedField(field.id);
+  }, [
+    projectionModel,
+    readonly
+  ]);
+  const handleToggleField = useCallback15((field) => {
+    setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
+  }, [
+    readonly
+  ]);
+  const handleDelete = useCallback15((fieldId) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 253,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    if (fieldId === expandedField) {
+      setExpandedField(void 0);
+    }
+    onDelete?.(fieldId);
+  }, [
+    expandedField,
+    onDelete,
+    readonly
+  ]);
+  const handleMove = useCallback15((fromIndex, toIndex) => {
+    invariant(!readonly, void 0, {
+      F: __dxlog_file3,
+      L: 265,
+      S: void 0,
+      A: [
+        "!readonly",
+        ""
+      ]
+    });
+    Obj3.change(view, (v) => {
       const fields = [
-        ...view.projection.fields
+        ...v.projection.fields
       ];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      view.projection.fields = fields;
-    }, [
-      view.projection.fields,
-      readonly
-    ]);
-    const handleClose = useCallback13(() => setExpandedField(void 0), []);
-    const handleHide = useCallback13((fieldId) => {
-      setExpandedField(void 0);
-      projectionModel.hideFieldProjection(fieldId);
-    }, [
-      projectionModel
-    ]);
-    const handleShow = useCallback13((property) => {
-      setExpandedField(void 0);
-      projectionModel.showFieldProjection(property);
-    }, [
-      projectionModel
-    ]);
-    const custom = useMemo8(() => mode === "query" ? customFields({
-      types,
-      tags
-    }) : void 0, [
-      types,
-      tags,
-      mode
-    ]);
-    return /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: mx7(classNames)
-    }, schemaReadonly && mode === "schema" && /* @__PURE__ */ React15.createElement(Callout.Root, {
-      valence: "info",
-      classNames: [
-        "mlb-cardSpacingBlock",
-        outerSpacing && "mli-cardSpacingInline"
-      ]
-    }, /* @__PURE__ */ React15.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React15.createElement(Form, {
-      autoSave: true,
-      schema: viewSchema,
-      values: viewValues,
-      readonly: readonly ? "disabled-input" : false,
-      onSave: handleUpdate,
-      outerSpacing,
-      Custom: custom
-    }), /* @__PURE__ */ React15.createElement("div", {
+      v.projection.fields = fields;
+    });
+  }, [
+    view,
+    readonly
+  ]);
+  const handleClose = useCallback15(() => setExpandedField(void 0), []);
+  const handleHide = useCallback15((fieldId) => {
+    setExpandedField(void 0);
+    projectionModel.hideFieldProjection(fieldId);
+  }, [
+    projectionModel
+  ]);
+  const handleShow = useCallback15((property) => {
+    setExpandedField(void 0);
+    projectionModel.showFieldProjection(property);
+  }, [
+    projectionModel
+  ]);
+  if (!viewSnapshot) {
+    return null;
+  }
+  return /* @__PURE__ */ React19.createElement(List2.Root, {
+    items: viewSnapshot.projection.fields,
+    isItem: Schema3.is(View.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: "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]"
+  }, fields?.map((field) => {
+    const hidden = field.visible === false;
+    return /* @__PURE__ */ React19.createElement(List2.Item, {
+      key: field.id,
+      item: field,
+      classNames: "grid grid-cols-subgrid col-span-5",
+      "aria-expanded": expandedField === field.id
+    }, /* @__PURE__ */ React19.createElement("div", {
       role: "none",
-      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement("h2", {
-      className: mx7(inputTextLabel)
-    }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
-      items: view.projection.fields,
-      isItem: Schema2.is(FieldSchema),
-      getId: (field) => field.id,
-      onMove: readonly ? void 0 : handleMove,
-      readonly
-    }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("h3", {
-      className: "text-sm"
-    }, t("field path label")), /* @__PURE__ */ React15.createElement("div", {
-      role: "list",
-      className: listGrid
-    }, fields?.map((field) => {
-      const hidden = field.visible === false;
-      return /* @__PURE__ */ React15.createElement(List2.Item, {
-        key: field.id,
-        item: field,
-        classNames: listItemGrid,
-        "aria-expanded": expandedField === field.id
-      }, /* @__PURE__ */ React15.createElement("div", {
-        role: "none",
-        className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
-      }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
-        disabled: readonly
-      }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
-        classNames: hidden && "text-subdued",
-        onClick: () => handleToggleField(field)
-      }, field.path), /* @__PURE__ */ React15.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)
-      }), mode === "schema" && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.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__ */ React15.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)
-      }))), expandedField === field.id && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
-        role: "none",
-        className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
-      }, /* @__PURE__ */ React15.createElement(FieldEditor, {
-        readonly: readonly || schemaReadonly ? "disabled-input" : false,
-        projection: projectionModel,
-        field,
-        registry,
-        onSave: handleClose
-      })));
-    }))))), !readonly && !expandedField && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
+      className: mx6(subtleHover2, "grid grid-cols-subgrid col-span-5", "rounded-xs cursor-pointer min-h-10")
+    }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
+      disabled: readonly || schemaReadonly
+    }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
+      classNames: hidden && "text-subdued",
+      onClick: () => handleToggleField(field)
+    }, field.path), /* @__PURE__ */ React19.createElement(List2.ItemButton, {
+      label: t(hidden ? "show field label" : "hide field label"),
+      "data-testid": hidden ? "show-field-button" : "hide-field-button",
+      icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
+      autoHide: false,
+      disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
+      onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
+    }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
+      label: t("delete field label"),
+      autoHide: false,
+      disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
+      onClick: () => handleDelete(field.id),
+      "data-testid": "field.delete"
+    }), /* @__PURE__ */ React19.createElement(IconButton4, {
+      iconOnly: true,
+      variant: "ghost",
+      label: t("toggle expand label", {
+        ns: osTranslations2
+      }),
+      icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
+      onClick: () => handleToggleField(field),
+      "data-testid": "field.toggle"
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
       role: "none",
-      className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement(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: "is-full"
+      className: "col-span-5 mt-1 mb-1 border border-separator rounded-md"
+    }, /* @__PURE__ */ React19.createElement(FieldEditor, {
+      readonly: readonly || schemaReadonly,
+      registry,
+      projection: projectionModel,
+      field,
+      onSave: handleClose
     })));
-  } finally {
-    _effect.f();
-  }
-});
+  })), !readonly && !expandedField && /* @__PURE__ */ React19.createElement("div", {
+    role: "none",
+    className: "my-form-padding"
+  }, /* @__PURE__ */ React19.createElement(IconButton4, {
+    icon: "ph--plus--regular",
+    label: t("add property button label"),
+    onClick: handleAdd,
+    disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
+    classNames: "w-full"
+  }))));
+};
 var customFields = ({ types, tags }) => ({
-  query: (props) => {
-    const handleChange = useCallback13((query) => props.onValueChange("object", query.ast), [
-      props.onValueChange
+  query: ({ type, readonly, label, getValue, onValueChange }) => {
+    const handleChange = useCallback15((query) => onValueChange(type, query.ast), [
+      onValueChange
     ]);
-    return /* @__PURE__ */ React15.createElement(Input8.Root, null, /* @__PURE__ */ React15.createElement(InputHeader, {
-      label: props.label
-    }), /* @__PURE__ */ React15.createElement(QueryForm, {
-      initialQuery: props.getValue(),
+    return /* @__PURE__ */ React19.createElement(Input13.Root, null, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+      readonly,
+      label
+    }), /* @__PURE__ */ React19.createElement(QueryForm, {
+      initialQuery: getValue(),
       types,
       tags,
       onChange: handleChange
@@ -2572,43 +2601,39 @@ var customFields = ({ types, tags }) => ({
   }
 });
 export {
-  BooleanInput,
-  ControlFrame,
-  ControlFrameItem,
-  ControlGroup,
-  ControlGroupButton,
-  ControlItem,
-  ControlItemInput,
-  ControlPage,
-  ControlSection,
-  ControlSectionHeading,
+  ArrayField,
+  BooleanField,
   FieldEditor,
   Form,
-  FormProvider,
-  GeoPointInput,
-  InputHeader,
-  MarkdownInput,
-  NumberInput,
+  FormFieldErrorBoundary,
+  FormFieldLabel,
+  FormFieldWrapper,
+  GeoPointField,
+  MarkdownField,
+  NumberField,
   ObjectPicker,
-  SelectInput,
-  SelectOptionInput,
-  TextInput,
-  TupleInput,
+  RefField,
+  SelectField,
+  SelectOptionField,
+  Settings,
+  TextAreaField,
+  TextField,
+  TupleField,
   ViewEditor,
   cellClassesForFieldType,
-  controlItemClasses,
-  findArrayElementType,
   formatForDisplay,
   formatForEditing,
+  getDefaultValue,
+  getFormProperties,
   getRefProps,
+  omitId,
   parseValue,
   pathNotUniqueError,
   translations,
-  useForm,
   useFormContext,
+  useFormFieldState,
+  useFormHandler,
   useFormValues,
-  useInputProps,
-  useQueryRefOptions,
-  useRefQueryLookupHandler
+  useKeyHandler
 };
 //# sourceMappingURL=index.mjs.map