@dxos/react-ui-form 0.8.4-main.5ad4a44 → 0.8.4-main.66e292d

package/dist/lib/browser/index.mjs

@@ -8,7 +8,7 @@ var translations = [
         "hidden fields label": "Hidden Fields",
         "empty readonly ref field label": "(none)",
         // TODO(burdon): Standardize field/property.
-        "button add property": "Add property",
+        "add property button label": "Add property",
         "field property label": "Property",
         "field property placeholder": "Property name",
         "field format label": "Type",
@@ -25,8 +25,8 @@ var translations = [
         "ref field placeholder_one": "Select\u2026",
         "ref field placeholder_other": "Select items\u2026",
         // TODO(burdon): Factor out?
-        "button cancel": "Cancel",
-        "button save": "Save",
+        "cancel button label": "Cancel",
+        "save button label": "Save",
         // FormatEnum
         "format boolean": "Boolean",
         "format currency": "Currency",
@@ -66,8 +66,8 @@ var translations = [
         "select option delete": "Delete",
         "select option add": "Add option",
         // System schema message.
-        "system schema title": "System record type",
-        "system schema description": "This is a system record type and cannot be modified, though the view can still be configured."
+        "system schema title": "System type",
+        "system schema description": "This is a system type and cannot be modified, though the view can still be configured."
       }
     }
   }
@@ -215,8 +215,8 @@ var ControlFrameItem = ({ title, description, children }) => {
 
 // src/components/FieldEditor/FieldEditor.tsx
 import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
-import React14, { useCallback as useCallback11, useEffect as useEffect8, useMemo as useMemo7, useState as useState6 } from "react";
-import { FormatEnum as FormatEnum5, FormatEnums, formatToType } from "@dxos/echo/internal";
+import React14, { useCallback as useCallback12, useEffect as useEffect8, useMemo as useMemo7, useState as useState6 } from "react";
+import { Format as Format5, FormatEnums, formatToType } from "@dxos/echo/internal";
 import { log as log3 } from "@dxos/log";
 import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema, getSchemaProperties as getSchemaProperties3, sortProperties } from "@dxos/schema";
@@ -472,7 +472,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, {
@@ -708,7 +708,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: {
@@ -724,7 +724,7 @@ var MarkdownInput = ({ type, label, inputOnly, readonly, placeholder, getStatus,
 // src/components/Form/Form.tsx
 import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
 import { useFocusFinders } from "@fluentui/react-tabster";
-import React13, { useCallback as useCallback10, useEffect as useEffect7, 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
@@ -736,7 +736,7 @@ 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/internal";
 import { createJsonPath as createJsonPath2 } from "@dxos/effect";
@@ -867,15 +867,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
       });
     }
   }, [
@@ -928,7 +929,7 @@ var useForm = ({ schema, initialValues, onValuesChanged, onValidate, onValid, on
 var createKeySet = (obj, value2) => {
   invariant(obj, void 0, {
     F: __dxlog_file,
-    L: 279,
+    L: 280,
     S: void 0,
     A: [
       "obj",
@@ -952,7 +953,7 @@ var flatMap = (errors) => {
 
 // src/hooks/useRefQueryLookupHandler.ts
 import { useCallback as useCallback5 } from "react";
-import { getObjectDXN } from "@dxos/echo/internal";
+import { Obj } from "@dxos/echo";
 import { Filter } from "@dxos/react-client/echo";
 import { isNonNullable } from "@dxos/util";
 var useRefQueryLookupHandler = ({ space }) => {
@@ -963,13 +964,13 @@ var useRefQueryLookupHandler = ({ space }) => {
     const query = space.db.query(Filter.typename(typeInfo.typename));
     const { objects } = await query.run();
     return objects.map((object) => {
-      const dxn = getObjectDXN(object);
+      const dxn = Obj.getDXN(object);
       if (!dxn) {
         return void 0;
       }
       const item = {
         dxn,
-        label: object?.name ?? object?.id ?? ""
+        label: Obj.getLabel(object) ?? object?.id ?? ""
       };
       return item;
     }).filter(isNonNullable);
@@ -979,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;
@@ -1004,7 +1007,7 @@ var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
       } catch (error) {
         log2.error("Failed to fetch ref options:", error, {
           F: __dxlog_file2,
-          L: 48,
+          L: 51,
           S: void 0,
           C: (f, a) => f(...a)
         });
@@ -1016,10 +1019,12 @@ var useQueryRefOptions = ({ refTypeInfo, onQueryRefOptions }) => {
     void fetchOptions();
   }, [
     refTypeInfo,
-    onQueryRefOptions
+    onQueryRefOptions,
+    state
   ]);
   return {
     options,
+    update,
     loading
   };
 };
@@ -1056,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";
@@ -1111,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 label"),
       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 label"),
       onClick: handleSave
     }));
   } finally {
@@ -1132,14 +1137,14 @@ import * as Function2 from "effect/Function";
 import * as Schema from "effect/Schema";
 import * as SchemaAST4 from "effect/SchemaAST";
 import * as StringEffect from "effect/String";
-import React12, { forwardRef as forwardRef2, useMemo as useMemo6 } from "react";
+import 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 { isTruthy } from "@dxos/util";
 
 // src/util/field.ts
-import { FormatEnum, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo/internal";
+import { Format, GeoLocation as GeoLocation2, TypeEnum } from "@dxos/echo/internal";
 var parseValue = ({ type, format, value: value2 }) => {
   if (value2 === void 0 || value2 === null || value2 === "") {
     return void 0;
@@ -1174,26 +1179,26 @@ var parseValue = ({ type, format, value: value2 }) => {
     return parseScalar(type);
   }
   switch (format) {
-    case FormatEnum.Boolean:
+    case Format.TypeFormat.Boolean:
       return parseScalar(TypeEnum.Boolean);
-    case FormatEnum.Number:
-    case FormatEnum.Percent:
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Number:
+    case Format.TypeFormat.Percent:
+    case Format.TypeFormat.Currency:
       return parseScalar(TypeEnum.Number);
-    case FormatEnum.String:
-    case FormatEnum.Markdown: {
+    case Format.TypeFormat.String:
+    case Format.TypeFormat.Markdown: {
       return parseScalar(TypeEnum.String);
     }
-    case FormatEnum.Ref:
-      throw new Error(`unexpected format: ${FormatEnum.Ref}`);
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp: {
+    case Format.TypeFormat.Ref:
+      throw new Error(`unexpected format: ${Format.TypeFormat.Ref}`);
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp: {
       const date = new Date(value2);
       return isNaN(date.getTime()) ? null : date;
     }
-    case FormatEnum.GeoPoint: {
+    case Format.TypeFormat.GeoPoint: {
       if (typeof value2 === "string") {
         const cleaned = value2.replace(/[^0-9.,-]+/g, "");
         const parts = cleaned.split(",");
@@ -1220,23 +1225,23 @@ var parseValue = ({ type, format, value: value2 }) => {
 };
 var cellClassesForFieldType = ({ type, format }) => {
   switch (format || type) {
-    case FormatEnum.Markdown:
+    case Format.TypeFormat.Markdown:
       return void 0;
-    case FormatEnum.Time:
-    case FormatEnum.Timestamp:
-    case FormatEnum.DateTime:
-    case FormatEnum.Date:
-    case FormatEnum.Duration:
+    case Format.TypeFormat.Time:
+    case Format.TypeFormat.Timestamp:
+    case Format.TypeFormat.DateTime:
+    case Format.TypeFormat.Date:
+    case Format.TypeFormat.Duration:
       return [
         "font-mono",
         "text-right"
       ];
-    case FormatEnum.Currency:
+    case Format.TypeFormat.Currency:
       return [
         "text-right"
       ];
-    case FormatEnum.JSON:
-    case FormatEnum.DID:
+    case Format.TypeFormat.JSON:
+    case Format.TypeFormat.DID:
       return [
         "font-mono"
       ];
@@ -1261,7 +1266,7 @@ 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/internal";
+import { Format as Format2, GeoLocation as GeoLocation3, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
 var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
   const formatScalar = (type2) => {
     switch (type2) {
@@ -1281,20 +1286,20 @@ var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
     return formatScalar(type);
   }
   switch (format) {
-    case FormatEnum2.Boolean: {
+    case Format2.TypeFormat.Boolean: {
       return formatScalar(TypeEnum2.Boolean);
     }
-    case FormatEnum2.Number: {
+    case Format2.TypeFormat.Number: {
       return formatScalar(TypeEnum2.Number);
     }
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
       return formatScalar(TypeEnum2.String);
     }
-    case FormatEnum2.Percent: {
+    case Format2.TypeFormat.Percent: {
       return `${value2 * 100}%`;
     }
-    case FormatEnum2.Currency: {
+    case Format2.TypeFormat.Currency: {
       return value2.toLocaleString(locale, {
         style: "currency",
         currency: "USD",
@@ -1302,28 +1307,28 @@ var formatForDisplay = ({ type, format, value: value2, locale = void 0 }) => {
         maximumFractionDigits: 2
       });
     }
-    case FormatEnum2.Date: {
+    case Format2.TypeFormat.Date: {
       try {
         return formatDate(new Date(value2), "yyyy-MM-dd");
       } catch (error) {
         return "Invalid Date";
       }
     }
-    case FormatEnum2.Time: {
+    case Format2.TypeFormat.Time: {
       try {
         return formatDate(new Date(value2), "HH:mm:ss");
       } catch (error) {
         return "Invalid Time";
       }
     }
-    case FormatEnum2.DateTime: {
+    case Format2.TypeFormat.DateTime: {
       try {
         return formatDate(new Date(value2), "yyyy-MM-dd HH:mm:ss");
       } catch (error) {
         return "Invalid DateTime";
       }
     }
-    case FormatEnum2.GeoPoint: {
+    case Format2.TypeFormat.GeoPoint: {
       if (value2 === null || value2 === void 0) {
         return "";
       }
@@ -1357,31 +1362,31 @@ var formatForEditing = ({ type, format, value: value2, locale = void 0 }) => {
     return formatScalar(type);
   }
   switch (format) {
-    case FormatEnum2.Boolean:
-    case FormatEnum2.Number:
-    case FormatEnum2.String:
-    case FormatEnum2.Ref: {
+    case Format2.TypeFormat.Boolean:
+    case Format2.TypeFormat.Number:
+    case Format2.TypeFormat.String:
+    case Format2.TypeFormat.Ref: {
       return formatScalar(type);
     }
-    case FormatEnum2.Percent: {
+    case Format2.TypeFormat.Percent: {
       return String(value2 * 100);
     }
-    case FormatEnum2.Currency: {
+    case Format2.TypeFormat.Currency: {
       return String(value2);
     }
-    case FormatEnum2.DateTime: {
+    case Format2.TypeFormat.DateTime: {
       const date = new Date(value2);
       return date.toISOString();
     }
-    case FormatEnum2.Date: {
+    case Format2.TypeFormat.Date: {
       const date = new Date(value2);
       return date.toISOString().split("T")[0];
     }
-    case FormatEnum2.Time: {
+    case Format2.TypeFormat.Time: {
       const date = new Date(value2);
       return date.toISOString().split("T")[1].split(".")[0];
     }
-    case FormatEnum2.GeoPoint: {
+    case Format2.TypeFormat.GeoPoint: {
       if (value2 === null || value2 === void 0) {
         return "";
       }
@@ -1398,7 +1403,7 @@ var formatForEditing = ({ type, format, value: value2, locale = void 0 }) => {
 };
 
 // src/util/refs.ts
-import { FormatEnum as FormatEnum3, ReferenceAnnotationId } from "@dxos/echo/internal";
+import { Format as Format3, ReferenceAnnotationId } from "@dxos/echo/internal";
 import { findAnnotation } from "@dxos/effect";
 
 // src/util/schema.ts
@@ -1412,12 +1417,6 @@ var findArrayElementType = (ast) => {
 // 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) {
@@ -1430,6 +1429,12 @@ var getRefProps = (property) => {
       }
     }
   }
+  if (format === Format3.TypeFormat.Ref) {
+    return {
+      ast,
+      isArray: false
+    };
+  }
   return void 0;
 };
 
@@ -1438,7 +1443,7 @@ import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking"
 import * as Function from "effect/Function";
 import * as SchemaAST3 from "effect/SchemaAST";
 import * as String2 from "effect/String";
-import React9, { Fragment, useCallback as useCallback7 } from "react";
+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";
@@ -1467,13 +1472,15 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
       if (!typeLiteral) {
         return {};
       }
-      return Object.fromEntries(getSchemaProperties(typeLiteral, {}).map((prop) => [
+      return Object.fromEntries(getSchemaProperties(typeLiteral, {}, {
+        form: true
+      }).map((prop) => [
         prop.name,
         prop.defaultValue
       ]));
     };
     const getDefaultValue = () => type === "object" && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
-    const handleAdd = useCallback7(() => {
+    const handleAdd = useCallback8(() => {
       inputProps.onValueChange(type, [
         ...values,
         getDefaultValue()
@@ -1484,7 +1491,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);
     }, [
@@ -1540,12 +1547,12 @@ var ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponen
 };
 
 // src/components/Form/factory.tsx
-import { FormatEnum as FormatEnum4 } from "@dxos/echo/internal";
+import { Format as Format4 } from "@dxos/echo/internal";
 var getInputComponent = (type, format) => {
   switch (format) {
-    case FormatEnum4.GeoPoint:
+    case Format4.TypeFormat.GeoPoint:
       return GeoPointInput;
-    case FormatEnum4.Markdown:
+    case Format4.TypeFormat.Markdown:
       return MarkdownInput;
   }
   switch (type) {
@@ -1560,7 +1567,8 @@ var getInputComponent = (type, format) => {
 
 // src/components/Form/RefField.tsx
 import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import React11, { useCallback as useCallback9, useMemo as useMemo5 } from "react";
+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";
@@ -1571,27 +1579,27 @@ 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 useCallback8, useMemo as useMemo4, useState as useState5 } from "react";
+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 { PopoverCombobox } from "@dxos/react-ui-searchlist";
+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 = useCallback8((values) => {
+    const handleFormSave = useCallback9((values) => {
       onCreate?.(values);
       setShowForm(false);
       setSearchString("");
     }, [
       onCreate
     ]);
-    const handleFormCancel = useCallback8(() => {
+    const handleFormCancel = useCallback9(() => {
       setShowForm(false);
       setSearchString("");
     }, []);
-    const handleClick = useCallback8((event) => {
+    const handleClick = useCallback9((event) => {
       if (createSchema && event.target.closest('[data-value="__create__"]')) {
         event.stopPropagation();
         event.preventDefault();
@@ -1600,7 +1608,7 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
     }, [
       createSchema
     ]);
-    const handleKeyDown = useCallback8((event) => {
+    const handleKeyDown = useCallback9((event) => {
       if (event.key === "Enter" && createSchema && event.currentTarget.querySelector('[role="option"][aria-selected="true"][data-value="__create__"]')) {
         event.stopPropagation();
         event.preventDefault();
@@ -1615,7 +1623,7 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
     }, {}), [
       options
     ]);
-    return /* @__PURE__ */ React10.createElement(PopoverCombobox.Content, {
+    return /* @__PURE__ */ React10.createElement(Combobox.Content, {
       ...props,
       ref,
       filter: (value2, search) => value2 === "__create__" || labelById[value2]?.includes(search.toLowerCase()) ? 1 : 0,
@@ -1629,12 +1637,12 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
       onSave: handleFormSave,
       onCancel: handleFormCancel,
       testId: "create-referenced-object-form"
-    })) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(PopoverCombobox.Input, {
+    })) : /* @__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(PopoverCombobox.List, null, options.map((option) => /* @__PURE__ */ React10.createElement(PopoverCombobox.Item, {
+    }), /* @__PURE__ */ React10.createElement(Combobox.List, null, options.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
       key: option.id,
       value: option.id,
       onSelect: () => onSelect(option.id),
@@ -1643,7 +1651,7 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
       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(PopoverCombobox.Item, {
+    }))), searchString.length > 0 && createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React10.createElement(Combobox.Item, {
       value: "__create__",
       classNames: "flex items-center gap-2"
     }, /* @__PURE__ */ React10.createElement(Icon2, {
@@ -1651,16 +1659,16 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
     }), t(createOptionLabel[0], {
       ns: createOptionLabel[1].ns,
       text: searchString
-    })))), /* @__PURE__ */ React10.createElement(PopoverCombobox.Arrow, null));
+    })))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
   } finally {
     _effect.f();
   }
 });
 ObjectPickerContent.displayName = "ObjectPickerContent";
 var ObjectPicker = {
-  Root: PopoverCombobox.Root,
-  Trigger: PopoverCombobox.Trigger,
-  VirtualTrigger: PopoverCombobox.VirtualTrigger,
+  Root: Combobox.Root,
+  Trigger: Combobox.Trigger,
+  VirtualTrigger: Combobox.VirtualTrigger,
   Content: ObjectPickerContent
 };
 
@@ -1675,7 +1683,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
     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
     });
@@ -1692,7 +1700,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
         ...restInputProps
       });
     }
-    const handleGetValue = useCallback9(() => {
+    const handleGetValue = useCallback10(() => {
       const formValue = getValue3();
       const unknownToRefOption = (val) => {
         const isRef = Ref.isRef(val);
@@ -1720,7 +1728,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
       availableOptions,
       array
     ]);
-    const handleUpdate = useCallback9((ids) => {
+    const handleUpdate = useCallback10((ids) => {
       if (ids.length === 0) {
         onValueChange("object", void 0);
         return;
@@ -1743,6 +1751,13 @@ 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;
     }
@@ -1751,7 +1766,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
     const selectedIds = useMemo5(() => items.map((i) => i.id), [
       items
     ]);
-    const toggleSelect = useCallback9((id) => {
+    const toggleSelect = useCallback10((id) => {
       if (array) {
         const nextIds = selectedIds.includes(id) ? selectedIds.filter((x) => x !== id) : [
           ...selectedIds,
@@ -1821,7 +1836,7 @@ var RefField = ({ type, label, readonly, placeholder, inputOnly, array, ast, get
       createOptionLabel,
       createOptionIcon,
       createInitialValuePath,
-      onCreate
+      onCreate: handleCreate
     }))), inputOnly && /* @__PURE__ */ React11.createElement(Input7.DescriptionAndValidation, null, error));
   } finally {
     _effect.f();
@@ -1993,7 +2008,9 @@ var FormFields = /* @__PURE__ */ forwardRef2(({ classNames, schema, path, filter
   try {
     const values = useFormValues(path);
     const properties = useMemo6(() => {
-      const props2 = getSchemaProperties2(schema.ast, values);
+      const props2 = getSchemaProperties2(schema.ast, values, {
+        form: true
+      });
       if (projection) {
         const fieldProjections = projection.getFieldProjections();
         const hiddenProperties = new Set(projection.getHiddenProperties());
@@ -2025,8 +2042,13 @@ var FormFields = /* @__PURE__ */ forwardRef2(({ classNames, schema, path, filter
       className: mx6("is-full", classNames),
       ref: forwardRef4
     }, properties.map((property) => {
-      return /* @__PURE__ */ React12.createElement(FormField, {
+      return /* @__PURE__ */ React12.createElement(ErrorBoundary, {
         key: property.name,
+        path: [
+          ...path ?? [],
+          property.name
+        ]
+      }, /* @__PURE__ */ React12.createElement(FormField, {
         property,
         path: [
           ...path ?? [],
@@ -2038,15 +2060,45 @@ var FormFields = /* @__PURE__ */ forwardRef2(({ classNames, schema, path, filter
         lookupComponent,
         Custom,
         ...props
-      });
+      }));
     }).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 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);
@@ -2061,7 +2113,7 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
     }, [
       autoFocus
     ]);
-    const handleValid = useCallback10(async (values, meta) => {
+    const handleValid = useCallback11(async (values, meta) => {
       if (autoSave) {
         await onSave?.(values, meta);
       }
@@ -2081,6 +2133,9 @@ var Form = ({ classNames, testId, values: initialValues, autoFocus, readonly, au
     }, /* @__PURE__ */ React13.createElement("div", {
       role: "none",
       className: "contents",
+      ...id && {
+        "data-object-id": id
+      },
       "data-testid": testId
     }, /* @__PURE__ */ React13.createElement(FormFields, {
       ...props,
@@ -2137,7 +2192,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
     const [{ fieldSchema }, setFieldSchema] = useState6({
       fieldSchema: getFormatSchema(props?.format)
     });
-    const handleValuesChanged = useCallback11((_props) => {
+    const handleValuesChanged = useCallback12((_props) => {
       setFieldSchema((prev) => {
         const fieldSchema2 = getFormatSchema(_props.format);
         if (prev.fieldSchema === fieldSchema2) {
@@ -2174,7 +2229,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       props.format,
       props.referenceSchema
     ]);
-    const handleValidate = useCallback11(({ property }) => {
+    const handleValidate = useCallback12(({ property }) => {
       if (property && projection.fields.find((f) => f.path === property && f.path !== field.path)) {
         return [
           {
@@ -2187,7 +2242,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       projection.fields,
       field
     ]);
-    const handleSave = useCallback11((props2) => {
+    const handleSave = useCallback12((props2) => {
       projection.setFieldProjection({
         field,
         props: props2
@@ -2198,7 +2253,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       field,
       onSave
     ]);
-    const handleCancel = useCallback11(() => {
+    const handleCancel = useCallback12(() => {
       requestAnimationFrame(() => onCancel?.());
       onSave();
     }, [
@@ -2207,7 +2262,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
     const custom = useMemo7(() => ({
       ["format"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
-        options: FormatEnums.filter((value2) => value2 !== FormatEnum5.None).map((value2) => ({
+        options: FormatEnums.filter((value2) => value2 !== Format5.TypeFormat.None).map((value2) => ({
           value: value2,
           label: t(`format ${value2}`)
         }))
@@ -2220,7 +2275,9 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       }),
       ["referencePath"]: (props2) => /* @__PURE__ */ React14.createElement(SelectInput, {
         ...props2,
-        options: referenceSchema ? getSchemaProperties3(referenceSchema.ast).sort(sortProperties).map((p) => ({
+        options: referenceSchema ? getSchemaProperties3(referenceSchema.ast, {}, {
+          form: true
+        }).sort(sortProperties).map((p) => ({
           value: p.name
         })) : []
       }),
@@ -2230,7 +2287,7 @@ var FieldEditor = ({ readonly, projection, field, registry, onSave, onCancel, ou
       schemas,
       referenceSchema
     ]);
-    const propIsNotType = useCallback11((props2) => props2.filter((p) => p.name !== "type"), []);
+    const propIsNotType = useCallback12((props2) => props2.filter((p) => p.name !== "type"), []);
     if (!fieldSchema) {
       log3.warn("invalid format", {
         props
@@ -2271,20 +2328,21 @@ 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 useCallback12, useEffect as useEffect9, useImperativeHandle, useMemo as useMemo8, useRef as useRef4, useState as useState7 } from "react";
-import { EchoSchema, Format, isMutable, toJsonSchema } from "@dxos/echo/internal";
+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 as Format6, isMutable, toJsonSchema } from "@dxos/echo/internal";
+import { Filter as Filter2, Query } from "@dxos/echo-db";
 import { invariant as invariant3 } from "@dxos/invariant";
-import { Callout, IconButton as IconButton4, Input as Input8, useDensityContext, useElevationContext, useThemeContext, useTranslation as useTranslation10 } from "@dxos/react-ui";
-import { Editor, createBasicExtensions, createThemeExtensions } from "@dxos/react-ui-editor";
+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 { inputTheme } from "@dxos/react-ui-theme";
 import { inputTextLabel, mx as mx7, subtleHover as subtleHover2 } from "@dxos/react-ui-theme";
 import { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, getTypenameFromQuery } from "@dxos/schema";
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
 var listItemGrid = "grid grid-cols-subgrid col-span-5";
-var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, readonly, showHeading = false, onQueryChanged, onDelete, outerSpacing = true }, forwardedRef) => {
+var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, readonly, showHeading = false, types, tags, onQueryChanged, onDelete, outerSpacing = true }, forwardedRef) => {
   var _effect = _useSignals15();
   try {
     const schemaReadonly = !isMutable(schema);
@@ -2300,13 +2358,6 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       projectionModel
     ]);
     const [expandedField, setExpandedField] = useState7();
-    const serializedQuery = Match.value(mode).pipe(Match.when("schema", () => getTypenameFromQuery(view.query.ast)), Match.when("query", () => {
-      if (view.query.string) {
-        return view.query.string;
-      } else {
-        return "Serializing query AST is not currently supported.";
-      }
-    }), Match.exhaustive);
     const queueTarget = Match.value(view.query.ast).pipe(Match.when({
       type: "options"
     }, ({ options }) => {
@@ -2314,17 +2365,14 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     }), Match.orElse(() => void 0));
     const viewSchema = useMemo8(() => {
       const base = Schema2.Struct({
-        query: mode === "schema" ? Format.URL.annotations({
+        query: mode === "schema" ? Format6.URL.annotations({
           title: "Record type"
-        }) : Schema2.String.annotations({
+        }) : QueryAST.Query.annotations({
           title: "Query"
         })
       });
-      if (mode === "query") {
+      if (mode === "tag") {
         return Schema2.Struct({
-          name: Schema2.optional(Schema2.String.annotations({
-            title: "Name"
-          })),
           ...base.fields,
           target: Schema2.optional(Schema2.String.annotations({
             title: "Target Queue"
@@ -2336,23 +2384,22 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       mode
     ]);
     const viewValues = useMemo8(() => ({
-      name: view.name,
-      query: serializedQuery,
+      query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
       target: queueTarget
     }), [
-      view.name,
-      serializedQuery,
+      mode,
+      view.query.ast,
       queueTarget
     ]);
-    const handleToggleField = useCallback12((field) => {
+    const handleToggleField = useCallback13((field) => {
       setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
     }, [
       readonly
     ]);
-    const handleAdd = useCallback12(() => {
+    const handleAdd = useCallback13(() => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 144,
+        L: 129,
         S: void 0,
         A: [
           "!readonly",
@@ -2366,38 +2413,21 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       projectionModel,
       readonly
     ]);
-    const handleUpdate = useCallback12((values) => {
-      invariant3(!readonly, void 0, {
-        F: __dxlog_file5,
-        L: 151,
-        S: void 0,
-        A: [
-          "!readonly",
-          ""
-        ]
-      });
+    const handleUpdate = useCallback13((values) => {
       requestAnimationFrame(() => {
-        if ("name" in values && view.name !== values.name) {
-          view.name = values.name;
-        }
-        const queryChanged = serializedQuery !== values.query;
-        const targetValue = "target" in values ? values.target : void 0;
-        const targetChanged = "target" in values && values.target && queueTarget !== targetValue;
-        if ((queryChanged || targetChanged) && !readonly) {
-          onQueryChanged?.(values.query, targetValue);
-        }
+        const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
+        onQueryChanged?.(query, values.target);
       });
     }, [
-      serializedQuery,
       onQueryChanged,
-      readonly,
       view,
-      queueTarget
+      queueTarget,
+      mode
     ]);
-    const handleDelete = useCallback12((fieldId) => {
+    const handleDelete = useCallback13((fieldId) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 171,
+        L: 146,
         S: void 0,
         A: [
           "!readonly",
@@ -2413,10 +2443,10 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       onDelete,
       readonly
     ]);
-    const handleMove = useCallback12((fromIndex, toIndex) => {
+    const handleMove = useCallback13((fromIndex, toIndex) => {
       invariant3(!readonly, void 0, {
         F: __dxlog_file5,
-        L: 183,
+        L: 158,
         S: void 0,
         A: [
           "!readonly",
@@ -2433,23 +2463,31 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       view.projection.fields,
       readonly
     ]);
-    const handleClose = useCallback12(() => setExpandedField(void 0), []);
-    const handleHide = useCallback12((fieldId) => {
+    const handleClose = useCallback13(() => setExpandedField(void 0), []);
+    const handleHide = useCallback13((fieldId) => {
       setExpandedField(void 0);
       projectionModel.hideFieldProjection(fieldId);
     }, [
       projectionModel
     ]);
-    const handleShow = useCallback12((property) => {
+    const handleShow = useCallback13((property) => {
       setExpandedField(void 0);
       projectionModel.showFieldProjection(property);
     }, [
       projectionModel
     ]);
+    const custom = useMemo8(() => mode === "tag" ? customFields({
+      types,
+      tags
+    }) : void 0, [
+      types,
+      tags,
+      mode
+    ]);
     return /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: mx7(classNames)
-    }, schemaReadonly && mode === "schema" && /* @__PURE__ */ React15.createElement(Callout.Root, {
+    }, schemaReadonly && !readonly && /* @__PURE__ */ React15.createElement(Callout.Root, {
       valence: "info",
       classNames: [
         "mlb-cardSpacingBlock",
@@ -2459,10 +2497,9 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       autoSave: true,
       schema: viewSchema,
       values: viewValues,
-      readonly: readonly ? "disabled-input" : false,
       onSave: handleUpdate,
       outerSpacing,
-      Custom: mode === "query" ? customFields : void 0
+      Custom: custom
     }), /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
@@ -2490,7 +2527,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         role: "none",
         className: mx7(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
       }, /* @__PURE__ */ React15.createElement(List2.ItemDragHandle, {
-        disabled: readonly
+        disabled: readonly || schemaReadonly
       }), /* @__PURE__ */ React15.createElement(List2.ItemTitle, {
         classNames: hidden && "text-subdued",
         onClick: () => handleToggleField(field)
@@ -2501,7 +2538,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         autoHide: false,
         disabled: readonly || !hidden && projectionModel.fields.length <= 1,
         onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-      }), mode === "schema" && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(List2.ItemDeleteButton, {
+      }), !readonly && /* @__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,
@@ -2515,7 +2552,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         }),
         icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
         onClick: () => handleToggleField(field)
-      }))), expandedField === field.id && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
+      }))), expandedField === field.id && !readonly && /* @__PURE__ */ React15.createElement("div", {
         role: "none",
         className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
       }, /* @__PURE__ */ React15.createElement(FieldEditor, {
@@ -2525,12 +2562,12 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
         registry,
         onSave: handleClose
       })));
-    }))))), !readonly && !expandedField && mode === "schema" && /* @__PURE__ */ React15.createElement("div", {
+    }))))), !readonly && !expandedField && /* @__PURE__ */ React15.createElement("div", {
       role: "none",
       className: outerSpacing ? cardSpacing3 : "mlb-cardSpacingBlock"
     }, /* @__PURE__ */ React15.createElement(IconButton4, {
       icon: "ph--plus--regular",
-      label: t("button add property"),
+      label: t("add property button label"),
       onClick: readonly ? void 0 : handleAdd,
       // TODO(burdon): Show field limit in ux (not tooltip).
       disabled: view.projection.fields.length >= VIEW_FIELD_LIMIT,
@@ -2540,40 +2577,21 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     _effect.f();
   }
 });
-var customFields = {
+var customFields = ({ types, tags }) => ({
   query: (props) => {
-    const { themeMode } = useThemeContext();
-    const { t } = useTranslation10(translationKey);
-    const density = useDensityContext();
-    const elevation = useElevationContext();
-    const onValueChange = useRef4(props.onValueChange);
-    useEffect9(() => {
-      onValueChange.current = props.onValueChange;
-    }, [
+    const handleChange = useCallback13((query) => props.onValueChange("object", query.ast), [
       props.onValueChange
     ]);
-    const handleChange = useCallback12((text) => onValueChange.current("string", text), []);
-    const extensions = useMemo8(() => [
-      createBasicExtensions({
-        placeholder: t("query placeholder")
-      }),
-      createThemeExtensions({
-        themeMode
-      })
-    ], []);
     return /* @__PURE__ */ React15.createElement(Input8.Root, null, /* @__PURE__ */ React15.createElement(InputHeader, {
       label: props.label
-    }), /* @__PURE__ */ React15.createElement(Editor, {
-      classNames: mx7(inputTheme.input({
-        density,
-        elevation
-      }), "flex items-center", "focus-within:bg-focusSurface focus-within:border-separator focus-within:hover:bg-focusSurface"),
-      extensions,
-      value: props.getValue(),
+    }), /* @__PURE__ */ React15.createElement(QueryForm, {
+      initialQuery: props.getValue(),
+      types,
+      tags,
       onChange: handleChange
     }));
   }
-};
+});
 export {
   BooleanInput,
   ControlFrame,