@dxos/react-ui-form 0.8.4-main.c1de068 → 0.8.4-main.e098934

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

@@ -20,6 +20,11 @@ var translations = [
         "field limit reached": "Maximum number of fields reached",
         "boolean input true value": "Yes",
         "boolean input false value": "No",
+        "show field label": "Show field",
+        "hide field label": "Hide field",
+        "delete field label": "Delete field",
+        "ref field placeholder_one": "Select\u2026",
+        "ref field placeholder_other": "Select items\u2026",
         // TODO(burdon): Factor out?
         "button cancel": "Cancel",
         "button save": "Save",
@@ -52,9 +57,9 @@ var translations = [
         "format uri": "URI",
         "format url": "URL",
         "format uuid": "UUID",
-        // Placeholders.
-        "placeholder latitude": "Latitude",
-        "placeholder longitude": "Longitude",
+        // GeoPointInput.
+        "latitude label": "Latitude",
+        "longitude label": "Longitude",
         // SelectOptionsInput.
         "select option label": "Label",
         "select option label placeholder": "Option label",
@@ -62,86 +67,37 @@ var translations = [
         "select option delete": "Delete",
         "select option add": "Add option",
         // System schema message.
-        "system schema title": "System Schema",
-        "system schema description": "This is a system schema and cannot be modified."
+        "system schema title": "System record type",
+        "system schema description": "This is a system record type and cannot be modified, though the view can still be configured."
       }
     }
   }
 ];
 
-// src/components/deprecated/FormInput.tsx
+// src/components/ControlSection/ControlSection.tsx
 import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React from "react";
-import { Input } from "@dxos/react-ui";
-import { mx, textBlockWidth } from "@dxos/react-ui-theme";
-var DeprecatedFormContainer = ({ children, classNames }) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "container-max-width p-4 justify-center overflow-x-hidden overflow-y-auto"
-    }, /* @__PURE__ */ React.createElement("div", {
-      role: "form",
-      className: mx("flex flex-col", textBlockWidth, classNames)
-    }, children));
-  } finally {
-    _effect.f();
-  }
-};
-var DeprecatedFormInput = ({ label, description, secondary, children }) => {
+import { Button, Input, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { StackItem } from "@dxos/react-ui-stack";
+import { mx } from "@dxos/react-ui-theme";
+var ControlPage = ({ children, classNames, ...props }) => {
   var _effect = _useSignals();
   try {
-    const primary = /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex w-full gap-4 py-1"
-    }, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
-      role: "none",
-      className: "flex flex-col w-full"
-    }, /* @__PURE__ */ React.createElement(Input.Label, {
-      classNames: "flex min-bs-[--rail-action] items-center",
-      style: {
-        fontSize: "unset"
-      }
-    }, label), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, {
-      classNames: "mbs-0.5"
-    }, /* @__PURE__ */ React.createElement(Input.Description, null, description))), /* @__PURE__ */ React.createElement("div", {
-      role: "none"
+    return /* @__PURE__ */ React.createElement(StackItem.Content, {
+      classNames: "block overflow-y-auto [--control-spacing:var(--dx-trimMd)]"
     }, /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: "flex min-bs-[--rail-action] items-center"
-    }, children))));
-    if (secondary) {
-      return /* @__PURE__ */ React.createElement("div", {
-        role: "none"
-      }, primary, secondary);
-    }
-    return primary;
-  } finally {
-    _effect.f();
-  }
-};
-
-// src/components/ControlSection/ControlSection.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import React2 from "react";
-import { Button, Input as Input2, toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var ControlPage = ({ children, classNames, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement("div", {
-      role: "none",
-      className: mx2("pli-cardSpacingInline", classNames),
+      className: mx("pli-cardSpacingInline pbe-trimLg", classNames),
       ...props
-    }, children);
+    }, children));
   } finally {
     _effect.f();
   }
 };
 var ControlSection = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(ControlSectionHeading, {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ControlSectionHeading, {
       title,
       description
     }), children);
@@ -150,12 +106,12 @@ var ControlSection = ({ title, description, children }) => {
   }
 };
 var ControlSectionHeading = ({ title, description }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("h2", {
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h2", {
       className: "pli-trimMd container-max-width text-xl mbs-trimLg mbe-trimMd"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
       className: "pli-trimMd mlb-trimMd container-max-width text-description"
     }, toLocalizedString(description, t)));
   } finally {
@@ -163,9 +119,9 @@ var ControlSectionHeading = ({ title, description }) => {
   }
 };
 var ControlGroupButton = ({ classNames, ...props }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement(Button, {
+    return /* @__PURE__ */ React.createElement(Button, {
       ...props,
       classNames: [
         "md:col-span-2",
@@ -177,41 +133,46 @@ var ControlGroupButton = ({ classNames, ...props }) => {
   }
 };
 var ControlGroup = ({ children, classNames }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: mx2("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", classNames)
+      className: mx("group container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-trimMd", "[--control-spacing:0px] [&_input]:justify-self-end [&_button]:justify-self-end", classNames)
     }, children);
   } finally {
     _effect.f();
   }
 };
 var ControlFrame = ({ children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       role: "none",
-      className: "p-trimMd container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd border border-separator rounded-md"
+      className: mx("container-max-width grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-trimSm md:gap-trimMd p-trimMd", "border border-separator rounded-md")
     }, children);
   } finally {
     _effect.f();
   }
 };
-var controlItemClasses = "pli-trimMd plb-trimMd container-max-width grid md:col-span-2 grid-cols-subgrid items-center gap-trimSm border border-separator rounded-md *:first:!mbs-0 *:last:!mbe-0";
-var controlItemTitleClasses = "text-lg font-normal";
-var controlItemDescriptionClasses = "text-base mlb-trimSm md:mbe-0 text-description";
+var controlItemClasses = mx([
+  "container-max-width grid md:col-span-2 grid-cols-subgrid gap-trimSm items-center",
+  // TODO(burdon): Use grid gap consistently or apply margins consistently?
+  "mlb-[--control-spacing] *:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd",
+  "border border-separator rounded-md"
+]);
+var controlItemTitleClasses = "mbe-0 text-lg text-baseText font-normal";
+var controlItemDescriptionClasses = "mlb-trimSm md:mbe-0 text-base text-description";
 var ControlItem = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       className: controlItemClasses
-    }, /* @__PURE__ */ React2.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React2.createElement("h3", {
+    }, /* @__PURE__ */ React.createElement("h3", {
       className: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
       className: controlItemDescriptionClasses
     }, toLocalizedString(description, t))), children);
   } finally {
@@ -219,16 +180,16 @@ var ControlItem = ({ title, description, children }) => {
   }
 };
 var ControlItemInput = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement(Input2.Root, null, /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement("div", {
       className: controlItemClasses
-    }, /* @__PURE__ */ React2.createElement("div", {
+    }, /* @__PURE__ */ React.createElement("div", {
       role: "none"
-    }, /* @__PURE__ */ React2.createElement(Input2.Label, {
+    }, /* @__PURE__ */ React.createElement(Input.Label, {
       classNames: controlItemTitleClasses
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement(Input2.DescriptionAndValidation, null, /* @__PURE__ */ React2.createElement(Input2.Description, {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement(Input.DescriptionAndValidation, null, /* @__PURE__ */ React.createElement(Input.Description, {
       classNames: controlItemDescriptionClasses
     }, toLocalizedString(description, t)))), children));
   } finally {
@@ -236,15 +197,15 @@ var ControlItemInput = ({ title, description, children }) => {
   }
 };
 var ControlFrameItem = ({ title, description, children }) => {
-  var _effect = _useSignals2();
+  var _effect = _useSignals();
   try {
     const { t } = useTranslation(translationKey);
-    return /* @__PURE__ */ React2.createElement("div", {
+    return /* @__PURE__ */ React.createElement("div", {
       role: "group",
       className: "min-is-0"
-    }, /* @__PURE__ */ React2.createElement("h3", {
+    }, /* @__PURE__ */ React.createElement("h3", {
       className: "text-lg mbe-2"
-    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React2.createElement("p", {
+    }, toLocalizedString(title, t)), description && /* @__PURE__ */ React.createElement("p", {
       className: "mlb-trimSm md:mbe-0 text-description"
     }, toLocalizedString(description, t)), children);
   } finally {
@@ -253,41 +214,41 @@ var ControlFrameItem = ({ title, description, children }) => {
 };
 
 // src/components/FieldEditor/FieldEditor.tsx
-import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
-import React14, { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo7, useState as useState5 } from "react";
+import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
+import React13, { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo7, useState as useState6 } from "react";
 import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo-schema";
 import { log as log3 } from "@dxos/log";
-import { useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { useAsyncEffect, useTranslation as useTranslation8 } from "@dxos/react-ui";
 import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
 
 // src/components/Form/custom/GeoPointInput.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import React4, { useCallback, useState, useEffect, useMemo } from "react";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { useCallback, useEffect, useMemo, useState } from "react";
 import { GeoLocation } from "@dxos/echo-schema";
-import { Input as Input4, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { Input as Input3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
 // src/components/Form/Input.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3 from "react";
-import { Icon, Input as Input3, Tooltip } from "@dxos/react-ui";
+import { 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 mx3 } from "@dxos/react-ui-theme";
+import { errorText, mx as mx2 } from "@dxos/react-ui-theme";
 var InputHeader = ({ error, label, readonly }) => {
-  var _effect = _useSignals3();
+  var _effect = _useSignals2();
   try {
-    const Label = readonly ? "span" : Input3.Label;
+    const Label = readonly ? "span" : Input2.Label;
     const labelProps = readonly ? {} : {
       classNames: "!mlb-0"
     };
-    return /* @__PURE__ */ React3.createElement("div", {
+    return /* @__PURE__ */ React2.createElement("div", {
       role: "none",
-      className: mx3("flex justify-between items-center", labelSpacing)
-    }, /* @__PURE__ */ React3.createElement(Label, labelProps, label), error && /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+      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__ */ React3.createElement(Icon, {
+    }, /* @__PURE__ */ React2.createElement(Icon, {
       icon: "ph--warning--regular",
       size: 4,
       classNames: errorText
@@ -298,8 +259,8 @@ var InputHeader = ({ error, label, readonly }) => {
 };
 
 // src/components/Form/custom/GeoPointInput.tsx
-var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals4();
+var GeoPointInput = ({ type, label, readonly, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  var _effect = _useSignals3();
   try {
     const { t } = useTranslation2(translationKey);
     const { status, error } = getStatus();
@@ -344,46 +305,52 @@ var GeoPointInput = ({ type, label, disabled, getStatus, getValue: getValue3, on
       onValueChange,
       type
     ]);
-    return /* @__PURE__ */ React4.createElement(Input4.Root, {
+    return /* @__PURE__ */ React3.createElement(Input3.Root, {
       validationValence: status
-    }, /* @__PURE__ */ React4.createElement(InputHeader, {
+    }, /* @__PURE__ */ React3.createElement(InputHeader, {
       error,
       label
-    }), /* @__PURE__ */ React4.createElement("div", {
+    }), /* @__PURE__ */ React3.createElement("div", {
       role: "none",
       className: "grid grid-cols-2 gap-2"
-    }, /* @__PURE__ */ React4.createElement(Input4.TextInput, {
-      type: "text",
-      pattern: "^-?[0-9]*\\.?[0-9]*$",
-      disabled,
-      placeholder: t("placeholder latitude"),
+    }, /* @__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__ */ React4.createElement(Input4.TextInput, {
-      type: "text",
-      pattern: "^-?[0-9]*\\.?[0-9]*$",
-      disabled,
-      placeholder: t("placeholder longitude"),
+    })), /* @__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 _useSignals5 } from "@preact-signals/safe-react/tracking";
-import React5, { useCallback as useCallback2, useEffect as useEffect2, useState as useState2, useRef } from "react";
+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 { Icon as Icon2, IconButton, Input as Input5, Tag, Toolbar, useTranslation as useTranslation3 } from "@dxos/react-ui";
+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, mx as mx4 } from "@dxos/react-ui-theme";
-var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3, onValueChange }) => {
-  var _effect = _useSignals5();
+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);
@@ -491,49 +458,56 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       selected,
       isNewOption
     ]);
-    return /* @__PURE__ */ React5.createElement(Input5.Root, {
+    return /* @__PURE__ */ React4.createElement(Input4.Root, {
       validationValence: status
-    }, /* @__PURE__ */ React5.createElement(InputHeader, {
+    }, /* @__PURE__ */ React4.createElement(InputHeader, {
       error,
       label
-    }), /* @__PURE__ */ React5.createElement("div", {
+    }), /* @__PURE__ */ React4.createElement("div", {
       role: "none"
-    }, options && /* @__PURE__ */ React5.createElement(List.Root, {
+    }, options && /* @__PURE__ */ React4.createElement(List.Root, {
       items: options,
       isItem: (item) => true,
-      onMove: handleMove
-    }, ({ items }) => /* @__PURE__ */ React5.createElement("div", {
+      onMove: readonly ? void 0 : handleMove,
+      readonly: !!readonly
+    }, ({ items }) => /* @__PURE__ */ React4.createElement("div", {
       role: "list",
       className: "w-full overflow-auto"
-    }, items?.map((item) => /* @__PURE__ */ React5.createElement("div", {
+    }, items?.map((item) => /* @__PURE__ */ React4.createElement("div", {
       key: item.id
-    }, /* @__PURE__ */ React5.createElement(List.Item, {
+    }, /* @__PURE__ */ React4.createElement(List.Item, {
       role: "button",
       item,
       classNames: [
-        "p-1 plb-2",
-        "flex flex-col",
-        "cursor-pointer",
-        "hover:bg-hoverOverlay"
+        subtleHover,
+        "flex flex-col cursor-pointer rounded-sm"
       ],
       "aria-expanded": selected === item.id
-    }, /* @__PURE__ */ React5.createElement("div", {
+    }, /* @__PURE__ */ React4.createElement("div", {
       className: "flex items-center"
-    }, /* @__PURE__ */ React5.createElement(List.ItemDragHandle, null), /* @__PURE__ */ React5.createElement(List.ItemTitle, {
+    }, /* @__PURE__ */ React4.createElement(List.ItemDragHandle, {
+      disabled: !!readonly
+    }), /* @__PURE__ */ React4.createElement(List.ItemTitle, {
       onClick: () => handleClick(item.id),
       classNames: "flex-1"
-    }, /* @__PURE__ */ React5.createElement(Tag, {
+    }, /* @__PURE__ */ React4.createElement(Tag, {
       palette: item.color
-    }, item.title || "\u200B")), /* @__PURE__ */ React5.createElement(Icon2, {
+    }, 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__ */ React5.createElement("div", {
-      className: "mis-4 mbs-2 flex flex-col gap-1"
-    }, /* @__PURE__ */ React5.createElement(Input5.Label, {
+    })), 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__ */ React5.createElement("div", {
-      className: "flex flex-row items-center gap-1"
-    }, /* @__PURE__ */ React5.createElement(Input5.TextInput, {
+    }, 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,
@@ -541,40 +515,34 @@ var SelectOptionInput = ({ type, label, disabled, getStatus, getValue: getValue3
       onKeyDown: handleKeyDown,
       classNames: "flex-1",
       "data-no-submit": true
-    }), /* @__PURE__ */ React5.createElement(Toolbar.Root, {
-      classNames: "p-0 m-0 !is-auto"
-    }, /* @__PURE__ */ React5.createElement(HuePicker, {
+    }), /* @__PURE__ */ React4.createElement(HuePicker, {
+      disabled: !!readonly,
       value: item.color,
-      onChange: handleColorChange(item.id),
-      rootVariant: "toolbar-button"
-    })), /* @__PURE__ */ React5.createElement(IconButton, {
+      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__ */ React5.createElement("div", {
-      role: "listitem"
-    }, /* @__PURE__ */ React5.createElement("div", {
-      role: "button",
-      className: mx4("p-1 plb-2", "flex flex-col", "cursor-pointer", "hover:bg-hoverOverlay"),
-      onClick: handleAdd
-    }, /* @__PURE__ */ React5.createElement("div", {
-      className: "flex items-center gap-1"
-    }, /* @__PURE__ */ React5.createElement(Icon2, {
-      icon: "ph--plus--regular"
-    }), /* @__PURE__ */ React5.createElement("span", {
-      className: "text-sm"
-    }, t("select option add")))))))));
+    })))))), /* @__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();
   }
 };
 
 // src/components/Form/custom/TupleInput.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import React6 from "react";
-import { Input as Input6 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
+import { 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",
@@ -582,22 +550,22 @@ var gridCols = [
   "grid-cols-3",
   "grid-cols-4"
 ];
-var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals6();
+var TupleInput = ({ binding, type, label, readonly, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  var _effect = _useSignals5();
   try {
     const { status, error } = getStatus();
     const values = getValue3() ?? {};
-    return /* @__PURE__ */ React6.createElement(Input6.Root, {
+    return /* @__PURE__ */ React5.createElement(Input5.Root, {
       validationValence: status
-    }, /* @__PURE__ */ React6.createElement(InputHeader, {
+    }, /* @__PURE__ */ React5.createElement(InputHeader, {
       error,
       label
-    }), /* @__PURE__ */ React6.createElement("div", {
-      className: mx5("grid gap-2", gridCols[binding.length - 1])
-    }, binding.map((prop) => /* @__PURE__ */ React6.createElement(Input6.TextInput, {
+    }), /* @__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,
+      disabled: !!readonly,
       value: values[prop],
       onChange: (event) => onValueChange(type, {
         ...values,
@@ -611,71 +579,72 @@ var TupleInput = ({ binding, type, label, disabled, getStatus, getValue: getValu
 };
 
 // src/components/Form/Defaults.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef2 } from "react";
-import { Input as Input7, Select, useTranslation as useTranslation4 } from "@dxos/react-ui";
-var TextInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals7();
+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 disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.Root, {
+    return readonly && !getValue3() ? null : readonly === "static" && inputOnly ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
       error,
       label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextInput, {
-      disabled,
+    }), 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__ */ React7.createElement(Input7.Validation, null, error));
+    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.Validation, null, error));
   } finally {
     _effect.f();
   }
 };
-var NumberInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals7();
+var NumberInput = ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  var _effect = _useSignals6();
   try {
     const { status, error } = getStatus();
-    return disabled && !getValue3() ? null : disabled && inputOnly ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.Root, {
+    return readonly && !getValue3() ? null : readonly === "static" && inputOnly ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
       error,
       label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextInput, {
+    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.TextInput, {
       type: "number",
-      disabled,
+      disabled: !!readonly,
       placeholder,
-      value: getValue3() ?? 0,
+      value: getValue3(),
       onChange: (event) => onValueChange(type, event.target.value),
       onBlur
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
+    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
 };
-var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, onValueChange, disabled }) => {
-  var _effect = _useSignals7();
+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__ */ React7.createElement(Input7.Root, {
+    return /* @__PURE__ */ React6.createElement(Input6.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
       error,
       label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, t(checked ? "boolean input true value" : "boolean input false value")) : /* @__PURE__ */ React7.createElement(Input7.Switch, {
+    }), 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: (value) => onValueChange(type, value)
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
+    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
 };
-var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
-  var _effect = _useSignals7();
+var SelectInput = ({ type, label, inputOnly, readonly, placeholder, options, getStatus, getValue: getValue3, onValueChange }) => {
+  var _effect = _useSignals6();
   try {
     const { status, error } = getStatus();
     const value = getValue3();
@@ -683,31 +652,31 @@ var SelectInput = ({ type, label, inputOnly, disabled, placeholder, options, get
       type,
       onValueChange
     ]);
-    return disabled && !value ? null : /* @__PURE__ */ React7.createElement(Input7.Root, {
+    return readonly && !value ? null : /* @__PURE__ */ React6.createElement(Input6.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
       error,
       label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ React7.createElement(Select.Root, {
+    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)) : /* @__PURE__ */ React6.createElement(Select.Root, {
       value,
       onValueChange: handleValueChange
-    }, /* @__PURE__ */ React7.createElement(Select.TriggerButton, {
+    }, /* @__PURE__ */ React6.createElement(Select.TriggerButton, {
       classNames: "is-full",
-      disabled,
+      disabled: !!readonly,
       placeholder
-    }), /* @__PURE__ */ React7.createElement(Select.Portal, null, /* @__PURE__ */ React7.createElement(Select.Content, null, /* @__PURE__ */ React7.createElement(Select.Viewport, null, options?.map(({ value: value2, label: label2 }) => (
+    }), /* @__PURE__ */ React6.createElement(Select.Portal, null, /* @__PURE__ */ React6.createElement(Select.Content, null, /* @__PURE__ */ React6.createElement(Select.Viewport, null, options?.map(({ value: value2, label: label2 }) => (
       // NOTE: Numeric values are converted to and from strings.
-      /* @__PURE__ */ React7.createElement(Select.Option, {
+      /* @__PURE__ */ React6.createElement(Select.Option, {
         key: String(value2),
         value: String(value2)
       }, label2 ?? String(value2))
-    )))))), inputOnly && /* @__PURE__ */ React7.createElement(Input7.DescriptionAndValidation, null, error));
+    ))), /* @__PURE__ */ React6.createElement(Select.Arrow, null)))), inputOnly && /* @__PURE__ */ React6.createElement(Input6.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
 };
-var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
-  var _effect = _useSignals7();
+var MarkdownInput = ({ type, label, inputOnly, readonly, placeholder, getStatus, getValue: getValue3, onValueChange, onBlur }) => {
+  var _effect = _useSignals6();
   try {
     const { status, error } = getStatus();
     const textareaRef = useRef2(null);
@@ -729,14 +698,14 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
       getValue3(),
       adjustHeight
     ]);
-    return /* @__PURE__ */ React7.createElement(Input7.Root, {
+    return /* @__PURE__ */ React6.createElement(Input6.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React7.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React6.createElement(InputHeader, {
       error,
       label
-    }), disabled ? /* @__PURE__ */ React7.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React7.createElement(Input7.TextArea, {
+    }), readonly === "static" ? /* @__PURE__ */ React6.createElement("p", null, getValue3() ?? "") : /* @__PURE__ */ React6.createElement(Input6.TextArea, {
       ref: textareaRef,
-      disabled,
+      disabled: !!readonly,
       placeholder,
       value: getValue3() ?? "",
       classNames: "min-bs-auto max-h-40 overflow-auto",
@@ -746,27 +715,28 @@ var MarkdownInput = ({ type, label, inputOnly, disabled, placeholder, getStatus,
         resize: "none"
       },
       spellCheck: false
-    }), inputOnly && /* @__PURE__ */ React7.createElement(Input7.Validation, null, error));
+    }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.Validation, null, error));
   } finally {
     _effect.f();
   }
 };
 
 // src/components/Form/Form.tsx
-import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
-import React13, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
+import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
+import { useFocusFinders } from "@fluentui/react-tabster";
+import React12, { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef3 } from "react";
 import { cardDialogOverflow, cardSpacing as cardSpacing2 } from "@dxos/react-ui-stack";
 
 // src/components/Form/FormActions.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import React9 from "react";
+import { 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 mx6 } from "@dxos/react-ui-theme";
+import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // src/components/Form/FormContext.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import React8, { createContext, useContext, useEffect as useEffect6, useMemo as useMemo3, useCallback as useCallback6 } from "react";
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
+import React7, { createContext, useCallback as useCallback6, useContext, useEffect as useEffect6, useMemo as useMemo3 } from "react";
 import { raise } from "@dxos/debug";
 import { getValue as getValue2 } from "@dxos/echo-schema";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -783,7 +753,7 @@ var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-form/src/hooks/useForm.t
 var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave }) => {
   invariant(SchemaAST.isTypeLiteral(schema.ast), void 0, {
     F: __dxlog_file,
-    L: 93,
+    L: 95,
     S: void 0,
     A: [
       "SchemaAST.isTypeLiteral(schema.ast)",
@@ -887,7 +857,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 213,
+        L: 215,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -958,7 +928,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 275,
+    L: 277,
     S: void 0,
     A: [
       "obj",
@@ -1083,7 +1053,7 @@ var useInputProps = (path = []) => {
   ]);
 };
 var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
-  var _effect = _useSignals8();
+  var _effect = _useSignals7();
   try {
     const form = useForm(formOptions);
     const handleKeyDown = useCallback6((event) => {
@@ -1119,7 +1089,7 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
       form.handleSave,
       autoSave
     ]);
-    return /* @__PURE__ */ React8.createElement(FormContext.Provider, {
+    return /* @__PURE__ */ React7.createElement(FormContext.Provider, {
       value: form
     }, children);
   } finally {
@@ -1129,19 +1099,19 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
 
 // src/components/Form/FormActions.tsx
 var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
-  var _effect = _useSignals9();
+  var _effect = _useSignals8();
   try {
     const { t } = useTranslation5(translationKey);
     const { canSave, handleSave } = useFormContext();
-    return /* @__PURE__ */ React9.createElement("div", {
+    return /* @__PURE__ */ React8.createElement("div", {
       role: "none",
-      className: mx6(outerSpacing === "scroll-fields" ? "pli-cardSpacingInline mbe-cardSpacingBlock" : outerSpacing ? cardSpacing : "mbs-cardSpacingBlock", "flex [&_button]:grow gap-1 first:mbs-0")
-    }, onCancel && !readonly && /* @__PURE__ */ React9.createElement(IconButton2, {
+      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__ */ React9.createElement(IconButton2, {
+    }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
       type: "submit",
       "data-testid": "save-button",
       disabled: !canSave,
@@ -1155,25 +1125,15 @@ var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
 };
 
 // src/components/Form/FormContent.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import { Schema, SchemaAST as SchemaAST4, pipe as pipe2 } from "effect";
 import { capitalize as capitalize2 } from "effect/String";
-import React12, { forwardRef, useMemo as useMemo5 } from "react";
+import React11, { forwardRef, useMemo as useMemo5 } from "react";
 import { createJsonPath as createJsonPath3, findNode as findNode3, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2 } from "@dxos/effect";
-import { mx as mx8 } from "@dxos/react-ui-theme";
+import { mx as mx6 } from "@dxos/react-ui-theme";
 import { getSchemaProperties as getSchemaProperties2 } from "@dxos/schema";
 import { isNotFalsy } from "@dxos/util";
 
-// src/components/Form/ArrayField.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import { SchemaAST as SchemaAST3, pipe } from "effect";
-import { capitalize } from "effect/String";
-import React10, { Fragment, useCallback as useCallback7 } from "react";
-import { findNode as findNode2, getDiscriminatedType, isDiscriminatedUnion, SimpleType } from "@dxos/effect";
-import { invariant as invariant2 } from "@dxos/invariant";
-import { IconButton as IconButton3, useTranslation as useTranslation6 } from "@dxos/react-ui";
-import { getSchemaProperties } from "@dxos/schema";
-
 // src/util/field.ts
 import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
 var parseValue = ({ type, format, value }) => {
@@ -1255,28 +1215,7 @@ var parseValue = ({ type, format, value }) => {
   }
 };
 var cellClassesForFieldType = ({ type, format }) => {
-  if (!format) {
-    switch (type) {
-      case TypeEnum.Number:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case TypeEnum.Boolean:
-        return [
-          "text-right",
-          "font-mono"
-        ];
-      case TypeEnum.String:
-        return void 0;
-      case TypeEnum.Ref:
-        return void 0;
-      default: {
-        return void 0;
-      }
-    }
-  }
-  switch (format) {
+  switch (format || type) {
     case FormatEnum.Markdown:
       return void 0;
     case FormatEnum.Time:
@@ -1297,6 +1236,16 @@ var cellClassesForFieldType = ({ type, format }) => {
       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;
   }
@@ -1482,9 +1431,17 @@ var getRefProps = (property) => {
 };
 
 // src/components/Form/ArrayField.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
+import { SchemaAST as SchemaAST3, pipe } from "effect";
+import { capitalize } from "effect/String";
+import React9, { Fragment, useCallback as useCallback7 } 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 = _useSignals10();
+  var _effect = _useSignals9();
   try {
     const { t } = useTranslation6(translationKey);
     const { ast, name, type, title } = property;
@@ -1534,14 +1491,14 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     if (!elementType) {
       return null;
     }
-    return readonly && values.length < 1 ? null : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(InputHeader, {
+    return readonly && values.length < 1 ? null : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(InputHeader, {
       readonly: true,
       label
-    }), /* @__PURE__ */ React10.createElement("div", {
+    }), /* @__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__ */ React10.createElement(FormField, {
+      const field = /* @__PURE__ */ React9.createElement(FormField, {
         property: {
           ...property,
           array: false,
@@ -1556,18 +1513,18 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
         Custom,
         lookupComponent
       });
-      return readonly ? field : /* @__PURE__ */ React10.createElement(Fragment, {
+      return readonly ? field : /* @__PURE__ */ React9.createElement(Fragment, {
         key: index
-      }, /* @__PURE__ */ React10.createElement("div", {
+      }, /* @__PURE__ */ React9.createElement("div", {
         role: "none"
-      }, field), /* @__PURE__ */ React10.createElement(IconButton3, {
+      }, field), /* @__PURE__ */ React9.createElement(IconButton3, {
         icon: "ph--trash--regular",
         iconOnly: true,
         label: t("button remove"),
         onClick: () => handleRemove(index),
         classNames: "self-center"
       }));
-    })), !readonly && /* @__PURE__ */ React10.createElement(IconButton3, {
+    })), !readonly && /* @__PURE__ */ React9.createElement(IconButton3, {
       classNames: "is-full mlb-cardSpacingBlock flex",
       icon: "ph--plus--regular",
       label: t("add field"),
@@ -1578,19 +1535,42 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
   }
 };
 
+// src/components/Form/factory.tsx
+import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
+var getInputComponent = (type, format) => {
+  switch (format) {
+    case FormatEnum4.GeoPoint:
+      return GeoPointInput;
+    case FormatEnum4.Markdown:
+      return MarkdownInput;
+  }
+  switch (type) {
+    case "string":
+      return TextInput;
+    case "number":
+      return NumberInput;
+    case "boolean":
+      return BooleanInput;
+  }
+};
+
 // src/components/Form/RefField.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import React11, { useCallback as useCallback8, useMemo as useMemo4 } from "react";
-import { Expando, getTypeAnnotation, Ref, ReferenceAnnotationId as ReferenceAnnotationId2 } from "@dxos/echo-schema";
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
+import React10, { useCallback as useCallback8, useMemo as useMemo4, useState as useState5 } from "react";
+import { Expando, Ref, ReferenceAnnotationId as ReferenceAnnotationId2, getTypeAnnotation } from "@dxos/echo-schema";
 import { findAnnotation as findAnnotation2 } from "@dxos/effect";
 import { DXN } from "@dxos/keys";
-import { DxRefTag } from "@dxos/lit-ui/react";
-import { Input as Input8, useTranslation as useTranslation7 } from "@dxos/react-ui";
-import { TagPicker } from "@dxos/react-ui-tag-picker";
-import { descriptionText, mx as mx7 } from "@dxos/react-ui-theme";
+import { DxAnchor } from "@dxos/lit-ui/react";
+import { Button as Button2, Icon as Icon2, Input as Input7, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { PopoverCombobox } from "@dxos/react-ui-searchlist";
+import { TagPickerItem } from "@dxos/react-ui-tag-picker";
+import { descriptionText, mx as mx5 } from "@dxos/react-ui-theme";
 import { isNonNullable as isNonNullable2 } from "@dxos/util";
-var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
+var isRefSnapShot = (val) => {
+  return typeof val === "object" && typeof val?.["/"] === "string";
+};
+var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, getValue: getValue3, onBlur, onQueryRefOptions, createOptionLabel, createOptionIcon, onCreateFromQuery, onValueChange, ...restInputProps }) => {
+  var _effect = _useSignals10();
   try {
     const { t } = useTranslation7(translationKey);
     const refTypeInfo = useMemo4(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
@@ -1601,11 +1581,11 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
       onQueryRefOptions
     });
     if (refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-      return /* @__PURE__ */ React11.createElement(RefFieldFallback, {
+      return /* @__PURE__ */ React10.createElement(RefFieldFallback, {
         type,
         label,
         placeholder,
-        disabled,
+        readonly,
         inputOnly,
         getValue: getValue3,
         onBlur,
@@ -1616,8 +1596,9 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
     const handleGetValue = useCallback8(() => {
       const formValue = getValue3();
       const unknownToRefOption = (val) => {
-        if (Ref.isRef(val)) {
-          const dxnString = val.dxn.toString();
+        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;
@@ -1640,13 +1621,6 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
       availableOptions,
       array
     ]);
-    const handleSearch = useCallback8((text, ids) => availableOptions.filter((option) => !ids.includes(option.id)).filter((option) => option.label.toLowerCase().includes(text.toLowerCase())).map((option) => ({
-      id: option.id,
-      label: option.label,
-      hue: option.hue
-    })), [
-      availableOptions
-    ]);
     const handleUpdate = useCallback8((ids) => {
       if (ids.length === 0) {
         onValueChange("object", void 0);
@@ -1670,45 +1644,115 @@ var RefField = ({ type, label, disabled, placeholder, inputOnly, array, ast, get
       array,
       onValueChange
     ]);
-    const tagPickerMode = useMemo4(() => array ? "multi-select" : "single-select", [
-      array
-    ]);
     if (!refTypeInfo) {
       return null;
     }
     const { status, error } = restInputProps.getStatus();
     const items = handleGetValue();
-    return disabled && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input8.Root, {
+    const selectedIds = useMemo4(() => items.map((i) => i.id), [
+      items
+    ]);
+    const labelById = useMemo4(() => availableOptions.reduce((acc, option) => {
+      acc[option.id.toLowerCase()] = option.label.toLowerCase();
+      return acc;
+    }, {}), [
+      availableOptions
+    ]);
+    const [query, setQuery] = useState5("");
+    const toggleSelect = useCallback8((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__ */ React10.createElement(Input7.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React10.createElement(InputHeader, {
       error,
       label
-    }), /* @__PURE__ */ React11.createElement("div", {
+    }), /* @__PURE__ */ React10.createElement("div", {
       "data-no-submit": true
-    }, disabled ? items.length < 1 ? /* @__PURE__ */ React11.createElement("p", {
-      className: mx7(descriptionText, "mbe-2")
-    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React11.createElement(DxRefTag, {
+    }, readonly ? items.length < 1 ? /* @__PURE__ */ React10.createElement("p", {
+      className: mx5(descriptionText, "mbe-2")
+    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React10.createElement(DxAnchor, {
       key: item.id,
       refid: item.id,
-      rootclassname: "mie-1",
-      style: {
-        marginInlineEnd: ".25rem"
+      rootclassname: "mie-1"
+    }, item.label)) : /* @__PURE__ */ React10.createElement(PopoverCombobox.Root, null, /* @__PURE__ */ React10.createElement(PopoverCombobox.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React10.createElement(Button2, {
+      variant: "ghost",
+      classNames: "is-full text-start gap-2"
+    }, /* @__PURE__ */ React10.createElement("div", {
+      role: "none",
+      className: "grow"
+    }, items?.length ? items?.map((item) => /* @__PURE__ */ React10.createElement(TagPickerItem, {
+      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);
+        }
       }
-    }, item.label)) : /* @__PURE__ */ React11.createElement(TagPicker, {
-      readonly: disabled,
-      items,
-      mode: tagPickerMode,
-      onBlur: (event) => onBlur(event),
-      onUpdate: handleUpdate,
-      onSearch: handleSearch,
-      classNames: "bg-inputSurface p-1.5 rounded-sm"
-    })), inputOnly && /* @__PURE__ */ React11.createElement(Input8.DescriptionAndValidation, null, error));
+    })) : /* @__PURE__ */ React10.createElement("span", {
+      className: "text-description"
+    }, placeholder ?? t("ref field placeholder", {
+      count: array ? 99 : 1
+    }))), /* @__PURE__ */ React10.createElement(Icon2, {
+      size: 3,
+      icon: "ph--caret-down--bold"
+    }))), /* @__PURE__ */ React10.createElement(PopoverCombobox.Content, {
+      filter: (value, search) => value === "__create__" || labelById[value]?.includes(search.toLowerCase()) ? 1 : 0
+    }, /* @__PURE__ */ React10.createElement(PopoverCombobox.Input, {
+      placeholder: "Search...",
+      value: query,
+      onValueChange: (v) => setQuery(v),
+      autoFocus: true
+    }), /* @__PURE__ */ React10.createElement(PopoverCombobox.List, null, availableOptions.map((option) => /* @__PURE__ */ React10.createElement(PopoverCombobox.Item, {
+      key: option.id,
+      value: option.id,
+      onSelect: () => toggleSelect(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"
+    }))), query.length > 0 && createOptionLabel && createOptionIcon && onCreateFromQuery && /* @__PURE__ */ React10.createElement(PopoverCombobox.Item, {
+      value: "__create__",
+      onSelect: () => onCreateFromQuery?.(refTypeInfo, query),
+      classNames: "flex items-center gap-2"
+    }, /* @__PURE__ */ React10.createElement(Icon2, {
+      icon: createOptionIcon
+    }), t(createOptionLabel[0], {
+      ns: createOptionLabel[1].ns,
+      text: query
+    }))), /* @__PURE__ */ React10.createElement(PopoverCombobox.Arrow, null)))), inputOnly && /* @__PURE__ */ React10.createElement(Input7.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
   }
 };
-var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals11();
+var RefFieldFallback = ({ type, label, readonly, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
+  var _effect = _useSignals10();
   try {
     const handleOnValueChange = (_type, dxnString) => {
       const dxn = DXN.tryParse(dxnString);
@@ -1730,10 +1774,10 @@ var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValu
       }
       return void 0;
     };
-    return /* @__PURE__ */ React11.createElement(TextInput, {
+    return /* @__PURE__ */ React10.createElement(TextInput, {
       type,
       label,
-      disabled,
+      readonly,
       placeholder,
       inputOnly,
       getValue: handleGetValue,
@@ -1745,28 +1789,9 @@ var RefFieldFallback = ({ type, label, disabled, placeholder, inputOnly, getValu
   }
 };
 
-// src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
-var getInputComponent = (type, format) => {
-  switch (format) {
-    case FormatEnum4.GeoPoint:
-      return GeoPointInput;
-    case FormatEnum4.Markdown:
-      return MarkdownInput;
-  }
-  switch (type) {
-    case "string":
-      return TextInput;
-    case "number":
-      return NumberInput;
-    case "boolean":
-      return BooleanInput;
-  }
-};
-
 // src/components/Form/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupComponent, Custom }) => {
-  var _effect = _useSignals12();
+var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptions, createOptionLabel, createOptionIcon, onCreateFromQuery, lookupComponent, Custom }) => {
+  var _effect = _useSignals11();
   try {
     const { ast, name, type, format, title, description, options, examples, array } = property;
     const inputProps = useInputProps(path);
@@ -1785,7 +1810,7 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
         type,
         format,
         label,
-        disabled: readonly,
+        readonly,
         placeholder,
         ...inputProps
       }
@@ -1796,33 +1821,36 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     const jsonPath = createJsonPath3(path ?? []);
     const CustomComponent = Custom?.[jsonPath];
     if (CustomComponent) {
-      return /* @__PURE__ */ React12.createElement(CustomComponent, {
+      return /* @__PURE__ */ React11.createElement(CustomComponent, {
         type,
         format,
         label,
         inputOnly: inline,
         placeholder,
-        disabled: readonly,
+        readonly,
         ...inputProps
       });
     }
     const refProps = getRefProps(property);
     if (refProps) {
-      return /* @__PURE__ */ React12.createElement(RefField, {
+      return /* @__PURE__ */ React11.createElement(RefField, {
         ast: refProps.ast,
         array: refProps.isArray,
         type,
         format,
         label,
         placeholder,
-        disabled: readonly,
+        readonly,
         inputOnly: inline,
         onQueryRefOptions,
+        createOptionLabel,
+        createOptionIcon,
+        onCreateFromQuery,
         ...inputProps
       });
     }
     if (array) {
-      return /* @__PURE__ */ React12.createElement(ArrayField, {
+      return /* @__PURE__ */ React11.createElement(ArrayField, {
         property,
         path,
         inputProps,
@@ -1832,21 +1860,21 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     }
     const InputComponent = getInputComponent(type, format);
     if (InputComponent) {
-      return /* @__PURE__ */ React12.createElement(InputComponent, {
+      return /* @__PURE__ */ React11.createElement(InputComponent, {
         type,
         format,
         label,
         inputOnly: inline,
         placeholder,
-        disabled: readonly,
+        readonly,
         ...inputProps
       });
     }
     if (options) {
-      return /* @__PURE__ */ React12.createElement(SelectInput, {
+      return /* @__PURE__ */ React11.createElement(SelectInput, {
         type,
         format,
-        disabled: readonly,
+        readonly,
         inputOnly: inline,
         label,
         options: options.map((option) => ({
@@ -1861,13 +1889,17 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
       const baseNode = findNode3(ast, isDiscriminatedUnion2);
       const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode3(ast, SchemaAST4.isTypeLiteral);
       if (typeLiteral) {
-        return /* @__PURE__ */ React12.createElement(React12.Fragment, null, !inline && /* @__PURE__ */ React12.createElement("h3", {
-          className: mx8("text-lg mlb-inputSpacingBlock first:mbs-0")
-        }, label), /* @__PURE__ */ React12.createElement(FormFields, {
+        return /* @__PURE__ */ React11.createElement(React11.Fragment, null, !inline && /* @__PURE__ */ React11.createElement("h3", {
+          className: mx6("text-lg mlb-inputSpacingBlock first:mbs-0")
+        }, label), /* @__PURE__ */ React11.createElement(FormFields, {
           schema: Schema.make(typeLiteral),
           path,
           readonly,
+          projection,
           onQueryRefOptions,
+          createOptionLabel,
+          createOptionIcon,
+          onCreateFromQuery,
           Custom,
           lookupComponent
         }));
@@ -1878,26 +1910,44 @@ var FormField = ({ property, path, readonly, inline, onQueryRefOptions, lookupCo
     _effect.f();
   }
 };
-var FormFields = /* @__PURE__ */ forwardRef(({ classNames, testId, schema, path, filter, sort, readonly, lookupComponent, Custom, onQueryRefOptions }, forwardRef2) => {
-  var _effect = _useSignals12();
+var FormFields = /* @__PURE__ */ forwardRef(({ classNames, schema, path, filter, sort, projection, readonly, lookupComponent, Custom, onQueryRefOptions, ...props }, forwardRef2) => {
+  var _effect = _useSignals11();
   try {
     const values = useFormValues(path);
     const properties = useMemo5(() => {
-      const props = getSchemaProperties2(schema.ast, values);
-      const filtered = filter ? filter(props) : props;
+      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
+      sort,
+      projection?.fields
     ]);
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       role: "form",
-      className: mx8("is-full", classNames),
+      className: mx6("is-full", classNames),
       ref: forwardRef2
     }, properties.map((property) => {
-      return /* @__PURE__ */ React12.createElement(FormField, {
+      return /* @__PURE__ */ React11.createElement(FormField, {
         key: property.name,
         property,
         path: [
@@ -1905,9 +1955,11 @@ var FormFields = /* @__PURE__ */ forwardRef(({ classNames, testId, schema, path,
           property.name
         ],
         readonly,
+        projection,
         onQueryRefOptions,
         lookupComponent,
-        Custom
+        Custom,
+        ...props
       });
     }).filter(isNotFalsy));
   } finally {
@@ -1916,25 +1968,26 @@ var FormFields = /* @__PURE__ */ forwardRef(({ classNames, testId, schema, path,
 });
 
 // src/components/Form/Form.tsx
-var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, onCancel, schema, onValuesChanged, onValidate, onSave, ...props }) => {
-  var _effect = _useSignals13();
+var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, schema, onCancel, onValuesChanged, onValidate, onSave, ...props }) => {
+  var _effect = _useSignals12();
   try {
     const formRef = useRef3(null);
-    const handleValid = useMemo6(() => autoSave ? onSave : void 0, [
-      autoSave,
-      onSave
-    ]);
+    const { findFirstFocusable } = useFocusFinders();
     useEffect7(() => {
       if (autoFocus && formRef.current) {
-        const input = formRef.current.querySelector("input");
-        if (input) {
-          input.focus();
+        const firstFocusable = findFirstFocusable(formRef.current);
+        if (firstFocusable) {
+          firstFocusable.focus();
         }
       }
     }, [
       autoFocus
     ]);
-    return /* @__PURE__ */ React13.createElement(FormProvider, {
+    const handleValid = useMemo6(() => autoSave ? onSave : void 0, [
+      autoSave,
+      onSave
+    ]);
+    return /* @__PURE__ */ React12.createElement(FormProvider, {
       formRef,
       schema,
       autoSave,
@@ -1943,11 +1996,11 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
       onValidate,
       onValid: handleValid,
       onSave
-    }, /* @__PURE__ */ React13.createElement("div", {
+    }, /* @__PURE__ */ React12.createElement("div", {
       role: "none",
       className: "contents",
       "data-testid": testId
-    }, /* @__PURE__ */ React13.createElement(FormFields, {
+    }, /* @__PURE__ */ React12.createElement(FormFields, {
       ...props,
       ref: formRef,
       classNames: [
@@ -1957,7 +2010,7 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
       ],
       readonly,
       schema
-    }), (onCancel || onSave) && !autoSave && /* @__PURE__ */ React13.createElement(FormActions, {
+    }), (onCancel || onSave) && !autoSave && !readonly && /* @__PURE__ */ React12.createElement(FormActions, {
       readonly,
       onCancel,
       outerSpacing
@@ -1969,42 +2022,37 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
 
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
-var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing }) => {
-  var _effect = _useSignals14();
+var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, outerSpacing }) => {
+  var _effect = _useSignals13();
   try {
     const { t } = useTranslation8(translationKey);
-    const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
+    const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
     useEffect8(() => setProps(projection.getFieldProjection(field.id).props), [
       field,
       projection
     ]);
-    const [schemas, setSchemas] = useState5([]);
-    useEffect8(() => {
+    const [schemas, setSchemas] = useState6([]);
+    useAsyncEffect(async () => {
       if (!registry) {
         return;
       }
       const subscription = registry.query().subscribe((query) => setSchemas(query.results), {
         fire: true
       });
-      const t2 = setTimeout(async () => {
-        const schemas2 = await registry.query().run();
-        setSchemas(schemas2);
-      });
-      return () => {
-        clearTimeout(t2);
-        subscription?.();
-      };
+      const schemas2 = await registry.query().run();
+      setSchemas(schemas2);
+      return () => subscription?.();
     }, [
       registry
     ]);
-    const [referenceSchema, setReferenceSchema] = useState5();
+    const [referenceSchema, setReferenceSchema] = useState6();
     useEffect8(() => {
       setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
     }, [
       schemas,
       props?.referenceSchema
     ]);
-    const [{ fieldSchema }, setFieldSchema] = useState5({
+    const [{ fieldSchema }, setFieldSchema] = useState6({
       fieldSchema: getFormatSchema(props?.format)
     });
     const handleValuesChanged = useCallback9((_props) => {
@@ -2073,26 +2121,26 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
       onSave
     ]);
     const custom = useMemo7(() => ({
-      ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
+      ["format"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
         ...props2,
         options: FormatEnums.filter((value) => value !== FormatEnum5.None).map((value) => ({
           value,
           label: t(`format ${value}`)
         }))
       }),
-      ["referenceSchema"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
+      ["referenceSchema"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
         ...props2,
         options: schemas.map((schema) => ({
           value: schema.typename
         }))
       }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
+      ["referencePath"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
         ...props2,
         options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
           value: p.name
         })) : []
       }),
-      ["options"]: (props2) => /* @__PURE__ */ React14.createElement(SelectOptionInput, props2)
+      ["options"]: (props2) => /* @__PURE__ */ React13.createElement(SelectOptionInput, props2)
     }), [
       t,
       schemas,
@@ -2104,15 +2152,16 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
         props
       }, {
         F: __dxlog_file4,
-        L: 173,
+        L: 177,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return null;
     }
-    return /* @__PURE__ */ React14.createElement(Form, {
+    return /* @__PURE__ */ React13.createElement(Form, {
       key: field.id,
       autoFocus: true,
+      readonly,
       values: props,
       schema: fieldSchema,
       filter: propIsNotType,
@@ -2133,74 +2182,84 @@ var FieldEditor = ({ projection, field, registry, onSave, onCancel, outerSpacing
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
-import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema2 } from "effect";
-import React15, { useCallback as useCallback10, useMemo as useMemo8, useState as useState6 } from "react";
+import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
+import { Match, Schema as Schema2 } from "effect";
+import React14, { useCallback as useCallback10, useMemo as useMemo8, useState as useState7 } from "react";
 import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo-schema";
 import { invariant as invariant3 } from "@dxos/invariant";
+import { getSpace } from "@dxos/react-client/echo";
 import { Callout, IconButton as IconButton4, useTranslation as useTranslation9 } from "@dxos/react-ui";
+import { QueryEditor, QuerySerializer, createExpression } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
 import { cardSpacing as cardSpacing3 } from "@dxos/react-ui-stack";
-import { ghostHover, inputTextLabel, mx as mx9 } from "@dxos/react-ui-theme";
-import { FieldSchema, VIEW_FIELD_LIMIT, ProjectionModel } from "@dxos/schema";
+import { inputTextLabel, mx as mx7, subtleHover as subtleHover2 } from "@dxos/react-ui-theme";
+import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, typenameFromQuery } from "@dxos/schema";
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
-var grid = "grid grid-cols-[32px_1fr_32px_32px] min-bs-[2.5rem]";
-var ViewMetaSchema = Schema2.Struct({
-  typename: Format.URL.annotations({
-    title: "Typename"
-  })
-}).pipe(Schema2.mutable);
-var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, showHeading = false, onTypenameChanged, onDelete, outerSpacing = true }) => {
-  var _effect = _useSignals15();
+var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
+var listItemGrid = "grid grid-cols-subgrid col-span-5";
+var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly, showHeading = false, onQueryChanged, onDelete, outerSpacing = true }) => {
+  var _effect = _useSignals14();
   try {
+    const space = getSpace(view);
+    const schemaReadonly = !isMutable(schema);
     const { t } = useTranslation9(translationKey);
-    const projection = useMemo8(() => {
+    const projectionModel = useMemo8(() => {
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
       return new ProjectionModel(jsonSchema, view.projection);
     }, [
       schema,
       view.projection
     ]);
-    const [field, setField] = useState6();
-    const readonly = _readonly || !isMutable(schema);
-    const viewValues = useMemo8(() => {
-      return {
-        // TODO(burdon): Need to warn user of possible consequences of editing.
-        // TODO(burdon): Settings should have domain name owned by user.
-        typename: view.query.typename
-      };
+    const [expandedField, setExpandedField] = useState7();
+    const serializedQuery = Match.value(kind).pipe(Match.when("basic", () => typenameFromQuery(view.query)), Match.when("advanced", () => {
+      if (view.query.type !== "select") {
+        return "";
+      }
+      const serializer = new QuerySerializer();
+      return serializer.serialize(createExpression(view.query.filter));
+    }), Match.exhaustive);
+    const viewSchema = useMemo8(() => {
+      return Schema2.Struct({
+        query: kind === "basic" ? Format.URL.annotations({
+          title: "Record type"
+        }) : Schema2.String.annotations({
+          title: "Query"
+        })
+      }).pipe(Schema2.mutable);
     }, [
-      view.query.typename
+      kind
     ]);
-    const handleSelect = useCallback10((field2) => {
-      if (readonly) {
-        return;
-      }
-      setField((f) => f === field2 ? void 0 : field2);
+    const viewValues = useMemo8(() => ({
+      query: serializedQuery
+    }), [
+      serializedQuery
+    ]);
+    const handleToggleField = useCallback10((field) => {
+      setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
     }, [
       readonly
     ]);
     const handleAdd = useCallback10(() => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 88,
+        L: 106,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      const field2 = projection.createFieldProjection();
-      setField(field2);
+      const field = projectionModel.createFieldProjection();
+      setExpandedField(field.id);
     }, [
       schema,
-      projection,
+      projectionModel,
       readonly
     ]);
-    const handleUpdate = useCallback10(({ typename }) => {
+    const handleUpdate = useCallback10(({ query }) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 95,
+        L: 113,
         S: void 0,
         A: [
           "!readonly",
@@ -2208,38 +2267,38 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
         ]
       });
       requestAnimationFrame(() => {
-        if (view.query.typename !== typename && !readonly) {
-          onTypenameChanged?.(typename);
+        if (serializedQuery !== query && !readonly) {
+          onQueryChanged?.(query);
         }
       });
     }, [
-      view.query.typename,
-      onTypenameChanged,
+      serializedQuery,
+      onQueryChanged,
       readonly
     ]);
     const handleDelete = useCallback10((fieldId) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 107,
+        L: 125,
         S: void 0,
         A: [
           "!readonly",
           ""
         ]
       });
-      if (fieldId === field?.id) {
-        setField(void 0);
+      if (fieldId === expandedField) {
+        setExpandedField(void 0);
       }
       onDelete?.(fieldId);
     }, [
-      field,
+      expandedField,
       onDelete,
       readonly
     ]);
     const handleMove = useCallback10((fromIndex, toIndex) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 119,
+        L: 137,
         S: void 0,
         A: [
           "!readonly",
@@ -2256,104 +2315,120 @@ var ViewEditor = ({ classNames, schema, view, registry, readonly: _readonly, sho
       view.projection.fields,
       readonly
     ]);
-    const handleClose = useCallback10(() => setField(void 0), []);
-    const hiddenProperties = projection.getHiddenProperties();
+    const handleClose = useCallback10(() => setExpandedField(void 0), []);
     const handleHide = useCallback10((fieldId) => {
-      setField(void 0);
-      projection.hideFieldProjection(fieldId);
+      setExpandedField(void 0);
+      projectionModel.hideFieldProjection(fieldId);
     }, [
-      projection
+      projectionModel
     ]);
     const handleShow = useCallback10((property) => {
-      setField(void 0);
-      projection.showFieldProjection(property);
+      setExpandedField(void 0);
+      projectionModel.showFieldProjection(property);
     }, [
-      projection
+      projectionModel
     ]);
-    return /* @__PURE__ */ React15.createElement("div", {
-      role: "none",
-      className: mx9(classNames)
-    }, readonly && /* @__PURE__ */ React15.createElement("div", {
+    const custom = useMemo8(() => kind === "advanced" ? {
+      ["query"]: (props) => {
+        const handleChange = useCallback10((text) => props.onValueChange("string", text), [
+          props.onValueChange
+        ]);
+        return /* @__PURE__ */ React14.createElement(QueryEditor, {
+          space,
+          initialValue: props.getValue(),
+          onChange: handleChange
+        });
+      }
+    } : {}, []);
+    return /* @__PURE__ */ React14.createElement("div", {
       role: "none",
-      className: mx9("is-full", outerSpacing && "plb-cardSpacingBlock pli-cardSpacingInline")
-    }, /* @__PURE__ */ React15.createElement(Callout.Root, {
-      valence: "info"
-    }, /* @__PURE__ */ React15.createElement(Callout.Title, null, t("system schema description")))), /* @__PURE__ */ React15.createElement(Form, {
+      className: mx7(classNames)
+    }, schemaReadonly && /* @__PURE__ */ React14.createElement(Callout.Root, {
+      valence: "info",
+      classNames: [
+        "mlb-cardSpacingBlock",
+        outerSpacing && "mli-cardSpacingInline"
+      ]
+    }, /* @__PURE__ */ React14.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React14.createElement(Form, {
       autoSave: true,
-      schema: ViewMetaSchema,
+      schema: viewSchema,
       values: viewValues,
-      readonly,
+      readonly: readonly ? "disabled-input" : false,
       onSave: handleUpdate,
-      outerSpacing
-    }), /* @__PURE__ */ React15.createElement("div", {
+      outerSpacing,
+      Custom: custom
+    }), /* @__PURE__ */ React14.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
-    }, t("fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
+    }, /* @__PURE__ */ React14.createElement("h2", {
+      className: mx7(inputTextLabel)
+    }, t("fields label")), /* @__PURE__ */ React14.createElement(List2.Root, {
       items: view.projection.fields,
       isItem: Schema2.is(FieldSchema),
-      getId: (field2) => field2.id,
-      readonly,
-      onMove: readonly ? void 0 : handleMove
-    }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("div", {
-      role: "heading",
-      className: grid
-    }, /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement("div", {
-      className: "flex items-center text-sm"
-    }, t("field path label"))), /* @__PURE__ */ React15.createElement("div", {
-      role: "list",
-      className: "flex flex-col is-full"
-    }, fields?.map((field2) => /* @__PURE__ */ React15.createElement(List2.Item, {
-      key: field2.id,
-      item: field2,
-      classNames: mx9(grid, ghostHover, "overflow-hidden", !readonly && "cursor-pointer")
-    }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, null), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
-      onClick: () => handleSelect(field2)
-    }, field2.path), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
-      "data-testid": "hide-field-button",
-      icon: "ph--eye-slash--regular",
-      // TDOO(burdon): Is this the correct test?
-      disabled: view.projection.fields.length <= 1,
-      onClick: () => handleHide(field2.id)
-    }), !readonly && /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
-      disabled: view.projection.fields.length <= 1,
-      onClick: () => handleDelete(field2.id)
-    })))))), hiddenProperties.length > 0 && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("label", {
-      className: mx9(inputTextLabel)
-    }, t("hidden fields label")), /* @__PURE__ */ React15.createElement(List2.Root, {
-      items: hiddenProperties,
-      isItem: (item) => typeof item === "string",
-      getId: (property) => property
-    }, ({ items: properties }) => /* @__PURE__ */ React15.createElement("div", {
+      getId: (field) => field.id,
+      onMove: readonly ? void 0 : handleMove,
+      readonly
+    }, ({ items: fields }) => /* @__PURE__ */ React14.createElement(React14.Fragment, null, showHeading && /* @__PURE__ */ React14.createElement("h3", {
+      className: "text-sm"
+    }, t("field path label")), /* @__PURE__ */ React14.createElement("div", {
       role: "list",
-      className: "flex flex-col is-full"
-    }, properties?.map((property) => /* @__PURE__ */ React15.createElement(List2.Item, {
-      key: property,
-      item: property,
-      classNames: mx9(grid, ghostHover, !readonly && "cursor-pointer")
-    }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
-      disabled: true
-    }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, null, property), /* @__PURE__ */ React15.createElement(List2.ItemButton, {
-      icon: "ph--eye--regular",
-      onClick: () => handleShow(property),
-      "data-testid": "show-field-button"
-    }))))))), field && /* @__PURE__ */ React15.createElement(FieldEditor, {
-      key: field.id,
-      projection,
-      field,
-      registry,
-      onSave: handleClose
-    }), !readonly && !field && /* @__PURE__ */ React15.createElement("div", {
+      className: listGrid
+    }, fields?.map((field) => {
+      const hidden = field.visible === false;
+      return /* @__PURE__ */ React14.createElement(List2.Item, {
+        key: field.id,
+        item: field,
+        classNames: listItemGrid,
+        "aria-expanded": expandedField === field.id
+      }, /* @__PURE__ */ React14.createElement("div", {
+        role: "none",
+        className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
+      }, /* @__PURE__ */ React14.createElement(List2.ItemDragHandle, {
+        disabled: readonly
+      }), /* @__PURE__ */ React14.createElement(List2.ItemTitle, {
+        classNames: hidden && "text-subdued",
+        onClick: () => handleToggleField(field)
+      }, field.path), /* @__PURE__ */ React14.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)
+      }), /* @__PURE__ */ React14.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__ */ React14.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 && /* @__PURE__ */ React14.createElement("div", {
+        role: "none",
+        className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
+      }, /* @__PURE__ */ React14.createElement(FieldEditor, {
+        readonly: readonly || schemaReadonly ? "disabled-input" : false,
+        projection: projectionModel,
+        field,
+        registry,
+        onSave: handleClose
+      })));
+    }))))), !readonly && !expandedField && /* @__PURE__ */ React14.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React15.createElement(IconButton4, {
+    }, /* @__PURE__ */ React14.createElement(IconButton4, {
       icon: "ph--plus--regular",
       label: t("button add property"),
       onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
       disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
-      classNames: "flex is-full"
+      classNames: "is-full"
     })));
   } finally {
     _effect.f();
@@ -2370,8 +2445,6 @@ export {
   ControlPage,
   ControlSection,
   ControlSectionHeading,
-  DeprecatedFormContainer,
-  DeprecatedFormInput,
   FieldEditor,
   Form,
   FormProvider,