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

package/dist/lib/browser/index.mjs

@@ -8,7 +8,7 @@ var translations = [
         "hidden fields label": "Hidden Fields",
         "empty readonly ref field label": "(none)",
         // TODO(burdon): Standardize field/property.
-        "button add property": "Add property",
+        "add property button": "Add property",
         "field property label": "Property",
         "field property placeholder": "Property name",
         "field format label": "Type",
@@ -21,11 +21,11 @@ var translations = [
         "show field label": "Show field",
         "hide field label": "Hide field",
         "delete field label": "Delete field",
+        "ref field combobox input placeholder": "Search\u2026",
         "ref field placeholder_one": "Select\u2026",
         "ref field placeholder_other": "Select items\u2026",
         // TODO(burdon): Factor out?
-        "button cancel": "Cancel",
-        "button save": "Save",
+        "save button": "Save",
         // FormatEnum
         "format boolean": "Boolean",
         "format currency": "Currency",
@@ -39,7 +39,7 @@ var translations = [
         "format hostname": "Hostname",
         "format integer": "Integer",
         "format json": "JSON",
-        "format latlng": "Geopoint",
+        "format lnglat": "Geopoint",
         "format markdown": "Markdown",
         "format percent": "Percent",
         "format ref": "Reference",
@@ -82,7 +82,8 @@ var ControlPage = ({ children, classNames, ...props }) => {
   var _effect = _useSignals();
   try {
     return /* @__PURE__ */ React.createElement(StackItem.Content, {
-      classNames: "block overflow-y-auto [--control-spacing:var(--dx-trimMd)]"
+      scrollable: true,
+      classNames: "[--control-spacing:var(--dx-trimMd)]"
     }, /* @__PURE__ */ React.createElement("div", {
       role: "none",
       className: mx("pli-cardSpacingInline pbe-trimLg", classNames),
@@ -212,17 +213,17 @@ var ControlFrameItem = ({ title, description, children }) => {
 };
 
 // src/components/FieldEditor/FieldEditor.tsx
-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 { 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 useTranslation8 } from "@dxos/react-ui";
-import { getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
+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-schema";
+import { GeoLocation } from "@dxos/echo/internal";
 import { Input as Input3, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
 
@@ -470,7 +471,7 @@ var SelectOptionInput = ({ type, label, readonly, getStatus, getValue: getValue3
       readonly: !!readonly
     }, ({ items }) => /* @__PURE__ */ React4.createElement("div", {
       role: "list",
-      className: "w-full overflow-auto"
+      className: "is-full overflow-auto"
     }, items?.map((item) => /* @__PURE__ */ React4.createElement("div", {
       key: item.id
     }, /* @__PURE__ */ React4.createElement(List.Item, {
@@ -635,7 +636,7 @@ var BooleanInput = ({ type, label, inputOnly, getStatus, getValue: getValue3, on
     }), 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)
+      onCheckedChange: (value2) => onValueChange(type, value2)
     }), inputOnly && /* @__PURE__ */ React6.createElement(Input6.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
@@ -645,29 +646,29 @@ var SelectInput = ({ type, label, inputOnly, readonly, placeholder, options, get
   var _effect = _useSignals6();
   try {
     const { status, error } = getStatus();
-    const value = getValue3();
-    const handleValueChange = useCallback3((value2) => onValueChange(type, value2), [
+    const value2 = getValue3();
+    const handleValueChange = useCallback3((value3) => onValueChange(type, value3), [
       type,
       onValueChange
     ]);
-    return readonly && !value ? null : /* @__PURE__ */ React6.createElement(Input6.Root, {
+    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 === value)?.label ?? String(value)) : /* @__PURE__ */ React6.createElement(Select.Root, {
-      value,
+    }), 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: value2, label: label2 }) => (
+    }), /* @__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(value2),
-        value: String(value2)
-      }, label2 ?? String(value2))
+        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();
@@ -706,7 +707,7 @@ var MarkdownInput = ({ type, label, inputOnly, readonly, placeholder, getStatus,
       disabled: !!readonly,
       placeholder,
       value: getValue3() ?? "",
-      classNames: "min-bs-auto max-h-40 overflow-auto",
+      classNames: "min-bs-auto max-bs-40 overflow-auto",
       onChange: (event) => onValueChange(type, event.target.value),
       onBlur,
       style: {
@@ -720,9 +721,9 @@ var MarkdownInput = ({ type, label, inputOnly, readonly, placeholder, getStatus,
 };
 
 // src/components/Form/Form.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
+import { useSignals as _useSignals13 } 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 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
@@ -734,15 +735,15 @@ import { mx as mx4 } from "@dxos/react-ui-theme";
 
 // src/components/Form/FormContext.tsx
 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 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-schema";
+import { getValue as getValue2 } from "@dxos/echo/internal";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
 
 // src/hooks/useForm.ts
-import { SchemaAST } from "effect";
+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-schema";
+import { getValue, setValue } from "@dxos/echo/internal";
 import { createJsonPath, fromEffectValidationPath } from "@dxos/effect";
 import { invariant } from "@dxos/invariant";
 import { log } from "@dxos/log";
@@ -751,7 +752,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: 95,
+    L: 96,
     S: void 0,
     A: [
       "SchemaAST.isTypeLiteral(schema.ast)",
@@ -845,17 +846,17 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
   }, [
     values
   ]);
-  const onValueChange = useCallback4((path, type, value) => {
+  const onValueChange = useCallback4((path, type, value2) => {
     const jsonPath = createJsonPath(path);
-    let parsedValue = value;
+    let parsedValue = value2;
     try {
       if (type === "number") {
-        parsedValue = parseFloat(value) || 0;
+        parsedValue = parseFloat(value2) || 0;
       }
     } catch (err) {
       log.catch(err, void 0, {
         F: __dxlog_file,
-        L: 215,
+        L: 217,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -865,15 +866,16 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
       ...setValue(values, jsonPath, parsedValue)
     };
     setValues(newValues);
-    setChanged((prev) => ({
-      ...prev,
+    const newChanged = {
+      ...changed,
       [jsonPath]: true
-    }));
+    };
+    setChanged(newChanged);
     onValuesChanged?.(newValues);
     const isValid = validate(newValues);
     if (isValid && onValid) {
       onValid(newValues, {
-        changed
+        changed: newChanged
       });
     }
   }, [
@@ -923,10 +925,10 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
     onTouched
   ]);
 };
-var createKeySet = (obj, value) => {
+var createKeySet = (obj, value2) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 277,
+    L: 280,
     S: void 0,
     A: [
       "obj",
@@ -935,7 +937,7 @@ var createKeySet = (obj, value) => {
   });
   return Object.keys(obj).reduce((acc, key) => ({
     ...acc,
-    [key]: value
+    [key]: value2
   }), {});
 };
 var flatMap = (errors) => {
@@ -950,7 +952,8 @@ var flatMap = (errors) => {
 
 // src/hooks/useRefQueryLookupHandler.ts
 import { useCallback as useCallback5 } from "react";
-import { getObjectDXN } from "@dxos/echo-schema";
+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 }) => {
@@ -967,7 +970,7 @@ var useRefQueryLookupHandler = ({ space }) => {
       }
       const item = {
         dxn,
-        label: object?.name ?? object?.id ?? ""
+        label: Obj.getLabel(object) ?? object?.id ?? ""
       };
       return item;
     }).filter(isNonNullable);
@@ -977,12 +980,14 @@ var useRefQueryLookupHandler = ({ space }) => {
 };
 
 // src/hooks/useQueryRefOptions.ts
-import { useEffect as useEffect5, useState as useState4 } from "react";
+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) {
       return;
@@ -1002,7 +1007,7 @@ var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
       } catch (error) {
         log2.error("Failed to fetch ref options:", error, {
           F: __dxlog_file2,
-          L: 42,
+          L: 51,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -1014,10 +1019,12 @@ var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
     void fetchOptions();
   }, [
     refTypeInfo,
-    onQueryRefOptions
+    onQueryRefOptions,
+    state
   ]);
   return {
     options,
+    update,
     loading
   };
 };
@@ -1040,7 +1047,7 @@ var useInputProps = (path = []) => {
   return useMemo3(() => ({
     getStatus: () => getStatus(stablePath),
     getValue: () => getFormValue(stablePath),
-    onValueChange: (type, value) => onValueChange(stablePath, type, value),
+    onValueChange: (type, value2) => onValueChange(stablePath, type, value2),
     onBlur: () => onTouched(stablePath)
   }), [
     getStatus,
@@ -1054,7 +1061,7 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
   var _effect = _useSignals7();
   try {
     const form = useForm(formOptions);
-    const handleKeyDown = useCallback6((event) => {
+    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";
@@ -1070,7 +1077,9 @@ var FormProvider = ({ children, formRef, autoSave, ...formOptions }) => {
         }
       }
     }, [
-      form,
+      form.canSave,
+      form.formIsValid,
+      form.handleSave,
       autoSave
     ]);
     useEffect6(() => {
@@ -1107,14 +1116,14 @@ var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
     }, onCancel && !readonly && /* @__PURE__ */ React8.createElement(IconButton2, {
       "data-testid": "cancel-button",
       icon: "ph--x--regular",
-      label: t("button cancel"),
+      label: t("cancel button"),
       onClick: onCancel
     }), handleSave && /* @__PURE__ */ React8.createElement(IconButton2, {
       type: "submit",
       "data-testid": "save-button",
       disabled: !canSave,
       icon: "ph--check--regular",
-      label: t("button save"),
+      label: t("save button"),
       onClick: handleSave
     }));
   } finally {
@@ -1123,44 +1132,46 @@ var FormActions = ({ readonly, onCancel, outerSpacing = true }) => {
 };
 
 // src/components/Form/FormContent.tsx
-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 React11, { forwardRef, useMemo as useMemo5 } from "react";
+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, { Component, 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";
-import { isNotFalsy } from "@dxos/util";
+import { isTruthy } from "@dxos/util";
 
 // src/util/field.ts
-import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo-schema";
-var parseValue = ({ type, format, value }) => {
-  if (value === void 0 || value === null || value === "") {
+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 value === "string") {
-          const lowercaseValue = value.toLowerCase();
+        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(value);
+        return Boolean(value2);
       }
       case TypeEnum.Number: {
-        const cleaned = typeof value === "string" ? value.replace(/[^0-9.-]+/g, "") : value;
+        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(value);
+        return String(value2);
       default: {
-        return value;
+        return value2;
       }
     }
   };
@@ -1184,12 +1195,12 @@ var parseValue = ({ type, format, value }) => {
     case FormatEnum.Date:
     case FormatEnum.Time:
     case FormatEnum.Timestamp: {
-      const date = new Date(value);
+      const date = new Date(value2);
       return isNaN(date.getTime()) ? null : date;
     }
     case FormatEnum.GeoPoint: {
-      if (typeof value === "string") {
-        const cleaned = value.replace(/[^0-9.,-]+/g, "");
+      if (typeof value2 === "string") {
+        const cleaned = value2.replace(/[^0-9.,-]+/g, "");
         const parts = cleaned.split(",");
         if (parts.length === 2) {
           const lat = parseFloat(parts[0]);
@@ -1208,7 +1219,7 @@ var parseValue = ({ type, format, value }) => {
       ];
     }
     default: {
-      return value;
+      return value2;
     }
   }
 };
@@ -1255,19 +1266,19 @@ var pathNotUniqueError = (path) => ({
 
 // src/util/formatting.ts
 import { format as formatDate } from "date-fns/format";
-import { FormatEnum as FormatEnum2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo-schema";
-var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
+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 value.toLocaleString().toUpperCase();
+        return value2.toLocaleString().toUpperCase();
       case TypeEnum2.Number:
-        return value.toLocaleString(locale);
+        return value2.toLocaleString(locale);
       case TypeEnum2.String:
       case TypeEnum2.Ref:
-        return String(value);
+        return String(value2);
       default: {
-        return String(value);
+        return String(value2);
       }
     }
   };
@@ -1286,10 +1297,10 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
       return formatScalar(TypeEnum2.String);
     }
     case FormatEnum2.Percent: {
-      return `${value * 100}%`;
+      return `${value2 * 100}%`;
     }
     case FormatEnum2.Currency: {
-      return value.toLocaleString(locale, {
+      return value2.toLocaleString(locale, {
         style: "currency",
         currency: "USD",
         minimumFractionDigits: 2,
@@ -1298,53 +1309,53 @@ var formatForDisplay = ({ type, format, value, locale = void 0 }) => {
     }
     case FormatEnum2.Date: {
       try {
-        return formatDate(new Date(value), "yyyy-MM-dd");
+        return formatDate(new Date(value2), "yyyy-MM-dd");
       } catch (error) {
         return "Invalid Date";
       }
     }
     case FormatEnum2.Time: {
       try {
-        return formatDate(new Date(value), "HH:mm:ss");
+        return formatDate(new Date(value2), "HH:mm:ss");
       } catch (error) {
         return "Invalid Time";
       }
     }
     case FormatEnum2.DateTime: {
       try {
-        return formatDate(new Date(value), "yyyy-MM-dd HH:mm:ss");
+        return formatDate(new Date(value2), "yyyy-MM-dd HH:mm:ss");
       } catch (error) {
         return "Invalid DateTime";
       }
     }
     case FormatEnum2.GeoPoint: {
-      if (value === null || value === void 0) {
+      if (value2 === null || value2 === void 0) {
         return "";
       }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
+      if (Array.isArray(value2) && value2.length >= 2 && value2.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value2);
         return `${latitude},${longitude}`;
       }
-      return String(value);
+      return String(value2);
     }
     default: {
-      if (value === null || value === "undefined") {
+      if (value2 === null || value2 === "undefined") {
         return "";
       }
-      return String(value);
+      return String(value2);
     }
   }
 };
-var formatForEditing = ({ type, format, value, locale = void 0 }) => {
+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(value);
+        return String(value2);
       default:
-        return String(value);
+        return String(value2);
     }
   };
   if (!format) {
@@ -1358,61 +1369,54 @@ var formatForEditing = ({ type, format, value, locale = void 0 }) => {
       return formatScalar(type);
     }
     case FormatEnum2.Percent: {
-      return String(value * 100);
+      return String(value2 * 100);
     }
     case FormatEnum2.Currency: {
-      return String(value);
+      return String(value2);
     }
     case FormatEnum2.DateTime: {
-      const date = new Date(value);
+      const date = new Date(value2);
       return date.toISOString();
     }
     case FormatEnum2.Date: {
-      const date = new Date(value);
+      const date = new Date(value2);
       return date.toISOString().split("T")[0];
     }
     case FormatEnum2.Time: {
-      const date = new Date(value);
+      const date = new Date(value2);
       return date.toISOString().split("T")[1].split(".")[0];
     }
     case FormatEnum2.GeoPoint: {
-      if (value === null || value === void 0) {
+      if (value2 === null || value2 === void 0) {
         return "";
       }
-      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
-        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value);
+      if (Array.isArray(value2) && value2.length >= 2 && value2.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation3.fromGeoPoint(value2);
         return `${latitude},${longitude}`;
       }
-      return String(value);
+      return String(value2);
     }
     default: {
-      return String(value);
+      return String(value2);
     }
   }
 };
 
 // src/util/refs.ts
-import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo/internal";
 import { findAnnotation } from "@dxos/effect";
 
 // src/util/schema.ts
-import { SchemaAST as SchemaAST2 } from "effect";
+import * as SchemaAST2 from "effect/SchemaAST";
 import { findNode } from "@dxos/effect";
 var findArrayElementType = (ast) => {
   const tupleType = findNode(ast, SchemaAST2.isTupleType);
-  const elementType = tupleType?.rest[0]?.type;
-  return elementType;
+  return tupleType?.rest[0]?.type;
 };
 
 // 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) {
@@ -1425,14 +1429,21 @@ var getRefProps = (property) => {
       }
     }
   }
+  if (format === FormatEnum3.Ref) {
+    return {
+      ast,
+      isArray: false
+    };
+  }
   return void 0;
 };
 
 // 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 * 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";
@@ -1446,14 +1457,14 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
     const values = useFormValues(path ?? []) ?? [];
     invariant2(Array.isArray(values), `Values at path ${path?.join(".")} must be an array.`, {
       F: __dxlog_file3,
-      L: 36,
+      L: 37,
       S: void 0,
       A: [
         "Array.isArray(values)",
         "`Values at path ${path?.join('.')} must be an array.`"
       ]
     });
-    const label = title ?? pipe(name, capitalize);
+    const label = title ?? Function.pipe(name, String2.capitalize);
     const elementType = findArrayElementType(ast);
     const getDefaultObjectValue = (typeNode) => {
       const baseNode = findNode2(typeNode, isDiscriminatedUnion);
@@ -1467,7 +1478,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       ]));
     };
     const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-    const handleAdd = useCallback7(() => {
+    const handleAdd = useCallback8(() => {
       inputProps.onValueChange(type, [
         ...values,
         getDefaultValue()
@@ -1478,7 +1489,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       inputProps,
       values
     ]);
-    const handleRemove = useCallback7((index) => {
+    const handleRemove = useCallback8((index) => {
       const newValues = values.filter((_, i) => i !== index);
       inputProps.onValueChange(type, newValues);
     }, [
@@ -1534,7 +1545,7 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
 };
 
 // src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo-schema";
+import { FormatEnum as FormatEnum4 } from "@dxos/echo/internal";
 var getInputComponent = (type, format) => {
   switch (format) {
     case FormatEnum4.GeoPoint:
@@ -1553,33 +1564,129 @@ var getInputComponent = (type, format) => {
 };
 
 // src/components/Form/RefField.tsx
-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 { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
+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 { DXN } from "@dxos/keys";
-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 { 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";
+
+// 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], {
+      ns: createOptionLabel[1].ns,
+      text: searchString
+    })))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
+  } finally {
+    _effect.f();
+  }
+});
+ObjectPickerContent.displayName = "ObjectPickerContent";
+var ObjectPicker = {
+  Root: Combobox.Root,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
+  Content: ObjectPickerContent
+};
+
+// src/components/Form/RefField.tsx
 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();
+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 } = useTranslation7(translationKey);
-    const refTypeInfo = useMemo4(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
+    const { t } = useTranslation8(translationKey);
+    const refTypeInfo = useMemo5(() => ast ? findAnnotation2(ast, ReferenceAnnotationId2) : void 0, [
       ast
     ]);
-    const { options: availableOptions, loading: _loading } = useQueryRefOptions({
+    const { options: availableOptions, update: updateOptions, loading: _loading } = useQueryRefOptions({
       refTypeInfo,
       onQueryRefOptions
     });
     if (refTypeInfo && refTypeInfo?.typename === getTypeAnnotation(Expando)?.typename || !onQueryRefOptions) {
-      return /* @__PURE__ */ React10.createElement(RefFieldFallback, {
+      return /* @__PURE__ */ React11.createElement(RefFieldFallback, {
         type,
         label,
         placeholder,
@@ -1591,7 +1698,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
         ...restInputProps
       });
     }
-    const handleGetValue = useCallback8(() => {
+    const handleGetValue = useCallback10(() => {
       const formValue = getValue3();
       const unknownToRefOption = (val) => {
         const isRef = Ref.isRef(val);
@@ -1619,7 +1726,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
       availableOptions,
       array
     ]);
-    const handleUpdate = useCallback8((ids) => {
+    const handleUpdate = useCallback10((ids) => {
       if (ids.length === 0) {
         onValueChange("object", void 0);
         return;
@@ -1642,22 +1749,22 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
       array,
       onValueChange
     ]);
+    const handleCreate = useCallback10((values) => {
+      onCreate?.(values);
+      updateOptions();
+    }, [
+      onCreate,
+      updateOptions
+    ]);
     if (!refTypeInfo) {
       return null;
     }
     const { status, error } = restInputProps.getStatus();
     const items = handleGetValue();
-    const selectedIds = useMemo4(() => items.map((i) => i.id), [
+    const selectedIds = useMemo5(() => 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) => {
+    const toggleSelect = useCallback10((id) => {
       if (array) {
         const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [
           ...selectedIds,
@@ -1678,28 +1785,28 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
       selectedIds,
       handleUpdate
     ]);
-    return readonly && items.length < 1 ? null : /* @__PURE__ */ React10.createElement(Input7.Root, {
+    return readonly && items.length < 1 ? null : /* @__PURE__ */ React11.createElement(Input7.Root, {
       validationValence: status
-    }, !inputOnly && /* @__PURE__ */ React10.createElement(InputHeader, {
+    }, !inputOnly && /* @__PURE__ */ React11.createElement(InputHeader, {
       error,
       label
-    }), /* @__PURE__ */ React10.createElement("div", {
+    }), /* @__PURE__ */ React11.createElement("div", {
       "data-no-submit": true
-    }, readonly ? items.length < 1 ? /* @__PURE__ */ React10.createElement("p", {
+    }, readonly ? items.length < 1 ? /* @__PURE__ */ React11.createElement("p", {
       className: mx5(descriptionText, "mbe-2")
-    }, t("empty readonly ref field label")) : items.map((item) => /* @__PURE__ */ React10.createElement(DxAnchor, {
+    }, 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__ */ React10.createElement(PopoverCombobox.Root, null, /* @__PURE__ */ React10.createElement(PopoverCombobox.Trigger, {
+    }, item.label)) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
       asChild: true
-    }, /* @__PURE__ */ React10.createElement(Button2, {
+    }, /* @__PURE__ */ React11.createElement(Button2, {
       variant: "ghost",
       classNames: "is-full text-start gap-2"
-    }, /* @__PURE__ */ React10.createElement("div", {
+    }, /* @__PURE__ */ React11.createElement("div", {
       role: "none",
       className: "grow"
-    }, items?.length ? items?.map((item) => /* @__PURE__ */ React10.createElement(TagPickerItem, {
+    }, items?.length ? items?.map((item) => /* @__PURE__ */ React11.createElement(DxTagPickerItem, {
       key: item.id,
       itemId: item.id,
       label: item.label,
@@ -1712,45 +1819,29 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
           toggleSelect(item.id);
         }
       }
-    })) : /* @__PURE__ */ React10.createElement("span", {
+    })) : /* @__PURE__ */ React11.createElement("span", {
       className: "text-description"
     }, placeholder ?? t("ref field placeholder", {
       count: array ? 99 : 1
-    }))), /* @__PURE__ */ React10.createElement(Icon2, {
+    }))), /* @__PURE__ */ React11.createElement(Icon3, {
       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));
+    }))), /* @__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();
   }
 };
 var RefFieldFallback = ({ type, label, readonly, placeholder, inputOnly, getValue: getValue3, onValueChange, ...restInputProps }) => {
-  var _effect = _useSignals10();
+  var _effect = _useSignals11();
   try {
     const handleOnValueChange = (_type, dxnString) => {
       const dxn = DXN.tryParse(dxnString);
@@ -1772,7 +1863,7 @@ var RefFieldFallback = ({ type, label, readonly, placeholder, inputOnly, getValu
       }
       return void 0;
     };
-    return /* @__PURE__ */ React10.createElement(TextInput, {
+    return /* @__PURE__ */ React11.createElement(TextInput, {
       type,
       label,
       readonly,
@@ -1788,16 +1879,16 @@ var RefFieldFallback = ({ type, label, readonly, placeholder, inputOnly, getValu
 };
 
 // src/components/Form/FormContent.tsx
-var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptions, createOptionLabel, createOptionIcon, onCreateFromQuery, lookupComponent, Custom }) => {
-  var _effect = _useSignals11();
+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 = useMemo5(() => title ?? pipe2(name, capitalize2), [
+    const label = useMemo6(() => title ?? Function2.pipe(name, StringEffect.capitalize), [
       title,
       name
     ]);
-    const placeholder = useMemo5(() => examples?.length ? `Example: "${examples[0]}"` : description, [
+    const placeholder = useMemo6(() => examples?.length ? `Example: "${examples[0]}"` : description, [
       examples,
       description
     ]);
@@ -1819,7 +1910,7 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
     const jsonPath = createJsonPath3(path ?? []);
     const CustomComponent = Custom?.[jsonPath];
     if (CustomComponent) {
-      return /* @__PURE__ */ React11.createElement(CustomComponent, {
+      return /* @__PURE__ */ React12.createElement(CustomComponent, {
         type,
         format,
         label,
@@ -1831,7 +1922,7 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
     }
     const refProps = getRefProps(property);
     if (refProps) {
-      return /* @__PURE__ */ React11.createElement(RefField, {
+      return /* @__PURE__ */ React12.createElement(RefField, {
         ast: refProps.ast,
         array: refProps.isArray,
         type,
@@ -1843,12 +1934,14 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
         onQueryRefOptions,
         createOptionLabel,
         createOptionIcon,
-        onCreateFromQuery,
+        onCreate,
+        createSchema,
+        createInitialValuePath,
         ...inputProps
       });
     }
     if (array) {
-      return /* @__PURE__ */ React11.createElement(ArrayField, {
+      return /* @__PURE__ */ React12.createElement(ArrayField, {
         property,
         path,
         inputProps,
@@ -1858,7 +1951,7 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
     }
     const InputComponent = getInputComponent(type, format);
     if (InputComponent) {
-      return /* @__PURE__ */ React11.createElement(InputComponent, {
+      return /* @__PURE__ */ React12.createElement(InputComponent, {
         type,
         format,
         label,
@@ -1869,7 +1962,7 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
       });
     }
     if (options) {
-      return /* @__PURE__ */ React11.createElement(SelectInput, {
+      return /* @__PURE__ */ React12.createElement(SelectInput, {
         type,
         format,
         readonly,
@@ -1887,9 +1980,9 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
       const baseNode = findNode3(ast, isDiscriminatedUnion2);
       const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, inputProps.getValue()) : findNode3(ast, SchemaAST4.isTypeLiteral);
       if (typeLiteral) {
-        return /* @__PURE__ */ React11.createElement(React11.Fragment, null, !inline && /* @__PURE__ */ React11.createElement("h3", {
+        return /* @__PURE__ */ React12.createElement(React12.Fragment, null, !inline && /* @__PURE__ */ React12.createElement("h3", {
           className: mx6("text-lg mlb-inputSpacingBlock first:mbs-0")
-        }, label), /* @__PURE__ */ React11.createElement(FormFields, {
+        }, label), /* @__PURE__ */ React12.createElement(FormFields, {
           schema: Schema.make(typeLiteral),
           path,
           readonly,
@@ -1897,7 +1990,7 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
           onQueryRefOptions,
           createOptionLabel,
           createOptionIcon,
-          onCreateFromQuery,
+          onCreate,
           Custom,
           lookupComponent
         }));
@@ -1908,11 +2001,11 @@ var FormField = ({ property, path, readonly, inline, projection, onQueryRefOptio
     _effect.f();
   }
 };
-var FormFields = /* @__PURE__ */ forwardRef(({ classNames, schema, path, filter, sort, projection, readonly, lookupComponent, Custom, onQueryRefOptions, ...props }, forwardRef2) => {
-  var _effect = _useSignals11();
+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 = useMemo5(() => {
+    const properties = useMemo6(() => {
       const props2 = getSchemaProperties2(schema.ast, values);
       if (projection) {
         const fieldProjections = projection.getFieldProjections();
@@ -1940,13 +2033,18 @@ var FormFields = /* @__PURE__ */ forwardRef(({ classNames, schema, path, filter,
       sort,
       projection?.fields
     ]);
-    return /* @__PURE__ */ React11.createElement("div", {
+    return /* @__PURE__ */ React12.createElement("div", {
       role: "form",
       className: mx6("is-full", classNames),
-      ref: forwardRef2
+      ref: forwardRef4
     }, properties.map((property) => {
-      return /* @__PURE__ */ React11.createElement(FormField, {
+      return /* @__PURE__ */ React12.createElement(ErrorBoundary, {
         key: property.name,
+        path: [
+          ...path ?? [],
+          property.name
+        ]
+      }, /* @__PURE__ */ React12.createElement(FormField, {
         property,
         path: [
           ...path ?? [],
@@ -1958,16 +2056,46 @@ var FormFields = /* @__PURE__ */ forwardRef(({ classNames, schema, path, filter,
         lookupComponent,
         Custom,
         ...props
-      });
-    }).filter(isNotFalsy));
+      }));
+    }).filter(isTruthy));
   } finally {
     _effect.f();
   }
 });
+var ErrorBoundary = 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__ */ React12.createElement("div", {
+        className: "flex gap-2 border border-roseFill font-mono text-sm"
+      }, /* @__PURE__ */ React12.createElement("span", {
+        className: "bg-roseFill text-surfaceText pli-1 font-thin"
+      }, "ERROR"), String(this.props.path?.join(".")));
+    }
+    return this.props.children;
+  }
+  resetError() {
+    this.setState({
+      error: void 0
+    });
+  }
+};
 
 // src/components/Form/Form.tsx
-var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, autoSave, outerSpacing = true, schema, onCancel, onValuesChanged, onValidate, onSave, ...props }) => {
-  var _effect = _useSignals12();
+var Form = ({ classNames, id, 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();
@@ -1981,11 +2109,15 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
     }, [
       autoFocus
     ]);
-    const handleValid = useMemo6(() => autoSave ? onSave : void 0, [
+    const handleValid = useCallback11(async (values, meta) => {
+      if (autoSave) {
+        await onSave?.(values, meta);
+      }
+    }, [
       autoSave,
       onSave
     ]);
-    return /* @__PURE__ */ React12.createElement(FormProvider, {
+    return /* @__PURE__ */ React13.createElement(FormProvider, {
       formRef,
       schema,
       autoSave,
@@ -1994,11 +2126,14 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
       onValidate,
       onValid: handleValid,
       onSave
-    }, /* @__PURE__ */ React12.createElement("div", {
+    }, /* @__PURE__ */ React13.createElement("div", {
       role: "none",
       className: "contents",
+      ...id && {
+        "data-object-id": id
+      },
       "data-testid": testId
-    }, /* @__PURE__ */ React12.createElement(FormFields, {
+    }, /* @__PURE__ */ React13.createElement(FormFields, {
       ...props,
       ref: formRef,
       classNames: [
@@ -2008,7 +2143,7 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
       ],
       readonly,
       schema
-    }), (onCancel || onSave) && !autoSave && !readonly && /* @__PURE__ */ React12.createElement(FormActions, {
+    }), (onCancel || onSave) && !autoSave && !readonly && /* @__PURE__ */ React13.createElement(FormActions, {
       readonly,
       onCancel,
       outerSpacing
@@ -2021,9 +2156,9 @@ 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 = ({ readonly, projection, field, registry, onSave, onCancel, outerSpacing }) => {
-  var _effect = _useSignals13();
+  var _effect = _useSignals14();
   try {
-    const { t } = useTranslation8(translationKey);
+    const { t } = useTranslation9(translationKey);
     const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
     useEffect8(() => setProps(projection.getFieldProjection(field.id).props), [
       field,
@@ -2053,7 +2188,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
     const [{ fieldSchema }, setFieldSchema] = useState6({
       fieldSchema: getFormatSchema(props?.format)
     });
-    const handleValuesChanged = useCallback9((_props) => {
+    const handleValuesChanged = useCallback12((_props) => {
       setFieldSchema((prev) => {
         const fieldSchema2 = getFormatSchema(_props.format);
         if (prev.fieldSchema === fieldSchema2) {
@@ -2074,10 +2209,12 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       });
       setProps((props2) => {
         const type = formatToType[_props.format];
+        const additionalProps = formatToAdditionalPropertyAttributes[_props.format];
         if (props2.type !== type) {
           return {
             ...props2,
             ..._props,
+            ...additionalProps,
             type
           };
         }
@@ -2088,7 +2225,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       props.format,
       props.referenceSchema
     ]);
-    const handleValidate = useCallback9(({ property }) => {
+    const handleValidate = useCallback12(({ property }) => {
       if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
         return [
           {
@@ -2101,7 +2238,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       projection.fields,
       field
     ]);
-    const handleSave = useCallback9((props2) => {
+    const handleSave = useCallback12((props2) => {
       projection.setFieldProjection({
         field,
         props: props2
@@ -2112,51 +2249,51 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       field,
       onSave
     ]);
-    const handleCancel = useCallback9(() => {
+    const handleCancel = useCallback12(() => {
       requestAnimationFrame(() => onCancel?.());
       onSave();
     }, [
       onSave
     ]);
     const custom = useMemo7(() => ({
-      ["format"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
+      ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
-        options: FormatEnums.filter((value) => value !== FormatEnum5.None).map((value) => ({
-          value,
-          label: t(`format ${value}`)
+        options: FormatEnums.filter((value2) => value2 !== FormatEnum5.None).map((value2) => ({
+          value: value2,
+          label: t(`format ${value2}`)
         }))
       }),
-      ["referenceSchema"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
+      ["referenceSchema"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
         options: schemas.map((schema) => ({
           value: schema.typename
         }))
       }),
-      ["referencePath"]: (props2) => /* @__PURE__ */ React13.createElement(SelectInput, {
+      ["referencePath"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
         options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
           value: p.name
         })) : []
       }),
-      ["options"]: (props2) => /* @__PURE__ */ React13.createElement(SelectOptionInput, props2)
+      ["options"]: (props2) => /* @__PURE__ */ React14.createElement(SelectOptionInput, props2)
     }), [
       t,
       schemas,
       referenceSchema
     ]);
-    const propIsNotType = useCallback9((props2) => props2.filter((p) => p.name !== "type"), []);
+    const propIsNotType = useCallback12((props2) => props2.filter((p) => p.name !== "type"), []);
     if (!fieldSchema) {
       log3.warn("invalid format", {
         props
       }, {
         F: __dxlog_file4,
-        L: 177,
+        L: 180,
         S: void 0,
         C: (f, a) => f(...a)
       });
       return null;
     }
-    return /* @__PURE__ */ React13.createElement(Form, {
+    return /* @__PURE__ */ React14.createElement(Form, {
       key: field.id,
       autoFocus: true,
       readonly,
@@ -2180,67 +2317,93 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
-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 { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
+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 { 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 { Callout, IconButton as IconButton4, Input as Input8, 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, typenameFromQuery } from "@dxos/schema";
+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 = ({ classNames, schema, view, kind = "basic", registry, readonly, showHeading = false, onQueryChanged, onDelete, outerSpacing = true }) => {
-  var _effect = _useSignals14();
+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 space = getSpace(view);
     const schemaReadonly = !isMutable(schema);
-    const { t } = useTranslation9(translationKey);
+    const { t } = useTranslation10(translationKey);
     const projectionModel = useMemo8(() => {
       const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
       return new ProjectionModel(jsonSchema, view.projection);
     }, [
       schema,
-      view.projection
+      JSON.stringify(view.projection)
+    ]);
+    useImperativeHandle(forwardedRef, () => projectionModel, [
+      projectionModel
     ]);
     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 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(() => {
-      return Schema2.Struct({
-        query: kind === "basic" ? Format.URL.annotations({
+      const base = Schema2.Struct({
+        query: mode === "schema" ? Format.URL.annotations({
           title: "Record type"
-        }) : Schema2.String.annotations({
+        }) : QueryAST.Query.annotations({
           title: "Query"
         })
-      }).pipe(Schema2.mutable);
+      });
+      if (mode === "query" || mode === "named-query") {
+        const name = Schema2.Struct({
+          name: Schema2.optional(Schema2.String.annotations({
+            title: "Name"
+          }))
+        });
+        return Schema2.Struct({
+          ...mode === "named-query" ? {
+            ...name.fields,
+            ...base.fields
+          } : base.fields,
+          target: Schema2.optional(Schema2.String.annotations({
+            title: "Target Queue"
+          }))
+        }).pipe(Schema2.mutable);
+      }
+      return base.pipe(Schema2.mutable);
     }, [
-      kind
+      mode
     ]);
     const viewValues = useMemo8(() => ({
-      query: serializedQuery
+      name: view.name,
+      query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
+      target: queueTarget
     }), [
-      serializedQuery
+      view.name,
+      mode,
+      view.query.ast,
+      queueTarget
     ]);
-    const handleToggleField = useCallback10((field) => {
+    const handleToggleField = useCallback13((field) => {
       setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
     }, [
       readonly
     ]);
-    const handleAdd = useCallback10(() => {
+    const handleAdd = useCallback13(() => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 106,
+        L: 134,
         S: void 0,
         A: [
           "!readonly",
@@ -2254,10 +2417,10 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
       projectionModel,
       readonly
     ]);
-    const handleUpdate = useCallback10(({ query }) => {
+    const handleUpdate = useCallback13((values) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 113,
+        L: 141,
         S: void 0,
         A: [
           "!readonly",
@@ -2265,19 +2428,24 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
         ]
       });
       requestAnimationFrame(() => {
-        if (serializedQuery !== query && !readonly) {
-          onQueryChanged?.(query);
+        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);
       });
     }, [
-      serializedQuery,
       onQueryChanged,
-      readonly
+      readonly,
+      view,
+      queueTarget,
+      mode
     ]);
-    const handleDelete = useCallback10((fieldId) => {
+    const handleDelete = useCallback13((fieldId) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 125,
+        L: 157,
         S: void 0,
         A: [
           "!readonly",
@@ -2293,10 +2461,10 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
       onDelete,
       readonly
     ]);
-    const handleMove = useCallback10((fromIndex, toIndex) => {
+    const handleMove = useCallback13((fromIndex, toIndex) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 137,
+        L: 169,
         S: void 0,
         A: [
           "!readonly",
@@ -2313,41 +2481,37 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
       view.projection.fields,
       readonly
     ]);
-    const handleClose = useCallback10(() => setExpandedField(void 0), []);
-    const handleHide = useCallback10((fieldId) => {
+    const handleClose = useCallback13(() => setExpandedField(void 0), []);
+    const handleHide = useCallback13((fieldId) => {
       setExpandedField(void 0);
       projectionModel.hideFieldProjection(fieldId);
     }, [
       projectionModel
     ]);
-    const handleShow = useCallback10((property) => {
+    const handleShow = useCallback13((property) => {
       setExpandedField(void 0);
       projectionModel.showFieldProjection(property);
     }, [
       projectionModel
     ]);
-    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", {
+    const custom = useMemo8(() => mode === "query" ? customFields({
+      types,
+      tags
+    }) : void 0, [
+      types,
+      tags,
+      mode
+    ]);
+    return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: mx7(classNames)
-    }, schemaReadonly && /* @__PURE__ */ React14.createElement(Callout.Root, {
+    }, schemaReadonly && mode === "schema" && /* @__PURE__ */ React15.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, {
+    }, /* @__PURE__ */ React15.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React15.createElement(Form, {
       autoSave: true,
       schema: viewSchema,
       values: viewValues,
@@ -2355,51 +2519,51 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
       onSave: handleUpdate,
       outerSpacing,
       Custom: custom
-    }), /* @__PURE__ */ React14.createElement("div", {
+    }), /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React14.createElement("h2", {
+    }, /* @__PURE__ */ React15.createElement("h2", {
       className: mx7(inputTextLabel)
-    }, t("fields label")), /* @__PURE__ */ React14.createElement(List2.Root, {
+    }, 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__ */ React14.createElement(React14.Fragment, null, showHeading && /* @__PURE__ */ React14.createElement("h3", {
+    }, ({ items: fields }) => /* @__PURE__ */ React15.createElement(React15.Fragment, null, showHeading && /* @__PURE__ */ React15.createElement("h3", {
       className: "text-sm"
-    }, t("field path label")), /* @__PURE__ */ React14.createElement("div", {
+    }, t("field path label")), /* @__PURE__ */ React15.createElement("div", {
       role: "list",
       className: listGrid
     }, fields?.map((field) => {
       const hidden = field.visible === false;
-      return /* @__PURE__ */ React14.createElement(List2.Item, {
+      return /* @__PURE__ */ React15.createElement(List2.Item, {
         key: field.id,
         item: field,
         classNames: listItemGrid,
         "aria-expanded": expandedField === field.id
-      }, /* @__PURE__ */ React14.createElement("div", {
+      }, /* @__PURE__ */ React15.createElement("div", {
         role: "none",
         className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
-      }, /* @__PURE__ */ React14.createElement(List2.ItemDragHandle, {
+      }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
         disabled: readonly
-      }), /* @__PURE__ */ React14.createElement(List2.ItemTitle, {
+      }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
         classNames: hidden && "text-subdued",
         onClick: () => handleToggleField(field)
-      }, field.path), /* @__PURE__ */ React14.createElement(List2.ItemButton, {
+      }, 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)
-      }), /* @__PURE__ */ React14.createElement(List2.ItemDeleteButton, {
+      }), 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__ */ React14.createElement(IconButton4, {
+      }), /* @__PURE__ */ React15.createElement(IconButton4, {
         iconOnly: true,
         variant: "ghost",
         label: t("toggle expand label", {
@@ -2407,22 +2571,22 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
         }),
         icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
         onClick: () => handleToggleField(field)
-      })), expandedField === field.id && /* @__PURE__ */ React14.createElement("div", {
+      }))), 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__ */ React14.createElement(FieldEditor, {
+      }, /* @__PURE__ */ React15.createElement(FieldEditor, {
         readonly: readonly || schemaReadonly ? "disabled-input" : false,
         projection: projectionModel,
         field,
         registry,
         onSave: handleClose
       })));
-    }))))), !readonly && !expandedField && /* @__PURE__ */ React14.createElement("div", {
+    }))))), !readonly && !expandedField && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
-    }, /* @__PURE__ */ React14.createElement(IconButton4, {
+    }, /* @__PURE__ */ React15.createElement(IconButton4, {
       icon: "ph--plus--regular",
-      label: t("button add property"),
+      label: t("add property button"),
       onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
       disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
@@ -2431,7 +2595,22 @@ var ViewEditor = ({ classNames, schema, view, kind = "basic", registry, readonly
   } finally {
     _effect.f();
   }
-};
+});
+var customFields = ({ types, tags }) => ({
+  query: (props) => {
+    const handleChange = useCallback13((query) => props.onValueChange("object", query.ast), [
+      props.onValueChange
+    ]);
+    return /* @__PURE__ */ React15.createElement(Input8.Root, null, /* @__PURE__ */ React15.createElement(InputHeader, {
+      label: props.label
+    }), /* @__PURE__ */ React15.createElement(QueryForm, {
+      initialQuery: props.getValue(),
+      types,
+      tags,
+      onChange: handleChange
+    }));
+  }
+});
 export {
   BooleanInput,
   ControlFrame,
@@ -2450,6 +2629,7 @@ export {
   InputHeader,
   MarkdownInput,
   NumberInput,
+  ObjectPicker,
   SelectInput,
   SelectOptionInput,
   TextInput,