@dxos/react-ui-form 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

package/dist/lib/browser/index.mjs

@@ -1,86 +1,11 @@
-// src/translations.ts
-var translationKey = "@dxos/react-ui-form";
-var translations = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "fields.label": "Fields",
-        "hidden-fields.label": "Hidden Fields",
-        "empty-readonly-ref-field.label": "(none)",
-        "add-property-button.label": "Add property",
-        "field-property.label": "Property",
-        "field-property.placeholder": "Property name",
-        "field-format.label": "Type",
-        "field-path.label": "Field path",
-        "add-field.button": "Add field",
-        "boolean-input-true.value": "Yes",
-        "boolean-input-false.value": "No",
-        "show-field.label": "Show field",
-        "hide-field.label": "Hide field",
-        "delete-field.label": "Delete field",
-        "ref-field-combobox-input.placeholder": "Search\u2026",
-        "ref-field.placeholder": "Select\u2026",
-        "ref-field.placeholder_one": "Select\u2026",
-        "ref-field.placeholder_other": "Select items\u2026",
-        "create-option.label": "Create",
-        "example.placeholder": "Example",
-        "latitude.placeholder": "Latitude (e.g., 40.7128)",
-        "longitude.placeholder": "Longitude (e.g., -74.0060)",
-        "cancel-button.label": "Cancel",
-        "save-button.label": "Save",
-        // TypeFormat
-        "format.boolean.label": "Boolean",
-        "format.currency.label": "Currency",
-        "format.date.label": "Date",
-        "format.date-time.label": "DateTime",
-        "format.did.label": "DID",
-        "format.duration.label": "Duration",
-        "format.dxn.label": "DXN",
-        "format.email.label": "Email",
-        "format.formula.label": "Formula",
-        "format.hostname.label": "Hostname",
-        "format.integer.label": "Integer",
-        "format.json.label": "JSON",
-        "format.lnglat.label": "Geopoint",
-        "format.markdown.label": "Markdown",
-        "format.percent.label": "Percent",
-        "format.ref.label": "Reference",
-        "format.regex.label": "RegExp",
-        "format.string.label": "String",
-        "format.single-select.label": "Select",
-        "format.multi-select.label": "Multi-select",
-        "format.text.label": "Long text",
-        "format.time.label": "Time",
-        "format.timestamp.label": "Timestamp",
-        "format.user.label": "User",
-        "format.number.label": "Number",
-        "format.uri.label": "URI",
-        "format.url.label": "URL",
-        "format.uuid.label": "UUID",
-        // GeoPointField.
-        "latitude.label": "Latitude",
-        "longitude.label": "Longitude",
-        // SelectOptionsField.
-        "select-option.label": "Label",
-        "select-option-label.placeholder": "Option label",
-        "select-option-delete.button": "Delete",
-        "select-option-add.button": "Add option",
-        // System schema message.
-        "system-schema.title": "System type",
-        "system-schema.description": "System type: cannot add or remove fields.",
-        "remove.button": "Remove"
-      }
-    }
-  }
-];
-
 // src/components/FieldEditor/FieldEditor.tsx
-import React17, { useCallback as useCallback14, useEffect as useEffect6, useMemo as useMemo7, useState as useState5 } from "react";
-import { Obj as Obj2 } from "@dxos/echo";
+import React17, { useCallback as useCallback14, useEffect as useEffect5, useMemo as useMemo8, useState as useState6 } from "react";
+import { Obj as Obj3 } from "@dxos/echo";
 import { Format as Format4, FormatEnums, formatToType } from "@dxos/echo/internal";
 import { log as log2 } from "@dxos/log";
-import { useAsyncEffect, useTranslation as useTranslation8 } from "@dxos/react-ui";
+import { useAsyncEffect, useTranslation as useTranslation9 } from "@dxos/react-ui";
 import { formatToAdditionalPropertyAttributes, getFormatSchema } from "@dxos/schema";
+import { translationKey as translationKey9 } from "#translations";
 
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
@@ -203,6 +128,46 @@ var pathNotUniqueError = (path) => ({
   message: `'${path}' is already present`
 });
 
+// src/util/field-type.ts
+import * as SchemaAST from "effect/SchemaAST";
+import { getAnnotation, isLiteralUnion } from "@dxos/effect";
+var detectFieldType = (ast) => {
+  if (isLiteralUnion(ast)) {
+    return "select";
+  }
+  if (SchemaAST.isTypeLiteral(ast)) {
+    return "struct";
+  }
+  switch (ast._tag) {
+    case "BooleanKeyword":
+      return "boolean";
+    case "StringKeyword":
+      return "string";
+    case "NumberKeyword":
+      return "number";
+  }
+  return void 0;
+};
+var getSelectOptionsFromAst = (ast) => {
+  if (!isLiteralUnion(ast)) {
+    return void 0;
+  }
+  return ast.types.flatMap((literalNode) => {
+    const value3 = literalNode.literal;
+    if (typeof value3 !== "string" && typeof value3 !== "number") {
+      return [];
+    }
+    const title = getAnnotation(SchemaAST.TitleAnnotationId, false)(literalNode);
+    const label = title ?? (typeof value3 === "string" ? value3.charAt(0).toUpperCase() + value3.slice(1) : String(value3));
+    return [
+      {
+        value: value3,
+        label
+      }
+    ];
+  });
+};
+
 // src/util/formatting.ts
 import { format as formatDate } from "date-fns/format";
 import { Format as Format2, GeoLocation as GeoLocation2, TypeEnum as TypeEnum2 } from "@dxos/echo/internal";
@@ -379,20 +344,24 @@ var getRefProps = (ast) => {
 };
 
 // src/components/Form/fields/ArrayField.tsx
-import * as Option3 from "effect/Option";
-import * as SchemaAST3 from "effect/SchemaAST";
+import * as Option4 from "effect/Option";
+import * as SchemaAST4 from "effect/SchemaAST";
 import React5, { useCallback as useCallback3 } from "react";
 import { findNode as findNode2, getArrayElementType as getArrayElementType2, getDiscriminatedType as getDiscriminatedType2, isDiscriminatedUnion as isDiscriminatedUnion2, isNestedType as isNestedType2 } from "@dxos/effect";
 import { IconButton as IconButton2, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { translationKey as translationKey3 } from "#translations";
 
 // src/components/Form/Form.tsx
 import { createContext } from "@radix-ui/react-context";
+import * as Option3 from "effect/Option";
 import * as Schema2 from "effect/Schema";
-import * as SchemaAST2 from "effect/SchemaAST";
+import * as SchemaAST3 from "effect/SchemaAST";
 import React4, { useEffect as useEffect2, useMemo as useMemo4, useRef } from "react";
+import { Annotation as EchoAnnotation } from "@dxos/echo";
 import { createJsonPath as createJsonPath3, getValue as getValue$2 } from "@dxos/effect";
 import { IconButton, ScrollArea, useMergeRefs, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { composable, composableProps, mx } from "@dxos/ui-theme";
+import { composable, composableProps, mx, withColumn } from "@dxos/ui-theme";
+import { translationKey as translationKey2 } from "#translations";
 
 // src/hooks/useFormHandler.ts
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -430,12 +399,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("validate", {
       values: values2,
       errors: errors2
-    }, {
-      F: __dxlog_file,
-      L: 155,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 42, S: void 0 });
     if (errors2.length === 0 && onValidate) {
       const validatedValues = values2;
       errors2 = onValidate(validatedValues) ?? [];
@@ -523,12 +487,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("onValueChange", {
       path,
       value: value3
-    }, {
-      F: __dxlog_file,
-      L: 254,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 138, S: void 0 });
     const jsonPath = createJsonPath(path);
     const pathArray = path;
     let parsedValue = value3;
@@ -537,12 +496,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
         parsedValue = parseFloat(value3) || 0;
       }
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 264,
-        S: void 0,
-        C: (f, a) => f(...a)
-      });
+      log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 150, S: void 0 });
       parsedValue = void 0;
     }
     const newValues = mergeAtPath(values, pathArray, parsedValue);
@@ -688,7 +642,6 @@ import { inputTextLabel } from "@dxos/ui-theme";
 var FormFieldLabel = ({ label, error, readonly, asChild }) => {
   const Label = readonly || asChild ? "span" : Input.Label;
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
     className: "flex items-center justify-between"
   }, /* @__PURE__ */ React.createElement(Label, {
     className: inputTextLabel
@@ -712,7 +665,6 @@ var FormFieldWrapper = (props) => {
   }
   const str = String(value3 ?? "");
   return /* @__PURE__ */ React.createElement("div", {
-    role: "none",
     className: "contents"
   }, /* @__PURE__ */ React.createElement(Input.Root, {
     validationValence: status
@@ -743,7 +695,7 @@ var FormFieldErrorBoundary = class extends Component {
       return /* @__PURE__ */ React.createElement("div", {
         className: "flex gap-2 border border-rose-fill font-mono text-sm"
       }, /* @__PURE__ */ React.createElement("span", {
-        className: "bg-rose-fill text-surface-text px-1 font-thin"
+        className: "bg-rose-fill text-base-foreground px-1 font-thin"
       }, "ERROR"), String(this.props.path?.join(".")));
     }
     return this.props.children;
@@ -762,12 +714,13 @@ import React3, { useMemo as useMemo3 } from "react";
 import * as Match from "effect/Match";
 import * as Option2 from "effect/Option";
 import * as Schema from "effect/Schema";
-import * as SchemaAST from "effect/SchemaAST";
+import * as SchemaAST2 from "effect/SchemaAST";
 import * as String2 from "effect/String";
 import React2, { useMemo as useMemo2 } from "react";
 import { Format as Format3 } from "@dxos/echo";
-import { createJsonPath as createJsonPath2, findNode, getAnnotation, getDiscriminatedType, isArrayType as isArrayType2, isDiscriminatedUnion, isLiteralUnion, isNestedType } from "@dxos/effect";
+import { createJsonPath as createJsonPath2, findNode, getAnnotation as getAnnotation2, getDiscriminatedType, isArrayType as isArrayType2, isDiscriminatedUnion, isLiteralUnion as isLiteralUnion2, isNestedType } from "@dxos/effect";
 import { useTranslation } from "@dxos/react-ui";
+import { translationKey } from "#translations";
 var FormField = (props) => {
   const {
     type,
@@ -783,16 +736,16 @@ var FormField = (props) => {
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
-    createFieldMap,
+    createFieldMap: createFieldMap3,
     db,
-    schemaHook,
-    getOptions: getRefOptions,
+    useSchema: schemaHook,
+    getOptions,
     onCreate
   } = props;
   const { t } = useTranslation(translationKey);
-  const title = getAnnotation(SchemaAST.TitleAnnotationId)(type);
-  const description = getAnnotation(SchemaAST.DescriptionAnnotationId)(type);
-  const examples = getAnnotation(SchemaAST.ExamplesAnnotationId)(type);
+  const title = getAnnotation2(SchemaAST2.TitleAnnotationId)(type);
+  const description = getAnnotation2(SchemaAST2.DescriptionAnnotationId)(type);
+  const examples = getAnnotation2(SchemaAST2.ExamplesAnnotationId)(type);
   const label = useMemo2(() => title ?? String2.capitalize(name), [
     title,
     name
@@ -810,6 +763,7 @@ var FormField = (props) => {
     label,
     placeholder,
     layout,
+    db,
     ...fieldState
   };
   const jsonPath = createJsonPath2(path ?? []);
@@ -836,7 +790,7 @@ var FormField = (props) => {
   if (Field) {
     return /* @__PURE__ */ React2.createElement(Field, fieldProps);
   }
-  const options = getOptions(type);
+  const options = getSelectOptions(type);
   if (options) {
     const fieldProjections = projection?.getFieldProjections();
     const fieldProjection = fieldProjections?.find((fp) => fp.field.path === name);
@@ -861,16 +815,16 @@ var FormField = (props) => {
       createOptionLabel: isCreateTarget ? createOptionLabel : void 0,
       createOptionIcon: isCreateTarget ? createOptionIcon : void 0,
       createInitialValuePath: isCreateTarget ? createInitialValuePath : void 0,
-      createFieldMap: isCreateTarget ? createFieldMap : void 0,
+      createFieldMap: isCreateTarget ? createFieldMap3 : void 0,
       db,
-      schemaHook,
-      getOptions: getRefOptions,
+      useSchema: schemaHook,
+      getOptions,
       onCreate
     });
   }
   if (isNestedType(type)) {
     const baseNode = findNode(type, isDiscriminatedUnion);
-    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST.isTypeLiteral);
+    const typeLiteral = baseNode ? getDiscriminatedType(baseNode, fieldState.getValue()) : findNode(type, SchemaAST2.isTypeLiteral);
     if (typeLiteral) {
       const schema = Schema.make(typeLiteral);
       return /* @__PURE__ */ React2.createElement(FormFieldSet, {
@@ -886,8 +840,8 @@ var FormField = (props) => {
         createOptionIcon,
         createInitialValuePath,
         db,
-        schemaHook,
-        getOptions: getRefOptions,
+        useSchema: schemaHook,
+        getOptions,
         onCreate
       });
     }
@@ -911,8 +865,8 @@ var getFormField = ({ type, format }) => {
       return BooleanField;
   }
 };
-var getOptions = (ast) => {
-  if (isLiteralUnion(ast)) {
+var getSelectOptions = (ast) => {
+  if (isLiteralUnion2(ast)) {
     return ast.types.map((type) => type.literal).filter((v) => v !== null);
   }
   return Format3.OptionsAnnotation.getFromAst(ast).pipe((annotation) => Option2.getOrUndefined(annotation));
@@ -922,39 +876,13 @@ var getOptions = (ast) => {
 var FORM_FIELDSET_NAME = "Form.FieldSet";
 var FormFieldSet = ({ label, schema, readonly, path, sort, exclude, projection, layout, ...props }) => {
   const values = useFormValues(FORM_FIELDSET_NAME, path);
-  const properties = useMemo3(() => {
-    if (!schema) {
-      return [];
-    }
-    const schemaProps = getFormProperties(schema.ast);
-    const filteredProps = exclude ? exclude(schemaProps) : schemaProps;
-    if (projection) {
-      const fieldProjections = projection.getFieldProjections();
-      const hiddenProperties = new Set(projection.getHiddenProperties());
-      const visibleProps = filteredProps.filter((prop) => !hiddenProperties.has(prop.name.toString()));
-      const orderedProps = [];
-      for (const fieldProjection of fieldProjections) {
-        const fieldPath = String(fieldProjection.field.path);
-        const prop = visibleProps.find((p) => p.name === fieldPath);
-        if (prop) {
-          orderedProps.push(prop);
-        }
-      }
-      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
-      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
-      orderedProps.push(...remainingProps);
-      return orderedProps;
-    }
-    return sort ? [
-      ...filteredProps
-    ].sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filteredProps;
-  }, [
+  const properties = useFormFieldSetProperties({
     schema,
     values,
     exclude,
     sort,
     projection
-  ]);
+  });
   if ((readonly || layout === "static") && values == null) {
     return null;
   }
@@ -984,9 +912,49 @@ var FormFieldSet = ({ label, schema, readonly, path, sort, exclude, projection,
   }));
 };
 FormFieldSet.displayName = FORM_FIELDSET_NAME;
+var useFormFieldSetProperties = ({ schema, exclude, projection, values, sort }) => {
+  return useMemo3(() => {
+    if (!schema) {
+      return [];
+    }
+    const schemaProps = getFormProperties(schema.ast);
+    const filteredProps = exclude ? exclude(schemaProps) : schemaProps;
+    if (projection) {
+      const fieldProjections = projection.getFieldProjections();
+      const hiddenProperties = new Set(projection.getHiddenProperties());
+      const visibleProps = filteredProps.filter((prop) => !hiddenProperties.has(prop.name.toString()));
+      const orderedProps = [];
+      for (const fieldProjection of fieldProjections) {
+        const fieldPath = String(fieldProjection.field.path);
+        const prop = visibleProps.find((prop2) => prop2.name === fieldPath);
+        if (prop) {
+          orderedProps.push(prop);
+        }
+      }
+      const projectionPaths = new Set(fieldProjections.map((projection2) => String(projection2.field.path)));
+      const remainingProps = visibleProps.filter((prop) => !projectionPaths.has(prop.name.toString()));
+      orderedProps.push(...remainingProps);
+      return orderedProps;
+    }
+    return sort ? [
+      ...filteredProps
+    ].sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filteredProps;
+  }, [
+    schema,
+    values,
+    exclude,
+    sort,
+    projection
+  ]);
+};
 
 // src/components/Form/Form.tsx
 var omitId = (schema) => schema.pipe(Schema2.omit("id"));
+var omitHiddenFormFields = (schema) => {
+  const properties = SchemaAST3.getPropertySignatures(schema.ast);
+  const hidden = properties.filter((prop) => Option3.getOrElse(EchoAnnotation.FormInputAnnotation.getFromAst(prop.type), () => true) === false).map((prop) => prop.name);
+  return hidden.length === 0 ? schema : schema.pipe(Schema2.omit(...hidden));
+};
 var [FormContextProvider, useFormContext] = createContext("Form");
 var useFormValues = (componentName, path, defaultValue) => {
   const stablePath = useMemo4(() => path ?? [], [
@@ -999,7 +967,7 @@ var useFormValues = (componentName, path, defaultValue) => {
   useEffect2(() => {
     if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
       lastAppliedPathRef.current = jsonPath;
-      onValueChange(stablePath, SchemaAST2.stringKeyword, defaultValue());
+      onValueChange(stablePath, SchemaAST3.stringKeyword, defaultValue());
     }
   }, [
     value3,
@@ -1066,7 +1034,7 @@ var FormContent = composable(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React4.createElement("div", {
     ...composableProps(props, {
       role: "form",
-      classNames: "flex flex-col w-full pb-form-gap"
+      classNames: mx(withColumn.center(), "flex flex-col w-full pb-form-gap")
     }),
     "data-testid": testId,
     ref: mergedRef
@@ -1085,14 +1053,13 @@ var FormFieldSet2 = (props) => {
 FormFieldSet2.displayName = FORM_FIELDSET_NAME2;
 var FORM_ACTIONS_NAME = "Form.Actions";
 var FormActions = ({ classNames }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { form: { canSave, onSave, onCancel }, readonly, layout } = useFormContext(FORM_ACTIONS_NAME);
   if (readonly || layout === "static") {
     return null;
   }
   return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
-    className: mx("grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding", classNames)
+    className: mx(withColumn.center(), "grid grid-flow-col gap-form-gap auto-cols-fr py-form-padding", classNames)
   }, onCancel && /* @__PURE__ */ React4.createElement(IconButton, {
     icon: "ph--x--regular",
     iconEnd: true,
@@ -1111,15 +1078,28 @@ var FormActions = ({ classNames }) => {
   }));
 };
 FormActions.displayName = FORM_ACTIONS_NAME;
+var FORM_SECTION_NAME = "Form.Section";
+var FormSection = composable(({ children, label, description, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...composableProps(props, {
+      classNames: "flex flex-col pt-form-section-gap first:pt-0"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React4.createElement("h2", {
+    className: "text-lg"
+  }, label), description && /* @__PURE__ */ React4.createElement("p", {
+    className: "text-description"
+  }, description), children);
+});
+FormSection.displayName = FORM_SECTION_NAME;
 var FORM_SUBMIT_NAME = "Form.Submit";
 var FormSubmit = ({ classNames, label, icon, disabled }) => {
-  const { t } = useTranslation2(translationKey);
+  const { t } = useTranslation2(translationKey2);
   const { form: { canSave, onSave }, readonly, layout } = useFormContext(FORM_SUBMIT_NAME);
   if (readonly || layout === "static") {
     return null;
   }
   return /* @__PURE__ */ React4.createElement("div", {
-    role: "none",
     className: mx("flex w-full pt-form-padding", classNames)
   }, /* @__PURE__ */ React4.createElement(IconButton, {
     classNames: "w-full",
@@ -1137,6 +1117,7 @@ var Form = {
   Root: FormRoot,
   Viewport: FormViewport,
   Content: FormContent,
+  Section: FormSection,
   FieldSet: FormFieldSet2,
   Label: FormFieldLabel,
   Actions: FormActions,
@@ -1145,18 +1126,18 @@ var Form = {
 
 // src/components/Form/fields/ArrayField.tsx
 var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps, ...props }) => {
-  const { t } = useTranslation3(translationKey);
+  const { t } = useTranslation3(translationKey3);
   const elementType = getArrayElementType2(type);
   const { onValueChange } = inputProps;
   const values = useFormValues(ArrayField.displayName, path, () => []);
   const getDefaultObjectValue = (typeNode) => {
     const baseNode = findNode2(typeNode, isDiscriminatedUnion2);
-    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST3.isTypeLiteral);
+    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST4.isTypeLiteral);
     if (!typeLiteral) {
       return {};
     }
     return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
-      const defaultValue = SchemaAST3.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      const defaultValue = SchemaAST4.getDefaultAnnotation(prop.type).pipe((annotation) => Option4.getOrUndefined(annotation));
       return [
         prop.name,
         defaultValue
@@ -1190,13 +1171,11 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
     label,
     asChild: true
   }), /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
     className: "flex flex-col gap-form-gap"
   }, values?.map((_, index) => {
     return /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
       key: index,
-      className: "flex gap-form-gap last:mb-form-gap"
+      className: "grid grid-cols-[1fr_min-content] gap-form-gap last:mb-form-gap items-center"
     }, /* @__PURE__ */ React5.createElement(FormField, {
       autoFocus: index === values.length - 1,
       type: elementType,
@@ -1208,10 +1187,8 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
       layout: "inline",
       ...props
     }), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
       className: "flex flex-col h-full justify-end"
     }, /* @__PURE__ */ React5.createElement("div", {
-      role: "none",
       className: "flex items-center h-[2rem]"
     }, /* @__PURE__ */ React5.createElement(IconButton2, {
       icon: "ph--x--regular",
@@ -1223,7 +1200,7 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
   })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
     classNames: "flex w-full",
     icon: "ph--plus--regular",
-    label: t("add-field.button"),
+    label: t("add-item.button"),
     onClick: handleAdd
   }));
 };
@@ -1275,8 +1252,9 @@ import React7, { useCallback as useCallback5, useEffect as useEffect3, useMemo a
 import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
 import { Input as Input3, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
+import { translationKey as translationKey4 } from "#translations";
 var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onValueChange, onBlur }) => {
-  const { t } = useTranslation4(translationKey);
+  const { t } = useTranslation4(translationKey4);
   const { status, error } = getStatus();
   const geoPoint = useMemo5(() => getValue() ?? [
     0,
@@ -1330,7 +1308,6 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
     label,
     asChild: true
   }), layout === "static" ? /* @__PURE__ */ React7.createElement(LatLng, value3) : /* @__PURE__ */ React7.createElement("div", {
-    role: "none",
     className: "grid grid-cols-2 gap-form-gap"
   }, /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("latitude.label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
     type: "number",
@@ -1367,56 +1344,141 @@ var LatLng = ({ latitude = 0, longitude = 0 }) => {
 };
 
 // src/components/Form/fields/MarkdownField.tsx
-import React8, { useCallback as useCallback6, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { Input as Input4 } from "@dxos/react-ui";
-var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, getValue, onValueChange, onBlur }) => {
+import { useAtomValue } from "@effect-atom/atom-react";
+import React8, { useCallback as useCallback6, useMemo as useMemo6 } from "react";
+import { Obj, Ref as Ref2 } from "@dxos/echo";
+import { AtomRef } from "@dxos/echo-atom";
+import { createDocAccessor } from "@dxos/echo-db";
+import { Button, Icon as Icon2, Input as Input4, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { Editor, useBasicMarkdownExtensions } from "@dxos/react-ui-editor";
+import { Text } from "@dxos/schema";
+import { createDataExtensions } from "@dxos/ui-editor";
+import { translationKey as translationKey5 } from "#translations";
+var editorClassNames = "transition-colors bg-input-surface focus-within:bg-focus-surface border border-separator rounded-xs p-1 px-2";
+var MarkdownField = ({ type, readonly, label, placeholder, layout, db, getStatus, getValue, onValueChange }) => {
   const { status, error } = getStatus();
-  const textareaRef = useRef2(null);
-  const adjustHeight = useCallback6(() => {
-    const textarea = textareaRef.current;
-    if (textarea) {
-      textarea.style.blockSize = "auto";
-      textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
-    }
-  }, []);
-  useEffect4(() => {
-    adjustHeight();
-  }, [
-    adjustHeight
-  ]);
-  useEffect4(() => {
-    adjustHeight();
-  }, [
-    getValue(),
-    adjustHeight
-  ]);
-  const handleChange = useCallback6((event) => onValueChange(type, event.target.value), [
-    type,
-    onValueChange
-  ]);
+  const isRef = Ref2.isRefType(type);
   const value3 = getValue();
-  if ((readonly || layout === "static") && !value3) {
+  if ((readonly || layout === "static") && value3 == null) {
     return null;
   }
+  const renderEditor = () => {
+    if (isRef) {
+      const reference = value3;
+      if (reference) {
+        return /* @__PURE__ */ React8.createElement(RefMarkdownEditor, {
+          reference,
+          placeholder
+        });
+      }
+      if (readonly) {
+        return null;
+      }
+      return /* @__PURE__ */ React8.createElement(CreateTextButton, {
+        db,
+        disabled: !db,
+        onCreate: (ref) => onValueChange(type, ref)
+      });
+    }
+    return /* @__PURE__ */ React8.createElement(StringMarkdownEditor, {
+      value: value3 ?? "",
+      placeholder,
+      readonly: !!readonly,
+      onChange: (next) => onValueChange(type, next)
+    });
+  };
+  const renderStatic = () => {
+    if (isRef) {
+      const reference = value3;
+      return reference ? /* @__PURE__ */ React8.createElement(RefStaticText, {
+        reference
+      }) : null;
+    }
+    return /* @__PURE__ */ React8.createElement("p", {
+      className: "whitespace-pre-wrap"
+    }, value3 ?? "");
+  };
   return /* @__PURE__ */ React8.createElement(Input4.Root, {
     validationValence: status
   }, layout !== "inline" && /* @__PURE__ */ React8.createElement(FormFieldLabel, {
     error,
     readonly,
     label
-  }), layout === "static" ? /* @__PURE__ */ React8.createElement("p", null, value3) : /* @__PURE__ */ React8.createElement(Input4.TextArea, {
-    ref: textareaRef,
-    disabled: !!readonly,
+  }), layout === "static" ? renderStatic() : renderEditor(), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
+};
+var RefStaticText = ({ reference }) => {
+  const text = useAtomValue(useMemo6(() => AtomRef.make(reference), [
+    reference
+  ]));
+  if (!text?.content) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement("p", {
+    className: "whitespace-pre-wrap"
+  }, text.content);
+};
+var RefMarkdownEditor = ({ reference, placeholder }) => {
+  const text = useAtomValue(useMemo6(() => AtomRef.make(reference), [
+    reference
+  ]));
+  const dataExtensions = useMemo6(() => text ? [
+    createDataExtensions({
+      id: reference.dxn.toString(),
+      text: createDocAccessor(text, [
+        "content"
+      ])
+    })
+  ] : [], [
+    text,
+    reference
+  ]);
+  const extensions = useBasicMarkdownExtensions({
     placeholder,
-    value: value3 ?? "",
-    classNames: "min-h-auto max-h-40 overflow-auto",
-    onChange: handleChange,
-    onBlur,
-    style: {
-      resize: "none"
-    },
-    spellCheck: false
-  }), layout === "full" && /* @__PURE__ */ React8.createElement(Input4.Validation, null, error));
+    extensions: dataExtensions
+  });
+  if (!text) {
+    return null;
+  }
+  return /* @__PURE__ */ React8.createElement(Editor.Root, null, /* @__PURE__ */ React8.createElement(Editor.View, {
+    classNames: editorClassNames,
+    extensions
+  }));
+};
+var StringMarkdownEditor = ({ value: value3, placeholder, readonly, onChange }) => {
+  const extensions = useBasicMarkdownExtensions({
+    placeholder
+  });
+  const handleChange = useCallback6((next) => onChange(next), [
+    onChange
+  ]);
+  return /* @__PURE__ */ React8.createElement(Editor.Root, null, /* @__PURE__ */ React8.createElement(Editor.View, {
+    classNames: editorClassNames,
+    extensions,
+    value: value3,
+    onChange: readonly ? void 0 : handleChange
+  }));
+};
+var CreateTextButton = ({ db, disabled, onCreate }) => {
+  const { t } = useTranslation5(translationKey5);
+  const handleClick = useCallback6(() => {
+    if (!db) {
+      return;
+    }
+    const text = db.add(Obj.make(Text.Text, {
+      content: ""
+    }));
+    onCreate(Ref2.make(text));
+  }, [
+    db,
+    onCreate
+  ]);
+  return /* @__PURE__ */ React8.createElement(Button, {
+    onClick: handleClick,
+    disabled
+  }, /* @__PURE__ */ React8.createElement(Icon2, {
+    icon: "ph--plus--regular",
+    size: 4
+  }), /* @__PURE__ */ React8.createElement("span", null, t("create-text.label")));
 };
 
 // src/components/Form/fields/NumberField.tsx
@@ -1442,31 +1504,33 @@ var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...prop
 };
 
 // src/components/Form/fields/RefField.tsx
-import React11, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
+import React11, { useCallback as useCallback9, useMemo as useMemo7, useState as useState4 } from "react";
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import { Entity, Filter, Obj, Ref as Ref2, Type } from "@dxos/echo";
-import { useQuery, useSchema as useSchema$ } from "@dxos/echo-react";
+import { Entity, Filter, Obj as Obj2, Ref as Ref3, Type } from "@dxos/echo";
+import { useQuery, useSchema as defaultUseSchema } from "@dxos/echo-react";
 import { ReferenceAnnotationId as ReferenceAnnotationId2 } 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, Icon as Icon2, Input as Input6, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Button as Button2, Icon as Icon3, Input as Input6, useTranslation as useTranslation7 } from "@dxos/react-ui";
 import { ParentLabelAnnotationId } from "@dxos/schema";
-import { mx as mx2 } from "@dxos/ui-theme";
+import { translationKey as translationKey7 } from "#translations";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
 import React10, { forwardRef, useCallback as useCallback8, useState as useState3 } from "react";
-import { Popover, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-search";
-var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap, onSelect, onCreate, ...props }, forwardedRef) => {
-  const { t } = useTranslation5(translationKey);
+import { Popover, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { Combobox } from "@dxos/react-ui-list";
+import { useSearchListResults } from "@dxos/react-ui-search";
+import { translationKey as translationKey6 } from "#translations";
+var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, onSelect, onCreate, ...props }, forwardedRef) => {
+  const { t } = useTranslation6(translationKey6);
   const [showForm, setShowForm] = useState3(false);
   const [formInitialValue, setFormInitialValue] = useState3("");
-  const { results, handleSearch } = useSearchListResults({
+  const { results, query, handleSearch } = useSearchListResults({
     items: options
   });
-  const handleFormSave = useCallback8((values) => {
-    onCreate?.(values);
+  const handleFormSave = useCallback8(async (values) => {
+    await onCreate?.(values);
     setShowForm(false);
     setFormInitialValue("");
   }, [
@@ -1491,7 +1555,6 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
   if (showForm && createSchema) {
     return /* @__PURE__ */ React10.createElement(Combobox.Content, {
       ...props,
-      onSearch: handleSearch,
       onKeyDownCapture: handleKeyDown,
       ref: forwardedRef
     }, /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
@@ -1500,19 +1563,20 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
       defaultValues: createInitialValuePath ? {
         [createInitialValuePath]: formInitialValue
       } : {},
-      fieldMap: createFieldMap,
+      fieldMap: createFieldMap3,
       onSave: handleFormSave,
       onCancel: handleFormCancel
     }, /* @__PURE__ */ React10.createElement(Form.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Content, null, /* @__PURE__ */ React10.createElement(Form.FieldSet, null), /* @__PURE__ */ React10.createElement(Form.Actions, null))))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
   }
   return /* @__PURE__ */ React10.createElement(Combobox.Content, {
     ...props,
-    onSearch: handleSearch,
     onKeyDownCapture: handleKeyDown,
     ref: forwardedRef
   }, /* @__PURE__ */ React10.createElement(Combobox.Input, {
     placeholder: t("ref-field-combobox-input.placeholder"),
-    autoFocus: true
+    autoFocus: true,
+    value: query,
+    onValueChange: handleSearch
   }), /* @__PURE__ */ React10.createElement(Combobox.List, null, results.map((option) => /* @__PURE__ */ React10.createElement(Combobox.Item, {
     key: option.id,
     value: option.id,
@@ -1521,17 +1585,17 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef(({ options, selectedIds, cr
     onSelect: () => onSelect(option.id),
     classNames: "flex items-center gap-2"
   })), createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
+    query,
     createOptionLabel,
     createOptionIcon: createOptionIcon ?? "ph--plus--regular",
-    onCreateItemSelect: (query) => {
-      setFormInitialValue(query);
+    onCreateItemSelect: (currentQuery) => {
+      setFormInitialValue(currentQuery);
       setShowForm(true);
     }
   })), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
 });
-var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
-  const { t } = useTranslation5(translationKey);
-  const { query } = useSearchListInput();
+var CreateItem = ({ query, createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+  const { t } = useTranslation6(translationKey6);
   const label = createOptionLabel ? t(createOptionLabel[0], {
     ns: createOptionLabel[1].ns,
     text: query
@@ -1562,39 +1626,41 @@ var isRefSnapshot = (val) => {
 };
 var defaultGetOptions = (results, { parentLabel } = {}) => results.map((result) => {
   const id = Entity.getDXN(result).toString();
-  const parent = parentLabel ? Obj.getParent(result) : void 0;
+  const parent = parentLabel ? Obj2.getParent(result) : void 0;
   const label = parent ? Entity.getLabel(parent) : Entity.getLabel(result);
   return {
     id,
     label: label ?? id
   };
 });
-var defaultResultsHook = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj.Unknown) ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
+var defaultUseResults = (db, typename) => useQuery(db, typename ? typename === Type.getTypename(Obj2.Unknown) ? Filter.everything() : Filter.typename(typename) : Filter.nothing());
 var RefField = (props) => {
-  const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap, db, resultsHook: useResults = defaultResultsHook, schemaHook: useSchema = useSchema$, getOptions: getOptions2 = defaultGetOptions, onCreate, onValueChange } = props;
-  const { t } = useTranslation6(translationKey);
+  const { type, readonly, label, placeholder, layout, getStatus, getValue, createOptionLabel, createOptionIcon, createInitialValuePath, createFieldMap: createFieldMap3, db, useSchema = defaultUseSchema, useResults = defaultUseResults, getOptions = defaultGetOptions, onCreate, onValueChange } = props;
+  const { t } = useTranslation7(translationKey7);
   const { status, error } = getStatus();
-  const typename = useMemo6(() => type ? findAnnotation2(type, ReferenceAnnotationId2)?.typename : void 0, [
+  const typename = useMemo7(() => type ? findAnnotation2(type, ReferenceAnnotationId2)?.typename : void 0, [
     type
   ]);
   const results = useResults(db, typename);
-  const options = useMemo6(() => {
+  const options = useMemo7(() => {
     const parentLabel = type ? findAnnotation2(type, ParentLabelAnnotationId) === true : false;
-    return getOptions2(results, {
+    return getOptions(results, {
       parentLabel
     });
   }, [
     results,
-    getOptions2,
+    getOptions,
     type
   ]);
   const handleGetValue = useCallback9(() => {
     const formValue = getValue();
+    const dxnToObjectId = (dxn) => dxn.split(":").pop() ?? dxn;
     const unknownToRefOption = (value3) => {
-      const isRef = Ref2.isRef(value3);
+      const isRef = Ref3.isRef(value3);
       if (isRef || isRefSnapshot(value3)) {
         const dxnString = isRef ? value3.dxn.toString() : value3["/"];
-        const matchingOption = options.find((option) => option.id === dxnString);
+        const objectId = dxnToObjectId(dxnString);
+        const matchingOption = options.find((option) => dxnToObjectId(option.id) === objectId);
         if (matchingOption) {
           return matchingOption;
         }
@@ -1606,29 +1672,37 @@ var RefField = (props) => {
     options,
     getValue
   ]);
-  const handleUpdate = useCallback9((id) => {
-    const item2 = options.find((option) => option.id === id);
-    const ref = item2 ? Ref2.fromDXN(DXN.parse(item2.id)) : void 0;
-    onValueChange(type, ref);
-  }, [
-    options,
-    type,
-    onValueChange
-  ]);
   const item = handleGetValue();
-  const selectedIds = useMemo6(() => item ? [
+  const selectedIds = useMemo7(() => item ? [
     item.id
   ] : [], [
     item
   ]);
   const createSchema = useSchema(db, typename);
-  const handleCreate = useCallback9((values) => {
-    if (createSchema && onCreate) {
-      onCreate(createSchema, values);
+  const [open, setOpen] = useState4(false);
+  const handleCreate = useCallback9(async (values) => {
+    if (!createSchema || !onCreate) {
+      return;
     }
+    const newObject = await onCreate(createSchema, values);
+    if (newObject) {
+      onValueChange(type, Ref3.make(newObject));
+    }
+    setOpen(false);
   }, [
     createSchema,
-    onCreate
+    onCreate,
+    type,
+    onValueChange
+  ]);
+  const handleUpdate = useCallback9((id) => {
+    const item2 = options.find((option) => option.id === id);
+    const ref = item2 ? Ref3.fromDXN(DXN.parse(item2.id)) : void 0;
+    onValueChange(type, ref);
+  }, [
+    options,
+    type,
+    onValueChange
   ]);
   const handleSelect = useCallback9((id) => {
     if (item?.id === id) {
@@ -1650,12 +1724,15 @@ var RefField = (props) => {
     readonly,
     label
   }), /* @__PURE__ */ React11.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React11.createElement("p", {
-    className: mx2("text-description", "mb-2")
+    className: "text-description mb-2"
   }, t("empty-readonly-ref-field.label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
     key: item.id,
     dxn: item.id,
     rootclassname: "me-1"
-  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
+  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, {
+    open,
+    onOpenChange: setOpen
+  }, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
     asChild: true,
     classNames: "p-0"
   }, item ? /* @__PURE__ */ React11.createElement("div", {
@@ -1666,25 +1743,27 @@ var RefField = (props) => {
     value: item.label,
     readOnly: true,
     classNames: "w-full"
-  }))) : /* @__PURE__ */ React11.createElement(Button, {
+  }))) : /* @__PURE__ */ React11.createElement(Button2, {
     classNames: "w-full text-start gap-form-gap"
   }, /* @__PURE__ */ React11.createElement("div", {
-    role: "none",
     className: "grow overflow-hidden"
   }, /* @__PURE__ */ React11.createElement("span", {
-    className: "flex truncate text-description"
-  }, placeholder ?? t("ref-field.placeholder"))), /* @__PURE__ */ React11.createElement(Icon2, {
+    className: "truncate text-description"
+  }, placeholder ?? t("ref-field.placeholder"))), /* @__PURE__ */ React11.createElement(Icon3, {
     size: 3,
     icon: "ph--caret-down--bold"
   }))), /* @__PURE__ */ React11.createElement(ObjectPicker.Portal, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Content, {
     classNames: "dx-card-popover-width",
     options,
     selectedIds,
-    createSchema: createSchema && omitId(createSchema),
+    // Strip hidden (`FormInputAnnotation.set(false)`) fields so the
+    // form's validator doesn't reject required-but-hidden fields
+    // such as backing-object refs supplied by a `FactoryAnnotation`.
+    createSchema: createSchema && omitHiddenFormFields(omitId(createSchema)),
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
-    createFieldMap,
+    createFieldMap: createFieldMap3,
     onCreate: handleCreate,
     onSelect: handleSelect
   })))), layout === "full" && /* @__PURE__ */ React11.createElement(Input6.DescriptionAndValidation, null, error));
@@ -1726,20 +1805,21 @@ var SelectField = ({ type, readonly, label, layout, placeholder, options, getSta
 };
 
 // src/components/Form/fields/SelectOptionField.tsx
-import React13, { useCallback as useCallback11, useEffect as useEffect5, useRef as useRef3, useState as useState4 } from "react";
+import React13, { useCallback as useCallback11, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
 import { PublicKey } from "@dxos/keys";
-import { IconButton as IconButton3, Input as Input8, Tag, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { IconButton as IconButton3, Input as Input8, Tag, useTranslation as useTranslation8 } from "@dxos/react-ui";
 import { List } from "@dxos/react-ui-list";
 import { HuePicker } from "@dxos/react-ui-pickers";
-import { hues, osTranslations, subtleHover } from "@dxos/ui-theme";
+import { hues, osTranslations } from "@dxos/ui-theme";
+import { translationKey as translationKey8 } from "#translations";
 var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueChange }) => {
-  const { t } = useTranslation7(translationKey);
+  const { t } = useTranslation8(translationKey8);
   const { status, error } = getStatus();
-  const [selected, setSelectedId] = useState4(null);
-  const [isNewOption, setIsNewOption] = useState4(false);
-  const inputRef = useRef3(null);
+  const [selected, setSelectedId] = useState5(null);
+  const [isNewOption, setIsNewOption] = useState5(false);
+  const inputRef = useRef2(null);
   const options = getValue();
-  useEffect5(() => {
+  useEffect4(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -1830,7 +1910,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -1845,9 +1925,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     error,
     readonly,
     label
-  }), /* @__PURE__ */ React13.createElement("div", {
-    role: "none"
-  }, options && /* @__PURE__ */ React13.createElement(List.Root, {
+  }), /* @__PURE__ */ React13.createElement("div", null, options && /* @__PURE__ */ React13.createElement(List.Root, {
     items: options,
     isItem: (_item) => true,
     onMove: readonly ? void 0 : handleMove,
@@ -1860,10 +1938,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
   }, /* @__PURE__ */ React13.createElement(List.Item, {
     role: "button",
     item,
-    classNames: [
-      subtleHover,
-      "flex flex-col cursor-pointer rounded-xs"
-    ],
+    classNames: "flex flex-col cursor-pointer rounded-xs dx-hover",
     "aria-expanded": selected === item.id
   }, /* @__PURE__ */ React13.createElement("div", {
     className: "flex items-center"
@@ -1877,7 +1952,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
   }, item.title || "\u200B")), /* @__PURE__ */ React13.createElement(IconButton3, {
     iconOnly: true,
     variant: "ghost",
-    label: t(selected === item.id ? "collapse label" : "expand label", {
+    label: t(selected === item.id ? "collapse.label" : "expand.label", {
       ns: osTranslations
     }),
     icon: selected === item.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
@@ -1919,7 +1994,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
 // src/components/Form/fields/TextField.tsx
 import React14, { useCallback as useCallback12 } from "react";
 import { Input as Input9 } from "@dxos/react-ui";
-var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props }) => {
+var TextField = ({ type, readonly, placeholder, onBlur, onValueChange, ...props }) => {
   const handleChange = useCallback12((event) => onValueChange(type, event.target.value), [
     type,
     onValueChange
@@ -1932,8 +2007,8 @@ var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props
     disabled: !!readonly,
     placeholder,
     value: value3,
-    onChange: handleChange,
-    onBlur
+    onBlur,
+    onChange: handleChange
   }));
 };
 
@@ -1961,7 +2036,7 @@ var TextAreaField = ({ type, readonly, placeholder, onValueChange, onBlur, ...pr
 // src/components/Form/fields/TupleField.tsx
 import React16 from "react";
 import { Input as Input11 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -1979,7 +2054,7 @@ var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValue
     readonly,
     label
   }), /* @__PURE__ */ React16.createElement("div", {
-    className: mx3("grid gap-form-gap", gridCols[binding.length - 1])
+    className: mx2("grid gap-form-gap", gridCols[binding.length - 1])
   }, binding.map((prop) => /* @__PURE__ */ React16.createElement(Input11.TextInput, {
     key: prop,
     type: "number",
@@ -1998,13 +2073,13 @@ var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValue
 // src/components/FieldEditor/FieldEditor.tsx
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/FieldEditor/FieldEditor.tsx";
 var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCancel }) => {
-  const { t } = useTranslation8(translationKey);
-  const [props, setProps] = useState5(projection.getFieldProjection(field.id).props);
-  useEffect6(() => setProps(projection.getFieldProjection(field.id).props), [
+  const { t } = useTranslation9(translationKey9);
+  const [props, setProps] = useState6(projection.getFieldProjection(field.id).props);
+  useEffect5(() => setProps(projection.getFieldProjection(field.id).props), [
     field,
     projection
   ]);
-  const [schemas, setSchemas] = useState5([]);
+  const [schemas, setSchemas] = useState6([]);
   useAsyncEffect(async () => {
     if (!registry) {
       return;
@@ -2018,17 +2093,17 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = useState5();
-  useEffect6(() => {
+  const [referenceSchema, setReferenceSchema] = useState6();
+  useEffect5(() => {
     setReferenceSchema(schemas.find((schema) => schema.typename === props?.referenceSchema));
   }, [
     schemas,
     props?.referenceSchema
   ]);
-  const [{ fieldSchema }, setFieldSchema] = useState5({
+  const [{ fieldSchema }, setFieldSchema] = useState6({
     fieldSchema: getFormatSchema(props?.format)
   });
-  const fieldMap = useMemo7(() => ({
+  const fieldMap = useMemo8(() => ({
     ["format"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
       ...props2,
       options: FormatEnums.filter((value3) => value3 !== Format4.TypeFormat.None).map((value3) => ({
@@ -2107,7 +2182,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const handleSave = useCallback14((props2) => {
     if (view) {
-      Obj2.change(view, () => {
+      Obj3.update(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2135,12 +2210,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
-    }, {
-      F: __dxlog_file2,
-      L: 172,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 156, S: void 0 });
     return null;
   }
   return /* @__PURE__ */ React17.createElement(Form.Root, {
@@ -2162,99 +2232,487 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   }, /* @__PURE__ */ React17.createElement(Form.Content, null, /* @__PURE__ */ React17.createElement(Form.FieldSet, null), /* @__PURE__ */ React17.createElement(Form.Actions, null)));
 };
 
+// src/components/ObjectForm/ObjectForm.tsx
+import * as Schema3 from "effect/Schema";
+import React18, { useCallback as useCallback15, useMemo as useMemo9 } from "react";
+import { DXN as DXN2, Obj as Obj4, Ref as Ref4, Tag as Tag2, Type as Type2 } from "@dxos/echo";
+import { splitJsonPath } from "@dxos/echo/internal";
+import { invariant } from "@dxos/invariant";
+import { HuePicker as HuePicker2 } from "@dxos/react-ui-pickers";
+import { isNonNullable } from "@dxos/util";
+import { translationKey as translationKey10 } from "#translations";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectForm/ObjectForm.tsx";
+var createFieldMap = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback15((nextHue) => onValueChange(type, nextHue), [
+      onValueChange,
+      type
+    ]);
+    const handleReset = useCallback15(() => onValueChange(type, void 0), [
+      onValueChange,
+      type
+    ]);
+    return /* @__PURE__ */ React18.createElement(React18.Fragment, null, layout !== "inline" && /* @__PURE__ */ React18.createElement(Form.Label, {
+      label
+    }), /* @__PURE__ */ React18.createElement(HuePicker2, {
+      value: getValue(),
+      onChange: handleChange,
+      onReset: handleReset
+    }));
+  }
+};
+var ObjectForm = ({ object, schema }) => {
+  const db = Obj4.getDatabase(object);
+  const meta = Obj4.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN2.parse(tag))).filter(isNonNullable);
+  const values = useMemo9(() => ({
+    tags,
+    ...object
+  }), [
+    object,
+    tags
+  ]);
+  const formSchema = useMemo9(() => omitId(Schema3.Struct({
+    tags: Schema3.Array(Ref4.Ref(Tag2.Tag)).pipe(Schema3.optional)
+  }).pipe(Schema3.extend(schema))), [
+    schema
+  ]);
+  const handleCreate = useCallback15((schema2, values2) => {
+    invariant(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 49, S: void 0, A: ["db", ""] });
+    invariant(Type2.isObjectSchema(schema2), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 50, S: void 0, A: ["Type.isObjectSchema(schema)", ""] });
+    const newObject = db.add(Obj4.make(schema2, values2));
+    if (Obj4.instanceOf(Tag2.Tag, newObject)) {
+      Obj4.update(object, (object2) => {
+        Obj4.getMeta(object2).tags = [
+          ...Obj4.getMeta(object2).tags ?? [],
+          Obj4.getDXN(newObject).toString()
+        ];
+      });
+    }
+  }, []);
+  const handleChange = useCallback15(({ tags: tags2, ...values2 }, { isValid, changed }) => {
+    if (!isValid) {
+      return;
+    }
+    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath(path)[0] === "tags");
+    if (hasTagsChange) {
+      Obj4.update(object, (object2) => {
+        Obj4.getMeta(object2).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
+      });
+    }
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath(path)[0] !== "tags");
+    if (nonTagPaths.length > 0) {
+      Obj4.update(object, () => {
+        for (const path of nonTagPaths) {
+          const parts = splitJsonPath(path);
+          const value3 = Obj4.getValue(values2, parts);
+          Obj4.setValue(object, parts, value3);
+        }
+      });
+    }
+  }, [
+    object
+  ]);
+  return /* @__PURE__ */ React18.createElement(Form.Root, {
+    schema: formSchema,
+    defaultValues: values,
+    createTypename: Type2.getTypename(Tag2.Tag),
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel: [
+      "add-tag.label",
+      {
+        ns: translationKey10
+      }
+    ],
+    createInitialValuePath: "label",
+    createFieldMap,
+    db,
+    onValuesChanged: handleChange,
+    onCreate: handleCreate
+  }, /* @__PURE__ */ React18.createElement(Form.Viewport, null, /* @__PURE__ */ React18.createElement(Form.Content, null, /* @__PURE__ */ React18.createElement(Form.FieldSet, null))));
+};
+
+// src/components/ObjectProperties/ObjectProperties.tsx
+import * as Function from "effect/Function";
+import * as Option5 from "effect/Option";
+import * as Schema4 from "effect/Schema";
+import React19, { useCallback as useCallback16, useMemo as useMemo10 } from "react";
+import { DXN as DXN3, Obj as Obj5, Ref as Ref5, Tag as Tag3, Type as Type3 } from "@dxos/echo";
+import { splitJsonPath as splitJsonPath2 } from "@dxos/echo/internal";
+import { invariant as invariant2 } from "@dxos/invariant";
+import { HuePicker as HuePicker3 } from "@dxos/react-ui-pickers";
+import { FactoryAnnotation } from "@dxos/schema";
+import { composable as composable2, composableProps as composableProps2 } from "@dxos/ui-theme";
+import { isNonNullable as isNonNullable2 } from "@dxos/util";
+import { translationKey as translationKey11 } from "#translations";
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ObjectProperties/ObjectProperties.tsx";
+var ObjectProperties = composable2(({ children, object, ...props }, forwardedRef) => {
+  const db = Obj5.getDatabase(object);
+  const meta = Obj5.getMeta(object);
+  const tags = (meta.tags ?? []).map((tag) => db?.makeRef(DXN3.parse(tag))).filter(isNonNullable2);
+  const values = useMemo10(() => ({
+    tags,
+    ...object
+  }), [
+    object,
+    tags
+  ]);
+  const formSchema = useMemo10(() => {
+    return Function.pipe(Obj5.getSchema(object), Option5.fromNullable, Option5.map((schema) => omitId(BaseSchema.pipe(Schema4.extend(schema)))), Option5.getOrUndefined);
+  }, [
+    object
+  ]);
+  const handleCreate = useCallback16((schema, values2) => {
+    invariant2(db, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 45, S: void 0, A: ["db", ""] });
+    invariant2(Type3.isObjectSchema(schema), void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 46, S: void 0, A: ["Type.isObjectSchema(schema)", ""] });
+    const factory = Option5.getOrUndefined(FactoryAnnotation.get(schema));
+    const newObject = factory ? factory(values2) : Obj5.make(schema, values2);
+    return db.add(newObject);
+  }, [
+    db
+  ]);
+  const handleChange = useCallback16(({ tags: tags2, ...values2 }, { isValid, changed }) => {
+    if (!isValid) {
+      return;
+    }
+    const changedPaths = Object.keys(changed).filter((path) => changed[path]);
+    const hasTagsChange = changedPaths.some((path) => splitJsonPath2(path)[0] === "tags");
+    if (hasTagsChange) {
+      Obj5.update(object, (object2) => {
+        Obj5.getMeta(object2).tags = tags2?.map((tag) => tag.dxn.toString()) ?? [];
+      });
+    }
+    const nonTagPaths = changedPaths.filter((path) => splitJsonPath2(path)[0] !== "tags");
+    if (nonTagPaths.length > 0) {
+      Obj5.update(object, () => {
+        for (const path of nonTagPaths) {
+          const parts = splitJsonPath2(path);
+          const value3 = Obj5.getValue(values2, parts);
+          Obj5.setValue(object, parts, value3);
+        }
+      });
+    }
+  }, [
+    object
+  ]);
+  if (!formSchema) {
+    return null;
+  }
+  return /* @__PURE__ */ React19.createElement(Form.Root, {
+    schema: formSchema,
+    defaultValues: values,
+    createTypename: Type3.getTypename(Tag3.Tag),
+    createOptionIcon: "ph--plus--regular",
+    createOptionLabel: [
+      "add-tag.label",
+      {
+        ns: translationKey11
+      }
+    ],
+    createInitialValuePath: "label",
+    createFieldMap: createFieldMap2,
+    db,
+    onValuesChanged: handleChange,
+    onCreate: handleCreate
+  }, /* @__PURE__ */ React19.createElement(Form.Viewport, {
+    ...composableProps2(props),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React19.createElement(Form.Content, null, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), children)));
+});
+var createFieldMap2 = {
+  hue: ({ type, label, layout, getValue, onValueChange }) => {
+    const handleChange = useCallback16((nextHue) => onValueChange(type, nextHue), [
+      onValueChange,
+      type
+    ]);
+    const handleReset = useCallback16(() => onValueChange(type, void 0), [
+      onValueChange,
+      type
+    ]);
+    return /* @__PURE__ */ React19.createElement(React19.Fragment, null, layout !== "inline" && /* @__PURE__ */ React19.createElement(Form.Label, {
+      label
+    }), /* @__PURE__ */ React19.createElement(HuePicker3, {
+      value: getValue(),
+      onChange: handleChange,
+      onReset: handleReset
+    }));
+  }
+};
+var BaseSchema = Schema4.Struct({
+  tags: Schema4.Array(Ref5.Ref(Tag3.Tag)).pipe(Schema4.optional)
+});
+
+// src/components/Settings/Settings.tsx
+import React22 from "react";
+import { ScrollArea as ScrollArea2, toLocalizedString as toLocalizedString2, useTranslation as useTranslation11 } from "@dxos/react-ui";
+import { composable as composable3, composableProps as composableProps3, mx as mx4 } from "@dxos/ui-theme";
+import { translationKey as translationKey13 } from "#translations";
+
+// src/components/Settings/SettingsFieldSet.tsx
+import * as SchemaAST5 from "effect/SchemaAST";
+import * as String3 from "effect/String";
+import React21, { useCallback as useCallback17, useMemo as useMemo11 } from "react";
+import { getAnnotation as getAnnotation3 } from "@dxos/effect";
+import { Input as Input13, Select as Select2 } from "@dxos/react-ui";
+
+// src/components/Settings/SettingsItem.tsx
+import React20 from "react";
+import { Input as Input12, toLocalizedString, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
+import { translationKey as translationKey12 } from "#translations";
+var SETTINGS_PANEL_NAME = "Settings.Panel";
+var SETTINGS_ITEM_NAME = "Settings.Item";
+var SettingsPanel = ({ classNames, children }) => {
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: mx3("flex flex-col gap-3 p-trim-md border border-separator rounded-sm", classNames)
+  }, children);
+};
+SettingsPanel.displayName = SETTINGS_PANEL_NAME;
+var SettingsItem = ({ title, description = "", children }) => {
+  const { t } = useTranslation10(translationKey12);
+  return /* @__PURE__ */ React20.createElement(Input12.Root, null, /* @__PURE__ */ React20.createElement(SettingsPanel, {
+    classNames: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0"
+  }, /* @__PURE__ */ React20.createElement(Input12.Label, {
+    classNames: "pb-trim-md text-base-foreground text-lg md:col-span-2"
+  }, toLocalizedString(title, t)), /* @__PURE__ */ React20.createElement(Input12.DescriptionAndValidation, null, /* @__PURE__ */ React20.createElement(Input12.Description, {
+    classNames: "text-base text-description"
+  }, toLocalizedString(description, t))), /* @__PURE__ */ React20.createElement("div", {
+    className: "text-end py-1"
+  }, children)));
+};
+SettingsItem.displayName = SETTINGS_ITEM_NAME;
+
+// src/components/Settings/SettingsFieldSet.tsx
+var SettingsFieldSet = ({ schema, values, onValuesChanged, readonly, fieldMap, visible, sort, pathPrefix = "" }) => {
+  const properties = useMemo11(() => {
+    const props = getFormProperties(schema.ast);
+    if (!sort) {
+      return props;
+    }
+    const rank = (name) => {
+      const idx = sort.indexOf(name);
+      return idx === -1 ? Number.POSITIVE_INFINITY : idx;
+    };
+    return [
+      ...props
+    ].sort(({ name: a }, { name: b }) => rank(a.toString()) - rank(b.toString()));
+  }, [
+    schema,
+    sort
+  ]);
+  const handleChange = useCallback17((name, value3) => {
+    onValuesChanged?.({
+      ...values,
+      [name]: value3
+    });
+  }, [
+    values,
+    onValuesChanged
+  ]);
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, properties.map((property) => {
+    const name = property.name.toString();
+    const path = pathPrefix ? `${pathPrefix}.${name}` : name;
+    if (visible && !visible(path, values)) {
+      return null;
+    }
+    const entry = fieldMap?.[name];
+    return /* @__PURE__ */ React21.createElement(SettingsFieldItem, {
+      key: name,
+      path,
+      property,
+      value: values[name],
+      onChange: (value3) => handleChange(name, value3),
+      readonly,
+      customField: typeof entry === "function" ? entry : void 0,
+      nestedFieldMap: typeof entry === "object" ? entry : void 0,
+      visible,
+      sort
+    });
+  }));
+};
+SettingsFieldSet.displayName = "Settings.FieldSet";
+var SettingsFieldItem = ({ property, path, value: value3, onChange, readonly, customField, nestedFieldMap, visible, sort }) => {
+  const { type } = property;
+  const name = property.name.toString();
+  const title = getAnnotation3(SchemaAST5.TitleAnnotationId)(type) ?? String3.capitalize(name);
+  const description = getAnnotation3(SchemaAST5.DescriptionAnnotationId)(type);
+  if (customField) {
+    const CustomField = customField;
+    return /* @__PURE__ */ React21.createElement(SettingsItem, {
+      title,
+      description
+    }, /* @__PURE__ */ React21.createElement(CustomField, {
+      value: value3,
+      onChange,
+      readonly
+    }));
+  }
+  const fieldType = detectFieldType(type);
+  switch (fieldType) {
+    case "struct":
+      return /* @__PURE__ */ React21.createElement(SettingsFieldSet, {
+        schema: {
+          ast: type
+        },
+        values: value3 ?? {},
+        onValuesChanged: onChange,
+        readonly,
+        fieldMap: nestedFieldMap,
+        visible,
+        sort,
+        pathPrefix: path
+      });
+    case "boolean":
+      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React21.createElement(Input13.Switch, {
+        disabled: readonly,
+        checked: !!value3,
+        onCheckedChange: (checked) => onChange(!!checked)
+      }));
+    case "select": {
+      const options = getSelectOptionsFromAst(type) ?? [];
+      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React21.createElement(Select2.Root, {
+        disabled: readonly,
+        value: value3 == null ? "" : globalThis.String(value3),
+        onValueChange: (selected) => {
+          const matched = options.find((option) => globalThis.String(option.value) === selected);
+          onChange(matched?.value ?? selected);
+        }
+      }, /* @__PURE__ */ React21.createElement(Select2.TriggerButton, {
+        disabled: readonly
+      }), /* @__PURE__ */ React21.createElement(Select2.Portal, null, /* @__PURE__ */ React21.createElement(Select2.Content, null, /* @__PURE__ */ React21.createElement(Select2.Viewport, null, options.map((option) => /* @__PURE__ */ React21.createElement(Select2.Option, {
+        key: globalThis.String(option.value),
+        value: globalThis.String(option.value)
+      }, option.label ?? globalThis.String(option.value)))), /* @__PURE__ */ React21.createElement(Select2.Arrow, null)))));
+    }
+    case "string":
+      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React21.createElement(Input13.TextInput, {
+        disabled: readonly,
+        value: value3 ?? "",
+        onChange: (event) => onChange(event.target.value)
+      }));
+    case "number":
+      return /* @__PURE__ */ React21.createElement(SettingsItem, {
+        title,
+        description
+      }, /* @__PURE__ */ React21.createElement(Input13.TextInput, {
+        disabled: readonly,
+        type: "number",
+        value: value3 ?? "",
+        onChange: (event) => {
+          if (event.target.value === "") {
+            onChange(void 0);
+            return;
+          }
+          const parsed = Number(event.target.value);
+          onChange(Number.isNaN(parsed) ? void 0 : parsed);
+        }
+      }));
+    default:
+      return null;
+  }
+};
+
 // src/components/Settings/Settings.tsx
-import React18 from "react";
-import { Input as Input12, ScrollArea as ScrollArea2, toLocalizedString, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { composable as composable2, composableProps as composableProps2, mx as mx4 } from "@dxos/ui-theme";
 var SETTINGS_ROOT_NAME = "Settings.Root";
 var SETTINGS_VIEWPORT_NAME = "Settings.Viewport";
 var SETTINGS_SECTION_NAME = "Settings.Section";
-var SETTINGS_PANEL_NAME = "Settings.Panel";
-var SETTINGS_ITEM_NAME = "Settings.Item";
 var SettingsRoot = ({ children, classNames }) => {
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React22.createElement("div", {
     className: mx4("flex flex-col gap-2", classNames)
   }, children);
 };
 SettingsRoot.displayName = SETTINGS_ROOT_NAME;
-var SettingsViewport = composable2(({ children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React18.createElement(ScrollArea2.Root, {
-    ...composableProps2(props),
+var SettingsViewport = composable3(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React22.createElement(ScrollArea2.Root, {
+    ...composableProps3(props),
     orientation: "vertical",
     centered: true,
     thin: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React18.createElement(ScrollArea2.Viewport, {
+  }, /* @__PURE__ */ React22.createElement(ScrollArea2.Viewport, {
     classNames: "px-4 pointer-coarse:px-2"
-  }, /* @__PURE__ */ React18.createElement("div", {
-    role: "none",
+  }, /* @__PURE__ */ React22.createElement("div", {
     className: "dx-document flex flex-col gap-2 py-4"
   }, children)));
 });
 SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
 var SettingsSection = ({ title, description, children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("h2", {
+  const { t } = useTranslation11(translationKey13);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("h2", {
     className: "px-trim-md mt-trim-md text-xl"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
+  }, toLocalizedString2(title, t)), description && /* @__PURE__ */ React22.createElement("p", {
     className: "px-trim-md text-description"
-  }, toLocalizedString(description, t)), /* @__PURE__ */ React18.createElement("div", {
+  }, toLocalizedString2(description, t)), /* @__PURE__ */ React22.createElement("div", {
     className: "w-full pt-trim-md space-y-trim-md"
   }, children));
 };
 SettingsSection.displayName = SETTINGS_SECTION_NAME;
-var SettingsPanel = ({ classNames, children }) => {
-  return /* @__PURE__ */ React18.createElement("div", {
-    role: "none",
-    className: mx4("flex flex-col gap-3 p-trim-md border border-separator rounded-sm", classNames)
-  }, children);
-};
-SettingsPanel.displayName = SETTINGS_PANEL_NAME;
-var SettingsItem = ({ title, description = "", children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(Input12.Root, null, /* @__PURE__ */ React18.createElement(SettingsPanel, {
-    classNames: "grid grid-cols-1 md:grid-cols-[1fr_1fr] gap-x-trim-lg gap-y-0"
-  }, /* @__PURE__ */ React18.createElement(Input12.Label, {
-    classNames: "pb-trim-md text-base-surface-text text-lg md:col-span-2"
-  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement(Input12.DescriptionAndValidation, null, /* @__PURE__ */ React18.createElement(Input12.Description, {
-    classNames: "text-base text-description"
-  }, toLocalizedString(description, t))), /* @__PURE__ */ React18.createElement("div", {
-    role: "none",
-    className: "text-end py-1"
-  }, children)));
-};
-SettingsItem.displayName = SETTINGS_ITEM_NAME;
 var Settings = {
   Root: SettingsRoot,
   Viewport: SettingsViewport,
   Section: SettingsSection,
   Panel: SettingsPanel,
-  Item: SettingsItem
+  Item: SettingsItem,
+  FieldSet: SettingsFieldSet
+};
+
+// src/components/Settings/SettingsSelectField.tsx
+import React23 from "react";
+import { Select as Select3 } from "@dxos/react-ui";
+var createSelectField = ({ options, defaultLabel = "Default" }) => {
+  const normalized = options.map((option) => typeof option === "string" ? {
+    value: option,
+    label: option
+  } : option);
+  const hasDefault = defaultLabel !== null;
+  const sentinel = hasDefault ? `__default__${Math.random().toString(36).slice(2)}` : "";
+  return ({ value: value3, onChange, readonly }) => /* @__PURE__ */ React23.createElement(Select3.Root, {
+    disabled: readonly,
+    value: value3 ?? sentinel,
+    onValueChange: (next) => onChange(hasDefault && next === sentinel ? void 0 : next)
+  }, /* @__PURE__ */ React23.createElement(Select3.TriggerButton, {
+    disabled: readonly
+  }), /* @__PURE__ */ React23.createElement(Select3.Portal, null, /* @__PURE__ */ React23.createElement(Select3.Content, null, /* @__PURE__ */ React23.createElement(Select3.Viewport, null, hasDefault && /* @__PURE__ */ React23.createElement(Select3.Option, {
+    value: sentinel
+  }, defaultLabel), normalized.map((option) => /* @__PURE__ */ React23.createElement(Select3.Option, {
+    key: option.value,
+    value: option.value
+  }, option.label ?? option.value))), /* @__PURE__ */ React23.createElement(Select3.Arrow, null))));
 };
 
 // src/components/ViewEditor/ViewEditor.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
-import * as Array2 from "effect/Array";
+import * as Array4 from "effect/Array";
 import * as Match2 from "effect/Match";
-import * as Option4 from "effect/Option";
-import * as Schema3 from "effect/Schema";
-import React19, { forwardRef as forwardRef2, useCallback as useCallback15, useContext, useImperativeHandle, useMemo as useMemo8, useState as useState6 } from "react";
-import { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj3, Query, QueryAST, Ref as Ref3 } from "@dxos/echo";
-import { View } from "@dxos/echo";
+import * as Option6 from "effect/Option";
+import * as Schema5 from "effect/Schema";
+import React24, { forwardRef as forwardRef2, useCallback as useCallback18, useContext, useImperativeHandle, useMemo as useMemo12, useState as useState7 } from "react";
+import { Entity as Entity2, Feed, Filter as Filter2, Format as Format5, Obj as Obj6, Query, QueryAST, Ref as Ref6, View } from "@dxos/echo";
 import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
-import { invariant } from "@dxos/invariant";
+import { invariant as invariant3 } from "@dxos/invariant";
 import { useObject, useQuery as useQuery2 } from "@dxos/react-client/echo";
-import { IconButton as IconButton4, Input as Input13, Message, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { IconButton as IconButton4, Input as Input14, Message, useTranslation as useTranslation12 } from "@dxos/react-ui";
 import { QueryForm } from "@dxos/react-ui-components";
 import { List as List2 } from "@dxos/react-ui-list";
 import { ParentLabelAnnotation, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
-import { mx as mx5, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
+import { mx as mx5, osTranslations as osTranslations2 } from "@dxos/ui-theme";
+import { translationKey as translationKey14 } from "#translations";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
 var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode = "schema", registry, db, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
   const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation10(translationKey);
-  const projectionModel = useMemo8(() => {
+  const { t } = useTranslation12(translationKey14);
+  const projectionModel = useMemo12(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
     const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
     const model = new ProjectionModel({
@@ -2278,21 +2736,21 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     if (from._tag !== "scope") {
       return void 0;
     }
-    return Option4.fromNullable(from.scope.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.map(String), Option4.getOrUndefined);
+    return Option6.fromNullable(from.scope.feeds).pipe(Option6.flatMap((feeds2) => Array4.head(feeds2)), Option6.map(String), Option6.getOrUndefined);
   }), Match2.orElse(() => void 0));
   const feeds = useQuery2(db, Filter2.type(Feed.Feed));
-  const targetRef = useMemo8(() => {
+  const targetRef = useMemo12(() => {
     if (!queueTarget) {
       return void 0;
     }
     const feed = feeds.find((feed2) => Feed.getQueueDxn(feed2)?.toString() === queueTarget);
-    return feed ? Ref3.fromDXN(Entity2.getDXN(feed)) : void 0;
+    return feed ? Ref6.fromDXN(Entity2.getDXN(feed)) : void 0;
   }, [
     queueTarget,
     feeds
   ]);
-  const viewSchema = useMemo8(() => {
-    const base = Schema3.Struct({
+  const viewSchema = useMemo12(() => {
+    const base = Schema5.Struct({
       query: mode === "schema" ? Format5.URL.annotations({
         title: "Record type"
       }) : QueryAST.Query.annotations({
@@ -2300,19 +2758,19 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
       })
     });
     if (mode === "tag") {
-      return Schema3.Struct({
+      return Schema5.Struct({
         ...base.fields,
         // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
-        target: Ref3.Ref(Feed.Feed).pipe(Schema3.annotations({
+        target: Ref6.Ref(Feed.Feed).pipe(Schema5.annotations({
           title: "Target Feed"
-        }), ParentLabelAnnotation.set(true), Schema3.optional)
-      }).pipe(Schema3.mutable);
+        }), ParentLabelAnnotation.set(true), Schema5.optional)
+      }).pipe(Schema5.mutable);
     }
-    return base.pipe(Schema3.mutable);
+    return base.pipe(Schema5.mutable);
   }, [
     mode
   ]);
-  const viewValues = useMemo8(() => ({
+  const viewValues = useMemo12(() => ({
     query: mode === "schema" ? getTypenameFromQuery(view.query.ast) : view.query.ast,
     target: targetRef
   }), [
@@ -2320,7 +2778,7 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     view.query.ast,
     targetRef
   ]);
-  const fieldMap = useMemo8(() => mode === "tag" ? customFields({
+  const fieldMap = useMemo12(() => mode === "tag" ? customFields({
     types,
     tags
   }) : void 0, [
@@ -2328,54 +2786,45 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
     types,
     tags
   ]);
-  const handleUpdate = useCallback15((values) => {
+  const handleUpdate = useCallback18((values) => {
     const targetValue = values.target;
-    let queueDxn;
-    if (Ref3.isRef(targetValue)) {
-      const feedDxn = targetValue.dxn.toString();
-      const feed = feeds.find((feed2) => Obj3.getDXN(feed2).toString() === feedDxn);
+    let feedDXN;
+    if (Ref6.isRef(targetValue)) {
+      const targetDXN = targetValue.dxn.toString();
+      const feed = feeds.find((feed2) => Obj6.getDXN(feed2).toString() === targetDXN);
       if (feed) {
-        queueDxn = Feed.getQueueDxn(feed)?.toString();
+        feedDXN = Feed.getQueueDxn(feed)?.toString();
       }
     }
     const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : JSON.parse(JSON.stringify(values.query));
-    onQueryChanged?.(query, queueDxn);
+    onQueryChanged?.(query, feedDXN);
   }, [
     onQueryChanged,
     mode,
     feeds
   ]);
-  const handleDelete = useCallback15((fieldId) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 185,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const handleDelete = useCallback18((fieldId) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 126, S: void 0, A: ["!readonly", ""] });
     onDelete?.(fieldId);
   }, [
     onDelete,
     readonly
   ]);
-  return /* @__PURE__ */ React19.createElement("div", {
-    role: "none",
+  return /* @__PURE__ */ React24.createElement("div", {
     className: mx5(classNames)
-  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Message.Root, {
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React24.createElement(Message.Root, {
     valence: "info",
     classNames: "my-form-padding"
-  }, /* @__PURE__ */ React19.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
+  }, /* @__PURE__ */ React24.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React24.createElement(Form.Root, {
     schema: viewSchema,
     values: viewValues,
     fieldMap,
     db,
     onValuesChanged: handleUpdate
-  }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+  }, /* @__PURE__ */ React24.createElement(Form.FieldSet, null), /* @__PURE__ */ React24.createElement(FormFieldLabel, {
     label: t("fields.label"),
     asChild: true
-  }), /* @__PURE__ */ React19.createElement(FieldList, {
+  }), /* @__PURE__ */ React24.createElement(FieldList, {
     schema,
     view,
     registry,
@@ -2387,9 +2836,9 @@ var ViewEditor = /* @__PURE__ */ forwardRef2(({ classNames, schema, view, mode =
 var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDelete }) => {
   const atomRegistry = useContext(RegistryContext);
   const schemaReadonly = !isMutable(schema);
-  const { t } = useTranslation10(translationKey);
+  const { t } = useTranslation12(translationKey14);
   const [viewSnapshot] = useObject(view);
-  const projectionModel = useMemo8(() => {
+  const projectionModel = useMemo12(() => {
     const jsonSchema = schema instanceof EchoSchema ? schema.jsonSchema : toJsonSchema(schema);
     const change = createEchoChangeCallback(view, schema instanceof EchoSchema ? schema : void 0);
     const model = new ProjectionModel({
@@ -2404,38 +2853,22 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     schema,
     view
   ]);
-  const [expandedField, setExpandedField] = useState6();
-  const handleAdd = useCallback15(() => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 250,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const [expandedField, setExpandedField] = useState7();
+  const handleAdd = useCallback18(() => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 181, S: void 0, A: ["!readonly", ""] });
     const field = projectionModel.createFieldProjection();
     setExpandedField(field.id);
   }, [
     projectionModel,
     readonly
   ]);
-  const handleToggleField = useCallback15((field) => {
+  const handleToggleField = useCallback18((field) => {
     setExpandedField((prevExpandedFieldId) => prevExpandedFieldId === field.id ? void 0 : field.id);
   }, [
     readonly
   ]);
-  const handleDelete = useCallback15((fieldId) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 264,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const handleDelete = useCallback18((fieldId) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 194, S: void 0, A: ["!readonly", ""] });
     if (fieldId === expandedField) {
       setExpandedField(void 0);
     }
@@ -2445,36 +2878,28 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
     onDelete,
     readonly
   ]);
-  const handleMove = useCallback15((fromIndex, toIndex) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 276,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
-    Obj3.change(view, (obj) => {
+  const handleMove = useCallback18((fromIndex, toIndex) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 205, S: void 0, A: ["!readonly", ""] });
+    Obj6.update(view, (view2) => {
       const fields = [
-        ...obj.projection.fields
+        ...view2.projection.fields
       ];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      obj.projection.fields = fields;
+      view2.projection.fields = fields;
     });
   }, [
     view,
     readonly
   ]);
-  const handleClose = useCallback15(() => setExpandedField(void 0), []);
-  const handleHide = useCallback15((fieldId) => {
+  const handleClose = useCallback18(() => setExpandedField(void 0), []);
+  const handleHide = useCallback18((fieldId) => {
     setExpandedField(void 0);
     projectionModel.hideFieldProjection(fieldId);
   }, [
     projectionModel
   ]);
-  const handleShow = useCallback15((property) => {
+  const handleShow = useCallback18((property) => {
     setExpandedField(void 0);
     projectionModel.showFieldProjection(property);
   }, [
@@ -2483,46 +2908,45 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
   if (!viewSnapshot) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(List2.Root, {
+  return /* @__PURE__ */ React24.createElement(List2.Root, {
     items: viewSnapshot.projection.fields,
-    isItem: Schema3.is(View.FieldSchema),
+    isItem: Schema5.is(View.FieldSchema),
     getId: (field) => field.id,
     onMove: readonly ? void 0 : handleMove,
     readonly
-  }, ({ items: fields }) => /* @__PURE__ */ React19.createElement(React19.Fragment, null, showHeading && /* @__PURE__ */ React19.createElement("h3", {
+  }, ({ items: fields }) => /* @__PURE__ */ React24.createElement(React24.Fragment, null, showHeading && /* @__PURE__ */ React24.createElement("h3", {
     className: "text-sm"
-  }, t("field-path.label")), /* @__PURE__ */ React19.createElement("div", {
+  }, t("field-path.label")), /* @__PURE__ */ React24.createElement("div", {
     role: "list",
     className: "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]"
   }, fields?.map((field) => {
     const hidden = field.visible === false;
-    return /* @__PURE__ */ React19.createElement(List2.Item, {
+    return /* @__PURE__ */ React24.createElement(List2.Item, {
       key: field.id,
       item: field,
       classNames: "grid grid-cols-subgrid col-span-5",
       "aria-expanded": expandedField === field.id
-    }, /* @__PURE__ */ React19.createElement("div", {
-      role: "none",
-      className: mx5(subtleHover2, "grid grid-cols-subgrid col-span-5", "rounded-xs cursor-pointer min-h-10")
-    }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
+    }, /* @__PURE__ */ React24.createElement("div", {
+      className: "grid grid-cols-subgrid col-span-5 rounded-xs cursor-pointer min-h-10 dx-hover"
+    }, /* @__PURE__ */ React24.createElement(List2.ItemDragHandle, {
       disabled: readonly || schemaReadonly
-    }), /* @__PURE__ */ React19.createElement(List2.ItemTitle, {
+    }), /* @__PURE__ */ React24.createElement(List2.ItemTitle, {
       classNames: hidden && "text-subdued",
       onClick: () => handleToggleField(field)
-    }, field.path), /* @__PURE__ */ React19.createElement(List2.ItemIconButton, {
-      label: t(hidden ? "show field label" : "hide field label"),
+    }, field.path), /* @__PURE__ */ React24.createElement(List2.ItemIconButton, {
+      label: t(hidden ? "show-field.label" : "hide-field.label"),
       "data-testid": hidden ? "show-field-button" : "hide-field-button",
       icon: hidden ? "ph--eye-closed--regular" : "ph--eye--regular",
       autoHide: false,
       disabled: readonly || !hidden && projectionModel.getFields().length <= 1,
       onClick: () => hidden ? handleShow(field.path) : handleHide(field.id)
-    }), !readonly && /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(List2.ItemDeleteButton, {
+    }), !readonly && /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(List2.ItemDeleteButton, {
       label: t("delete-field.label"),
       autoHide: false,
       disabled: readonly || schemaReadonly || viewSnapshot.projection.fields.length <= 1,
       onClick: () => handleDelete(field.id),
       "data-testid": "field.delete"
-    }), /* @__PURE__ */ React19.createElement(List2.ItemIconButton, {
+    }), /* @__PURE__ */ React24.createElement(List2.ItemIconButton, {
       iconOnly: true,
       variant: "ghost",
       label: t("toggle-expand.label", {
@@ -2531,20 +2955,18 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
       icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
       onClick: () => handleToggleField(field),
       "data-testid": "field.toggle"
-    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
-      role: "none",
-      className: "col-span-5 mt-1 mb-1 border border-separator rounded-md"
-    }, /* @__PURE__ */ React19.createElement(FieldEditor, {
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React24.createElement("div", {
+      className: "col-span-full mt-1 mb-1 border border-separator rounded-md"
+    }, /* @__PURE__ */ React24.createElement(FieldEditor, {
       readonly: readonly || schemaReadonly,
       registry,
       projection: projectionModel,
       field,
       onSave: handleClose
     })));
-  })), !readonly && !expandedField && /* @__PURE__ */ React19.createElement("div", {
-    role: "none",
+  })), !readonly && !expandedField && /* @__PURE__ */ React24.createElement("div", {
     className: "my-form-padding"
-  }, /* @__PURE__ */ React19.createElement(IconButton4, {
+  }, /* @__PURE__ */ React24.createElement(IconButton4, {
     icon: "ph--plus--regular",
     label: t("add-property-button.label"),
     onClick: handleAdd,
@@ -2554,13 +2976,13 @@ var FieldList = ({ schema, view, registry, readonly, showHeading = false, onDele
 };
 var customFields = ({ types, tags }) => ({
   query: ({ type, readonly, label, getValue, onValueChange }) => {
-    const handleChange = useCallback15((query) => onValueChange(type, query.ast), [
+    const handleChange = useCallback18((query) => onValueChange(type, query.ast), [
       onValueChange
     ]);
-    return /* @__PURE__ */ React19.createElement(Input13.Root, null, /* @__PURE__ */ React19.createElement(FormFieldLabel, {
+    return /* @__PURE__ */ React24.createElement(Input14.Root, null, /* @__PURE__ */ React24.createElement(FormFieldLabel, {
       readonly,
       label
-    }), /* @__PURE__ */ React19.createElement(QueryForm, {
+    }), /* @__PURE__ */ React24.createElement(QueryForm, {
       initialQuery: getValue(),
       types,
       tags,
@@ -2579,7 +3001,9 @@ export {
   GeoPointField,
   MarkdownField,
   NumberField,
+  ObjectForm,
   ObjectPicker,
+  ObjectProperties,
   RefField,
   SelectField,
   SelectOptionField,
@@ -2589,15 +3013,18 @@ export {
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
+  createSelectField,
+  detectFieldType,
   formatForDisplay,
   formatForEditing,
   getDefaultValue,
   getFormProperties,
   getRefProps,
+  getSelectOptionsFromAst,
+  omitHiddenFormFields,
   omitId,
   parseValue,
   pathNotUniqueError,
-  translations,
   useFormContext,
   useFormFieldState,
   useFormHandler,