@dxos/react-ui-form 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/dist/lib/browser/index.mjs

@@ -1,100 +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)",
-        // TODO(burdon): Standardize field/property.
-        "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": "Add field",
-        "delete field": "Delete field",
-        "field limit reached": "Maximum number of fields reached",
-        "boolean input true value": "Yes",
-        "boolean input false value": "No",
-        "show field label": "Show field",
-        "hide field label": "Hide field",
-        "delete field label": "Delete field",
-        "ref field combobox input placeholder": "Search\u2026",
-        "ref field placeholder_one": "Select\u2026",
-        "ref field placeholder_other": "Select items\u2026",
-        "example placeholder": "Example",
-        "latitude placeholder": "Latitude (e.g., 40.7128)",
-        "longitude placeholder": "Longitude (e.g., -74.0060)",
-        "cancel button label": "Cancel",
-        "save button label": "Save",
-        // FormatEnum
-        "format boolean": "Boolean",
-        "format currency": "Currency",
-        "format date": "Date",
-        "format date-time": "DateTime",
-        "format did": "DID",
-        "format duration": "Duration",
-        "format dxn": "DXN",
-        "format email": "Email",
-        "format formula": "Formula",
-        "format hostname": "Hostname",
-        "format integer": "Integer",
-        "format json": "JSON",
-        "format lnglat": "Geopoint",
-        "format markdown": "Markdown",
-        "format percent": "Percent",
-        "format ref": "Reference",
-        "format regex": "RegExp",
-        "format string": "String",
-        "format single-select": "Select",
-        "format multi-select": "Multi-select",
-        "format text": "Long text",
-        "format time": "Time",
-        "format timestamp": "Timestamp",
-        "format user": "User",
-        "format number": "Number",
-        "format uri": "URI",
-        "format url": "URL",
-        "format uuid": "UUID",
-        // GeoPointField.
-        "latitude label": "Latitude",
-        "longitude label": "Longitude",
-        // SelectOptionsField.
-        "select option label": "Label",
-        "select option label placeholder": "Option label",
-        "select option color": "Color",
-        "select option delete": "Delete",
-        "select option add": "Add option",
-        // System schema message.
-        "system schema title": "System type",
-        "system schema description": "System type: cannot add or remove fields."
-      }
-    }
-  }
-];
-
 // src/components/FieldEditor/FieldEditor.tsx
-import React17, { useCallback as useCallback14, useEffect as useEffect7, useMemo as useMemo7, useState as useState5 } from "react";
+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";
-
-// src/util/echo.ts
-import { Obj } from "@dxos/echo";
-import { setValue as setValuePlain, splitJsonPath } from "@dxos/effect";
-var setValueEchoAware = (obj, path, value3) => {
-  if (Obj.isObject(obj)) {
-    Obj.change(obj, (mutableObj) => {
-      Obj.setValue(mutableObj, splitJsonPath(path), value3);
-    });
-    return obj;
-  }
-  return setValuePlain(obj, path, value3);
-};
+import { translationKey as translationKey9 } from "#translations";
 
 // src/util/field.ts
 import { Format, GeoLocation, TypeEnum } from "@dxos/echo/internal";
@@ -217,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";
@@ -365,48 +316,57 @@ var getFormProperties = (ast) => {
 
 // src/util/refs.ts
 import { Ref } from "@dxos/echo";
-import { getArrayElementType, isArrayType } from "@dxos/effect";
+import { ReferenceAnnotationId } from "@dxos/echo/internal";
+import { findAnnotation, getArrayElementType, isArrayType } from "@dxos/effect";
 var getRefProps = (ast) => {
   if (isArrayType(ast)) {
     const elementType = getArrayElementType(ast);
     if (elementType) {
       if (Ref.isRefType(elementType)) {
+        const typename = findAnnotation(elementType, ReferenceAnnotationId)?.typename;
         return {
           ast: elementType,
-          isArray: true
+          isArray: true,
+          typename
         };
       }
     }
   }
   if (Ref.isRefType(ast)) {
+    const typename = findAnnotation(ast, ReferenceAnnotationId)?.typename;
     return {
       ast,
-      isArray: false
+      isArray: false,
+      typename
     };
   }
   return void 0;
 };
 
 // src/components/Form/fields/ArrayField.tsx
-import * as Option3 from "effect/Option";
-import * as SchemaAST2 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 React4, { useEffect as useEffect3, useMemo as useMemo4, useRef } from "react";
+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, useTranslation as useTranslation2 } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/ui-theme";
+import { IconButton, ScrollArea, useMergeRefs, useTranslation as useTranslation2 } from "@dxos/react-ui";
+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";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Obj as Obj2 } from "@dxos/echo";
-import { createJsonPath, fromEffectValidationPath, getValue as getValue$, setValue as setValue$ } from "@dxos/effect";
+import { createJsonPath, fromEffectValidationPath, getValue as getValue$ } from "@dxos/effect";
 import { log } from "@dxos/log";
 import { useDefaultValue } from "@dxos/react-ui";
 import { validateSchema } from "@dxos/schema";
@@ -421,11 +381,13 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     prop: valuesProp,
     defaultProp: defaultValues,
     onChange: () => {
-      setValues(valuesProp ?? defaultValues);
-      setChanged({});
-      setTouched({});
-      setErrors({});
-      setSaving(false);
+      if (valuesProp !== void 0) {
+        setValues(valuesProp ?? defaultValues);
+        setChanged({});
+        setTouched({});
+        setErrors({});
+        setSaving(false);
+      }
     }
   });
   const values = values$;
@@ -437,12 +399,7 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("validate", {
       values: values2,
       errors: errors2
-    }, {
-      F: __dxlog_file,
-      L: 160,
-      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) ?? [];
@@ -530,48 +487,39 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     log("onValueChange", {
       path,
       value: value3
-    }, {
-      F: __dxlog_file,
-      L: 259,
-      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;
     try {
       if (type._tag === "NumberKeyword") {
         parsedValue = parseFloat(value3) || 0;
       }
     } catch (err) {
-      log.catch(err, void 0, {
-        F: __dxlog_file,
-        L: 268,
-        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 = Obj2.isObject(values) ? (setValueEchoAware(values, jsonPath, parsedValue), values) : {
-      ...setValue$(values, jsonPath, parsedValue)
-    };
-    setValues(newValues);
+    const newValues = mergeAtPath(values, pathArray, parsedValue);
     const newChanged = {
       [jsonPath]: true
     };
-    setChanged({
-      ...changed,
+    setChanged((prev) => ({
+      ...prev,
       ...newChanged
-    });
+    }));
     const isValid2 = validate(newValues);
     onValuesChanged?.(newValues, {
       isValid: isValid2,
       changed: newChanged
     });
+    if (valuesProp === void 0) {
+      setValues(newValues);
+    }
   }, [
     values,
-    changed,
     validate,
-    onValuesChanged
+    onValuesChanged,
+    valuesProp
   ]);
   const onBlur = useCallback(async (path) => {
     const jsonPath = createJsonPath(path);
@@ -628,6 +576,24 @@ var useFormHandler = ({ schema, autoSave, values: valuesProp, defaultValues: def
     onCancel
   ]);
 };
+var mergeAtPath = (obj, path, value3) => {
+  if (path.length === 0) {
+    return value3;
+  }
+  const [head2, ...rest] = path;
+  const child = rest.length === 0 ? value3 : mergeAtPath(obj?.[head2], rest, value3);
+  if (Array.isArray(obj)) {
+    const copy = [
+      ...obj
+    ];
+    copy[head2] = child;
+    return copy;
+  }
+  return {
+    ...obj,
+    [head2]: child
+  };
+};
 var flatMap = (errors) => {
   return errors.reduce((result, { path, message }) => {
     const jsonPath = fromEffectValidationPath(path);
@@ -639,9 +605,9 @@ var flatMap = (errors) => {
 };
 
 // src/hooks/useKeyHandler.tsx
-import { useCallback as useCallback2, useEffect as useEffect2 } from "react";
+import { useCallback as useCallback2, useLayoutEffect } from "react";
 import { addEventListener } from "@dxos/async";
-var useKeyHandler = (formElement, form) => {
+var useKeyHandler = (elRef, form) => {
   const handleKeyDown = useCallback2((event) => {
     switch (event.key) {
       case "Enter": {
@@ -657,13 +623,14 @@ var useKeyHandler = (formElement, form) => {
     form.onSave,
     form.autoSave
   ]);
-  useEffect2(() => {
-    if (!formElement) {
+  useLayoutEffect(() => {
+    const el = elRef.current;
+    if (!el) {
       return;
     }
-    return addEventListener(formElement, "keydown", handleKeyDown);
+    return addEventListener(el, "keydown", handleKeyDown);
   }, [
-    formElement,
+    elRef,
     handleKeyDown
   ]);
 };
@@ -671,17 +638,22 @@ var useKeyHandler = (formElement, form) => {
 // src/components/Form/FormFieldComponent.tsx
 import React, { Component } from "react";
 import { Icon, Input, Tooltip } from "@dxos/react-ui";
-import { errorText } from "@dxos/ui-theme";
+import { inputTextLabel } from "@dxos/ui-theme";
 var FormFieldLabel = ({ label, error, readonly, asChild }) => {
   const Label = readonly || asChild ? "span" : Input.Label;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Label, null, label), error && /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "flex items-center justify-between"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    className: inputTextLabel
+  }, label), error && /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
     asChild: true,
     content: error,
     side: "bottom"
   }, /* @__PURE__ */ React.createElement(Icon, {
     icon: "ph--warning--regular",
     size: 4,
-    classNames: errorText
+    classNames: "text-error-text"
   })));
 };
 FormFieldLabel.displayName = "Form.FieldLabel";
@@ -723,9 +695,9 @@ var FormFieldErrorBoundary = class extends Component {
   render() {
     if (this.state.error) {
       return /* @__PURE__ */ React.createElement("div", {
-        className: "flex gap-2 border border-roseFill font-mono text-sm"
+        className: "flex gap-2 border border-rose-fill font-mono text-sm"
       }, /* @__PURE__ */ React.createElement("span", {
-        className: "bg-roseFill text-surfaceText pli-1 font-thin"
+        className: "bg-rose-fill text-surface-text px-1 font-thin"
       }, "ERROR"), String(this.props.path?.join(".")));
     }
     return this.props.children;
@@ -738,20 +710,19 @@ var FormFieldErrorBoundary = class extends Component {
 };
 
 // src/components/Form/FormFieldSet.tsx
-import React3, { forwardRef, useMemo as useMemo3 } from "react";
-import { mx } from "@dxos/ui-theme";
-import { isTruthy } from "@dxos/util";
+import React3, { useMemo as useMemo3 } from "react";
 
 // src/components/Form/FormField.tsx
 import * as Match from "effect/Match";
 import * as Option2 from "effect/Option";
 import * as Schema from "effect/Schema";
-import * as SchemaAST from "effect/SchemaAST";
+import * as 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,
@@ -763,23 +734,25 @@ var FormField = (props) => {
     readonly,
     layout,
     // RefFieldProps
+    createTypename,
     createOptionLabel,
     createOptionIcon,
     createInitialValuePath,
+    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
   ]);
-  const placeholder = useMemo2(() => examples?.length ? `${t("example placeholder")}: ${examples[0]}` : description ?? label, [
+  const placeholder = useMemo2(() => examples?.length ? `${t("example.placeholder")}: ${examples[0]}` : description ?? label, [
     examples,
     description,
     label
@@ -792,6 +765,7 @@ var FormField = (props) => {
     label,
     placeholder,
     layout,
+    db,
     ...fieldState
   };
   const jsonPath = createJsonPath2(path ?? []);
@@ -818,33 +792,41 @@ 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);
+    const selectOptions = fieldProjection?.props.options;
     return /* @__PURE__ */ React2.createElement(SelectField, {
       ...fieldProps,
-      options: options.map((option) => ({
-        value: option,
-        label: option.toString()
-      }))
+      options: options.map((option) => {
+        const selectOption = selectOptions?.find((so) => so.id === globalThis.String(option));
+        return {
+          value: option,
+          label: selectOption?.title ?? option.toString()
+        };
+      })
     });
   }
   const refProps = getRefProps(type);
   if (refProps) {
+    const isCreateTarget = !createTypename || refProps.typename === createTypename;
     return /* @__PURE__ */ React2.createElement(RefField, {
       ...fieldProps,
       ...refProps,
-      createOptionLabel,
-      createOptionIcon,
-      createInitialValuePath,
+      createOptionLabel: isCreateTarget ? createOptionLabel : void 0,
+      createOptionIcon: isCreateTarget ? createOptionIcon : void 0,
+      createInitialValuePath: isCreateTarget ? createInitialValuePath : 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, {
@@ -860,8 +842,8 @@ var FormField = (props) => {
         createOptionIcon,
         createInitialValuePath,
         db,
-        schemaHook,
-        getOptions: getRefOptions,
+        useSchema: schemaHook,
+        getOptions,
         onCreate
       });
     }
@@ -885,8 +867,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));
@@ -894,47 +876,19 @@ var getOptions = (ast) => {
 
 // src/components/Form/FormFieldSet.tsx
 var FORM_FIELDSET_NAME = "Form.FieldSet";
-var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, readonly, path, exclude, sort, projection, layout, ...props }, forwardRef4) => {
+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 props2 = getFormProperties(schema.ast);
-    if (projection) {
-      const fieldProjections = projection.getFieldProjections();
-      const hiddenProperties = new Set(projection.getHiddenProperties());
-      const visibleProps = props2.filter((prop) => !hiddenProperties.has(prop.name.toString()));
-      const orderedProps = [];
-      for (const fieldProjection of fieldProjections) {
-        const fieldPath = String(fieldProjection.field.path);
-        const prop = visibleProps.find((p) => p.name === fieldPath);
-        if (prop) {
-          orderedProps.push(prop);
-        }
-      }
-      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;
-    }
-    const filtered = exclude ? exclude(props2) : props2;
-    return sort ? filtered.sort(({ name: a }, { name: b }) => sort.indexOf(a.toString()) - sort.indexOf(b.toString())) : filtered;
-  }, [
+  const properties = useFormFieldSetProperties({
     schema,
     values,
     exclude,
     sort,
-    projection?.fields
-  ]);
+    projection
+  });
   if ((readonly || layout === "static") && values == null) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement("div", {
-    role: "form",
-    className: mx("is-full", layout === "inline" && "flex flex-col gap-2", classNames),
-    ref: forwardRef4
-  }, layout !== "inline" && label && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, layout !== "inline" && label && /* @__PURE__ */ React3.createElement(FormFieldLabel, {
     label,
     asChild: true
   }), properties.map((property) => {
@@ -957,24 +911,72 @@ var FormFieldSet = /* @__PURE__ */ forwardRef(({ classNames, label, schema, read
       projection,
       ...props
     }));
-  }).filter(isTruthy));
-});
+  }));
+};
 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 jsonPath = createJsonPath3(path);
-  const { form: { values } } = useFormContext(componentName);
+var useFormValues = (componentName, path, defaultValue) => {
+  const stablePath = useMemo4(() => path ?? [], [
+    path ? path.join(".") : void 0
+  ]);
+  const jsonPath = createJsonPath3(stablePath);
+  const { form: { values, onValueChange } } = useFormContext(componentName);
   const value3 = getValue$2(values, jsonPath);
-  useEffect3(() => {
-    if (!value3 && defaultValue) {
-      setValueEchoAware(values, jsonPath, defaultValue());
+  const lastAppliedPathRef = useRef(null);
+  useEffect2(() => {
+    if (value3 == null && defaultValue && lastAppliedPathRef.current !== jsonPath) {
+      lastAppliedPathRef.current = jsonPath;
+      onValueChange(stablePath, SchemaAST3.stringKeyword, defaultValue());
     }
   }, [
     value3,
-    defaultValue
+    defaultValue,
+    onValueChange,
+    stablePath,
+    jsonPath
   ]);
   return value3;
 };
@@ -1011,49 +1013,60 @@ var FormRoot = ({ children, schema, values, onSave, onCancel, ...props }) => {
 };
 FormRoot.displayName = "Form.Root";
 var FORM_VIEWPORT_NAME = "Form.Viewport";
-var FormViewport = ({ children }) => {
+var FormViewport = composable(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React4.createElement(ScrollArea.Root, {
-    orientation: "vertical"
+    ...composableProps(props),
+    orientation: "vertical",
+    centered: true,
+    padding: true,
+    thin: true,
+    ref: forwardedRef
   }, /* @__PURE__ */ React4.createElement(ScrollArea.Viewport, null, children));
-};
+});
 FormViewport.displayName = FORM_VIEWPORT_NAME;
 var FORM_CONTENT_NAME = "Form.Content";
-var FormContent = ({ classNames, children }) => {
+var FormContent = composable(({ children, ...props }, forwardedRef) => {
   const { form, testId } = useFormContext(FORM_CONTENT_NAME);
-  const ref = useRef(null);
-  useKeyHandler(ref.current, form);
+  const localRef = useRef(null);
+  const mergedRef = useMergeRefs([
+    forwardedRef,
+    localRef
+  ]);
+  useKeyHandler(localRef, form);
   return /* @__PURE__ */ React4.createElement("div", {
-    ref,
-    role: "form",
-    className: mx2("flex flex-col is-full pli-cardSpacingInline density-fine", classNames),
-    "data-testid": testId
+    ...composableProps(props, {
+      role: "form",
+      classNames: mx(withColumn.center(), "flex flex-col w-full pb-form-gap")
+    }),
+    "data-testid": testId,
+    ref: mergedRef
   }, children);
-};
+});
 FormContent.displayName = FORM_CONTENT_NAME;
 var FORM_FIELDSET_NAME2 = "Form.FieldSet";
-var FormFieldSet2 = ({ classNames }) => {
-  const { form, ...props } = useFormContext(FORM_FIELDSET_NAME2);
+var FormFieldSet2 = (props) => {
+  const { form, ...contextProps } = useFormContext(FORM_FIELDSET_NAME2);
   return /* @__PURE__ */ React4.createElement(FormFieldSet, {
-    classNames,
     schema: form.schema,
+    ...contextProps,
     ...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: mx2("grid grid-flow-col auto-cols-fr gap-2 pbs-cardSpacingBlock", 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,
-    label: t("cancel button label"),
+    label: t("cancel-button.label"),
     onClick: onCancel,
     "data-testid": "cancel-button"
   }), onSave && /* @__PURE__ */ React4.createElement(IconButton, {
@@ -1062,29 +1075,43 @@ var FormActions = ({ classNames }) => {
     disabled: !canSave,
     icon: "ph--check--regular",
     iconEnd: true,
-    label: t("save button label"),
+    label: t("save-button.label"),
     onClick: onSave,
     "data-testid": "save-button"
   }));
 };
 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: mx2("flex is-full pbs-cardSpacingBlock", classNames)
+    className: mx("flex w-full pt-form-padding", classNames)
   }, /* @__PURE__ */ React4.createElement(IconButton, {
-    classNames: "is-full",
+    classNames: "w-full",
     type: "submit",
     variant: "primary",
     disabled: disabled ?? !canSave,
     icon: icon ?? "ph--check--regular",
-    label: label ?? t("save button label"),
+    label: label ?? t("save-button.label"),
     onClick: onSave,
     "data-testid": "save-button"
   }));
@@ -1094,26 +1121,27 @@ var Form = {
   Root: FormRoot,
   Viewport: FormViewport,
   Content: FormContent,
+  Section: FormSection,
   FieldSet: FormFieldSet2,
+  Label: FormFieldLabel,
   Actions: FormActions,
-  Submit: FormSubmit,
-  Label: FormFieldLabel
+  Submit: FormSubmit
 };
 
 // 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, SchemaAST2.isTypeLiteral);
+    const typeLiteral = baseNode ? getDiscriminatedType2(baseNode, {}) : findNode2(typeNode, SchemaAST4.isTypeLiteral);
     if (!typeLiteral) {
       return {};
     }
     return Object.fromEntries(getFormProperties(typeLiteral).map((prop) => {
-      const defaultValue = SchemaAST2.getDefaultAnnotation(prop.type).pipe((annotation) => Option3.getOrUndefined(annotation));
+      const defaultValue = SchemaAST4.getDefaultAnnotation(prop.type).pipe((annotation) => Option4.getOrUndefined(annotation));
       return [
         prop.name,
         defaultValue
@@ -1148,12 +1176,12 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
     asChild: true
   }), /* @__PURE__ */ React5.createElement("div", {
     role: "none",
-    className: "flex flex-col gap-2"
+    className: "flex flex-col gap-form-gap"
   }, values?.map((_, index) => {
     return /* @__PURE__ */ React5.createElement("div", {
       role: "none",
       key: index,
-      className: "grid grid-cols-[1fr_min-content] gap-2 last:mb-3"
+      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,
@@ -1166,21 +1194,21 @@ var ArrayField = ({ type, path, label, readonly, layout, fieldProps: inputProps,
       ...props
     }), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement("div", {
       role: "none",
-      className: "flex flex-col bs-full justify-end"
+      className: "flex flex-col h-full justify-end"
     }, /* @__PURE__ */ React5.createElement("div", {
       role: "none",
-      className: "flex items-center bs-[var(--line-height)]"
+      className: "flex items-center h-[2rem]"
     }, /* @__PURE__ */ React5.createElement(IconButton2, {
       icon: "ph--x--regular",
       iconOnly: true,
-      label: t("button remove"),
+      label: t("remove.button"),
       onClick: () => handleDelete(index),
       classNames: "self-center"
     }))));
   })), !readonly && layout !== "static" && /* @__PURE__ */ React5.createElement(IconButton2, {
-    classNames: "flex is-full _mlb-cardSpacingBlock",
+    classNames: "flex w-full",
     icon: "ph--plus--regular",
-    label: t("add field"),
+    label: t("add-item.button"),
     onClick: handleAdd
   }));
 };
@@ -1228,12 +1256,13 @@ var BooleanField = ({ type, readonly, onValueChange, ...props }) => {
 };
 
 // src/components/Form/fields/GeoPointField.tsx
-import React7, { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo5, useState as useState2 } from "react";
+import React7, { useCallback as useCallback5, useEffect as useEffect3, useMemo as useMemo5, useState as useState2 } from "react";
 import { GeoLocation as GeoLocation3 } from "@dxos/echo/internal";
 import { Input as Input3, useTranslation as useTranslation4 } from "@dxos/react-ui";
 import { safeParseFloat } from "@dxos/util";
+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,
@@ -1246,7 +1275,7 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
   ]);
   const [longitudeText, setLongitudeText] = useState2(value3.longitude?.toString());
   const [latitudeText, setLatitudeText] = useState2(value3.latitude?.toString());
-  useEffect4(() => {
+  useEffect3(() => {
     const location = GeoLocation3.fromGeoPoint(geoPoint);
     setLongitudeText(location.longitude?.toString());
     setLatitudeText(location.latitude?.toString());
@@ -1288,24 +1317,24 @@ var GeoPointField = ({ type, label, readonly, layout, getStatus, getValue, onVal
     asChild: true
   }), layout === "static" ? /* @__PURE__ */ React7.createElement(LatLng, value3) : /* @__PURE__ */ React7.createElement("div", {
     role: "none",
-    className: "grid grid-cols-2 gap-2"
-  }, /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("latitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+    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",
     step: "0.00001",
     min: "-90",
     max: "90",
     disabled: !!readonly,
-    placeholder: t("latitude placeholder"),
+    placeholder: t("latitude.placeholder"),
     value: latitudeText ?? "",
     onChange: handleChange("latitude", setLatitudeText),
     onBlur
-  }))), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("longitude label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
+  }))), /* @__PURE__ */ React7.createElement("div", null, /* @__PURE__ */ React7.createElement(Input3.Root, null, layout !== "inline" && /* @__PURE__ */ React7.createElement(Input3.Label, null, t("longitude.label")), /* @__PURE__ */ React7.createElement(Input3.TextInput, {
     type: "number",
     step: "0.00001",
     min: "-180",
     max: "180",
     disabled: !!readonly,
-    placeholder: t("longitude placeholder"),
+    placeholder: t("longitude.placeholder"),
     value: longitudeText ?? "",
     onChange: handleChange("longitude", setLongitudeText),
     onBlur
@@ -1315,7 +1344,7 @@ var LatLng = ({ latitude = 0, longitude = 0 }) => {
   const latHem = latitude >= 0 ? "N" : "S";
   const lngHem = longitude >= 0 ? "E" : "W";
   return /* @__PURE__ */ React7.createElement("span", {
-    className: "inline-flex items-center gap-1"
+    className: "inline-flex items-center gap-form-gap"
   }, /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(latitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
     className: "text-subdued"
   }, "\xB0", latHem)), /* @__PURE__ */ React7.createElement("span", null, /* @__PURE__ */ React7.createElement("span", null, Math.abs(longitude).toFixed(5)), /* @__PURE__ */ React7.createElement("span", {
@@ -1324,56 +1353,141 @@ var LatLng = ({ latitude = 0, longitude = 0 }) => {
 };
 
 // src/components/Form/fields/MarkdownField.tsx
-import React8, { useCallback as useCallback6, useEffect as useEffect5, useRef as useRef2 } from "react";
-import { Input as Input4 } from "@dxos/react-ui";
-var MarkdownField = ({ type, readonly, label, placeholder, layout, getStatus, getValue, onValueChange, onBlur }) => {
+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`;
-    }
-  }, []);
-  useEffect5(() => {
-    adjustHeight();
-  }, [
-    adjustHeight
-  ]);
-  useEffect5(() => {
-    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-bs-auto max-bs-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
@@ -1399,47 +1513,33 @@ var NumberField = ({ type, readonly, placeholder, onValueChange, onBlur, ...prop
 };
 
 // src/components/Form/fields/RefField.tsx
+import React11, { useCallback as useCallback9, useMemo as useMemo7, useState as useState4 } from "react";
 import "@dxos/lit-ui/dx-tag-picker.pcss";
-import React11, { useCallback as useCallback9, useMemo as useMemo6 } from "react";
-import { Entity, Filter, Ref as Ref2, Type } from "@dxos/echo";
-import { ReferenceAnnotationId } from "@dxos/echo/internal";
-import { useQuery, useSchema as useSchema$ } from "@dxos/echo-react";
-import { findAnnotation } from "@dxos/effect";
+import { 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 { descriptionText, mx as mx3 } from "@dxos/ui-theme";
+import { Button as Button2, Icon as Icon3, Input as Input6, useTranslation as useTranslation7 } from "@dxos/react-ui";
+import { ParentLabelAnnotationId } from "@dxos/schema";
+import { translationKey as translationKey7 } from "#translations";
 
 // src/components/ObjectPicker/ObjectPicker.tsx
-import React10, { forwardRef as forwardRef2, useCallback as useCallback8, useState as useState3 } from "react";
-import { Popover, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { Combobox, useSearchListInput, useSearchListResults } from "@dxos/react-ui-searchlist";
-var CreateItem = ({ createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
-  const { t } = useTranslation5(translationKey);
-  const { query } = useSearchListInput();
-  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
-    value: "__create__",
-    label: t(createOptionLabel[0], {
-      ns: createOptionLabel[1].ns,
-      text: query
-    }),
-    icon: createOptionIcon,
-    classNames: "flex items-center gap-2",
-    closeOnSelect: false,
-    onSelect: () => {
-      onCreateItemSelect(query);
-    }
-  });
-};
-var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, createSchema, createOptionLabel, createOptionIcon, createInitialValuePath, onSelect, onCreate, ...props }, ref) => {
-  const { t } = useTranslation5(translationKey);
+import React10, { forwardRef, useCallback as useCallback8, useState as useState3 } from "react";
+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("");
   }, [
@@ -1461,22 +1561,31 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, c
   }, [
     createSchema
   ]);
+  if (showForm && createSchema) {
+    return /* @__PURE__ */ React10.createElement(Combobox.Content, {
+      ...props,
+      onKeyDownCapture: handleKeyDown,
+      ref: forwardedRef
+    }, /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
+      testId: "create-referenced-object-form",
+      schema: createSchema,
+      defaultValues: createInitialValuePath ? {
+        [createInitialValuePath]: formInitialValue
+      } : {},
+      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,
-    ref,
-    onSearch: handleSearch,
-    onKeyDownCapture: handleKeyDown
-  }, showForm && createSchema ? /* @__PURE__ */ React10.createElement(Popover.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Root, {
-    testId: "create-referenced-object-form",
-    schema: createSchema,
-    values: createInitialValuePath ? {
-      [createInitialValuePath]: formInitialValue
-    } : {},
-    onSave: handleFormSave,
-    onCancel: handleFormCancel
-  }, /* @__PURE__ */ React10.createElement(Form.Viewport, null, /* @__PURE__ */ React10.createElement(Form.Content, null, /* @__PURE__ */ React10.createElement(Form.FieldSet, null), /* @__PURE__ */ React10.createElement(Form.Actions, null))))) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Combobox.Input, {
-    placeholder: t("ref field combobox input placeholder"),
-    autoFocus: true
+    onKeyDownCapture: handleKeyDown,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React10.createElement(Combobox.Input, {
+    placeholder: t("ref-field-combobox-input.placeholder"),
+    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,
@@ -1484,16 +1593,34 @@ var ObjectPickerContent = /* @__PURE__ */ forwardRef2(({ options, selectedIds, c
     checked: selectedIds?.includes(option.id),
     onSelect: () => onSelect(option.id),
     classNames: "flex items-center gap-2"
-  })), createOptionLabel && createOptionIcon && createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
+  })), createSchema && onCreate && /* @__PURE__ */ React10.createElement(CreateItem, {
+    query,
     createOptionLabel,
-    createOptionIcon,
-    onCreateItemSelect: (query) => {
-      setFormInitialValue(query);
+    createOptionIcon: createOptionIcon ?? "ph--plus--regular",
+    onCreateItemSelect: (currentQuery) => {
+      setFormInitialValue(currentQuery);
       setShowForm(true);
     }
-  }))), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
+  })), /* @__PURE__ */ React10.createElement(Combobox.Arrow, null));
 });
-ObjectPickerContent.displayName = "ObjectPickerContent";
+var CreateItem = ({ query, createOptionLabel, createOptionIcon, onCreateItemSelect }) => {
+  const { t } = useTranslation6(translationKey6);
+  const label = createOptionLabel ? t(createOptionLabel[0], {
+    ns: createOptionLabel[1].ns,
+    text: query
+  }) : t("create-option.label");
+  return /* @__PURE__ */ React10.createElement(Combobox.Item, {
+    value: "__create__",
+    label,
+    icon: createOptionIcon,
+    classNames: "flex items-center gap-2",
+    closeOnSelect: false,
+    onSelect: () => {
+      onCreateItemSelect(query);
+    }
+  });
+};
+ObjectPickerContent.displayName = "ObjectPicker.Content";
 var ObjectPicker = {
   Root: Combobox.Root,
   Portal: Combobox.Portal,
@@ -1506,34 +1633,43 @@ var ObjectPicker = {
 var isRefSnapshot = (val) => {
   return typeof val === "object" && typeof val?.["/"] === "string";
 };
-var defaultGetOptions = (results) => results.map((result) => {
+var defaultGetOptions = (results, { parentLabel } = {}) => results.map((result) => {
   const id = Entity.getDXN(result).toString();
-  const label = Entity.getLabel(result);
+  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(Type.Obj) ? 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, 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 ? findAnnotation(type, ReferenceAnnotationId)?.typename : void 0, [
+  const typename = useMemo7(() => type ? findAnnotation2(type, ReferenceAnnotationId2)?.typename : void 0, [
     type
   ]);
   const results = useResults(db, typename);
-  const options = useMemo6(() => getOptions2(results), [
+  const options = useMemo7(() => {
+    const parentLabel = type ? findAnnotation2(type, ParentLabelAnnotationId) === true : false;
+    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;
         }
@@ -1545,29 +1681,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) {
@@ -1589,40 +1733,48 @@ var RefField = (props) => {
     readonly,
     label
   }), /* @__PURE__ */ React11.createElement("div", null, readonly ? !item ? /* @__PURE__ */ React11.createElement("p", {
-    className: mx3(descriptionText, "mbe-2")
-  }, t("empty readonly ref field label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
+    className: "text-description mb-2"
+  }, t("empty-readonly-ref-field.label")) : /* @__PURE__ */ React11.createElement(DxAnchor, {
     key: item.id,
     dxn: item.id,
-    rootclassname: "mie-1"
-  }, item.label) : /* @__PURE__ */ React11.createElement(ObjectPicker.Root, null, /* @__PURE__ */ React11.createElement(ObjectPicker.Trigger, {
+    rootclassname: "me-1"
+  }, 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", {
-    className: "flex gap-2 is-full"
+    role: "none",
+    className: "flex gap-form-gap w-full"
   }, /* @__PURE__ */ React11.createElement(Input6.Root, {
     key: item.id
   }, /* @__PURE__ */ React11.createElement(Input6.TextInput, {
     value: item.label,
     readOnly: true,
-    classNames: "is-full"
-  }))) : /* @__PURE__ */ React11.createElement(Button, {
-    classNames: "is-full text-start gap-2"
+    classNames: "w-full"
+  }))) : /* @__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: "popover-card-width",
+    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: createFieldMap3,
     onCreate: handleCreate,
     onSelect: handleSelect
   })))), layout === "full" && /* @__PURE__ */ React11.createElement(Input6.DescriptionAndValidation, null, error));
@@ -1651,7 +1803,7 @@ var SelectField = ({ type, readonly, label, layout, placeholder, options, getSta
     value: value3,
     onValueChange: handleValueChange
   }, /* @__PURE__ */ React12.createElement(Select.TriggerButton, {
-    classNames: "is-full",
+    classNames: "w-full",
     disabled: !!readonly,
     placeholder
   }), /* @__PURE__ */ React12.createElement(Select.Portal, null, /* @__PURE__ */ React12.createElement(Select.Content, null, /* @__PURE__ */ React12.createElement(Select.Viewport, null, options?.map(({ value: value4, label: label2 }) => (
@@ -1664,20 +1816,21 @@ var SelectField = ({ type, readonly, label, layout, placeholder, options, getSta
 };
 
 // src/components/Form/fields/SelectOptionField.tsx
-import React13, { useCallback as useCallback11, useEffect as useEffect6, 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 { 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();
-  useEffect6(() => {
+  useEffect4(() => {
     if (options === void 0) {
       onValueChange(type, []);
     }
@@ -1768,7 +1921,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     type,
     onValueChange
   ]);
-  useEffect6(() => {
+  useEffect4(() => {
     if (selected && isNewOption && inputRef.current) {
       inputRef.current.focus();
       setIsNewOption(false);
@@ -1792,7 +1945,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     readonly: !!readonly
   }, ({ items }) => /* @__PURE__ */ React13.createElement("div", {
     role: "list",
-    className: "is-full overflow-auto"
+    className: "w-full overflow-auto"
   }, items?.map((item) => /* @__PURE__ */ React13.createElement("div", {
     key: item.id
   }, /* @__PURE__ */ React13.createElement(List.Item, {
@@ -1800,7 +1953,7 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     item,
     classNames: [
       subtleHover,
-      "flex flex-col cursor-pointer rounded-sm"
+      "flex flex-col cursor-pointer rounded-xs"
     ],
     "aria-expanded": selected === item.id
   }, /* @__PURE__ */ React13.createElement("div", {
@@ -1815,20 +1968,20 @@ 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",
     onClick: () => handleClick(item.id)
   })), selected === item.id && /* @__PURE__ */ React13.createElement("div", {
-    className: "pli-cardSpacingInline plb-cardSpacingBlock flex flex-col gap-1 density-fine"
+    className: "flex flex-col p-form-padding gap-form-gap dx-density-fine"
   }, /* @__PURE__ */ React13.createElement(Input8.Label, {
     classNames: "text-xs"
-  }, t("select option label")), /* @__PURE__ */ React13.createElement("div", {
-    className: "grid grid-cols-[1fr_min-content_min-content] gap-1"
+  }, t("select-option.label")), /* @__PURE__ */ React13.createElement("div", {
+    className: "grid grid-cols-[1fr_min-content_min-content] gap-form-gap"
   }, /* @__PURE__ */ React13.createElement(Input8.TextInput, {
     disabled: !!readonly,
-    placeholder: t("select option label placeholder"),
+    placeholder: t("select-option-label.placeholder"),
     ref: selected === item.id ? inputRef : void 0,
     value: item.title,
     onChange: handleTitleChange(item.id),
@@ -1842,22 +1995,22 @@ var SelectOptionField = ({ type, readonly, label, getStatus, getValue, onValueCh
     disabled: !!readonly,
     icon: "ph--trash--fill",
     iconOnly: true,
-    label: t("select option delete"),
+    label: t("select-option-delete.button"),
     onClick: () => handleDelete(item.id)
   })))))), /* @__PURE__ */ React13.createElement(IconButton3, {
     variant: "ghost",
     icon: "ph--plus--regular",
-    label: t("select option add"),
+    label: t("select-option-add.button"),
     onClick: handleAdd,
     disabled: !!readonly,
-    classNames: "is-full"
+    classNames: "w-full"
   })))));
 };
 
 // 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
@@ -1870,8 +2023,8 @@ var TextField = ({ type, readonly, placeholder, onValueChange, onBlur, ...props
     disabled: !!readonly,
     placeholder,
     value: value3,
-    onChange: handleChange,
-    onBlur
+    onBlur,
+    onChange: handleChange
   }));
 };
 
@@ -1899,7 +2052,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 mx4 } from "@dxos/ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 import { safeParseFloat as safeParseFloat3 } from "@dxos/util";
 var gridCols = [
   "grid-cols-1",
@@ -1917,7 +2070,7 @@ var TupleField = ({ binding, type, readonly, label, getStatus, getValue, onValue
     readonly,
     label
   }), /* @__PURE__ */ React16.createElement("div", {
-    className: mx4("grid gap-2", 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",
@@ -1936,13 +2089,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);
-  useEffect7(() => 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;
@@ -1956,22 +2109,22 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   }, [
     registry
   ]);
-  const [referenceSchema, setReferenceSchema] = useState5();
-  useEffect7(() => {
+  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) => ({
         value: value3,
-        label: t(`format ${value3}`)
+        label: t(`format.${value3}.label`)
       }))
     }),
     ["referenceSchema"]: (props2) => /* @__PURE__ */ React17.createElement(SelectField, {
@@ -2045,7 +2198,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   ]);
   const handleSave = useCallback14((props2) => {
     if (view) {
-      Obj3.change(view, () => {
+      Obj3.update(view, () => {
         projection.setFieldProjection({
           field,
           props: props2
@@ -2073,12 +2226,7 @@ var FieldEditor = ({ readonly, projection, field, registry, view, onSave, onCanc
   if (!fieldSchema) {
     log2.warn("invalid format", {
       props
-    }, {
-      F: __dxlog_file2,
-      L: 173,
-      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, {
@@ -2100,160 +2248,491 @@ 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/Settings/Settings.tsx
-import React18 from "react";
-import { Button as Button2, Input as Input12, ScrollArea as ScrollArea2, toLocalizedString, useTranslation as useTranslation9 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/ui-theme";
-var SETTINGS_ROOT_NAME = "Settings.Root";
-var SETTINGS_SECTION_NAME = "Settings.Section";
-var SETTINGS_SECTION_HEADING_NAME = "Settings.SectionHeading";
-var SETTINGS_GROUP_NAME = "Settings.Group";
-var SETTINGS_GROUP_BUTTON_NAME = "Settings.GroupButton";
-var SETTINGS_CONTAINER_NAME = "Settings.Container";
-var SETTINGS_FRAME_NAME = "Settings.Frame";
-var SETTINGS_FRAME_ITEM_NAME = "Settings.FrameItem";
-var SETTINGS_ITEM_NAME = "Settings.Item";
-var SETTINGS_ITEM_INPUT_NAME = "Settings.ItemInput";
-var styles = {
-  title: "pbe-trimMd text-baseText text-lg",
-  description: "text-base text-description",
-  grid: "grid grid-cols-1 md:grid-cols-[3fr_2fr] gap-x-trimLg"
-};
-var SettingsRoot = ({ children }) => {
-  return /* @__PURE__ */ React18.createElement(ScrollArea2.Root, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React18.createElement(ScrollArea2.Viewport, {
-    classNames: "p-trimMd"
-  }, children));
-};
-SettingsRoot.displayName = SETTINGS_ROOT_NAME;
-var SettingsSection = ({ title, description, children }) => {
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(SettingsSectionHeading, {
-    title,
-    description
-  }), /* @__PURE__ */ React18.createElement("div", {
-    className: "is-full pbs-trimMd space-y-trimMd"
-  }, children));
-};
-SettingsSection.displayName = SETTINGS_SECTION_NAME;
-var SettingsSectionHeading = ({ title, description }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("h2", {
-    className: "pli-trimMd container-max-width text-xl mbs-trimMd mbe-trimMd"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
-    className: "pli-trimMd mlb-trimMd container-max-width text-description"
-  }, toLocalizedString(description, t)));
+// 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
+    }));
+  }
 };
-SettingsSectionHeading.displayName = SETTINGS_SECTION_HEADING_NAME;
-var SettingsGroupButton = ({ classNames, ...props }) => {
-  return /* @__PURE__ */ React18.createElement(Button2, {
-    ...props,
-    classNames: [
-      "md:col-span-2",
-      classNames
-    ]
-  });
+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))));
 };
-SettingsGroupButton.displayName = SETTINGS_GROUP_BUTTON_NAME;
-var SettingsGroup = ({ children, classNames }) => /* @__PURE__ */ React18.createElement("div", {
-  role: "none",
-  className: mx5("group container-max-width space-y-trimMd", classNames)
-}, children);
-SettingsGroup.displayName = SETTINGS_GROUP_NAME;
-var SettingsFrame = ({ children }) => /* @__PURE__ */ React18.createElement("div", {
-  role: "none",
-  className: mx5("container-max-width p-trimMd", "border border-separator rounded-md")
-}, children);
-SettingsFrame.displayName = SETTINGS_FRAME_NAME;
-var SettingsFrameItem = ({ title, description, children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement("div", {
-    role: "group",
-    className: "min-is-0"
-  }, /* @__PURE__ */ React18.createElement("h3", {
-    className: "text-lg mbe-2"
-  }, toLocalizedString(title, t)), description && /* @__PURE__ */ React18.createElement("p", {
-    className: "mlb-trimSm md:mbe-0 text-description"
-  }, toLocalizedString(description, t)), children);
+
+// 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
+    }));
+  }
 };
-SettingsFrameItem.displayName = SETTINGS_FRAME_ITEM_NAME;
-var SettingsContainer = ({ classNames, children }) => {
-  return /* @__PURE__ */ React18.createElement("div", {
+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", {
     role: "none",
-    className: mx5([
-      "container-max-width",
-      "*:first:!mbs-0 *:last:!mbe-0 pli-trimMd plb-trimMd",
-      "border border-separator rounded-md",
-      classNames
-    ])
+    className: mx3("flex flex-col gap-3 p-trim-md border border-separator rounded-sm", classNames)
   }, children);
 };
-SettingsContainer.displayName = SETTINGS_CONTAINER_NAME;
+SettingsPanel.displayName = SETTINGS_PANEL_NAME;
 var SettingsItem = ({ title, description = "", children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(SettingsContainer, {
-    classNames: styles.grid
-  }, /* @__PURE__ */ React18.createElement("h3", {
-    className: mx5(styles.title, "md:col-span-2")
-  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement("p", {
-    className: styles.description
-  }, toLocalizedString(description, t)), /* @__PURE__ */ React18.createElement("div", {
+  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-surface-text 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", {
     role: "none",
-    className: "text-end plb-1"
-  }, children));
+    className: "text-end py-1"
+  }, children)));
 };
 SettingsItem.displayName = SETTINGS_ITEM_NAME;
-var SettingsItemInput = ({ title, description = "", children }) => {
-  const { t } = useTranslation9(translationKey);
-  return /* @__PURE__ */ React18.createElement(Input12.Root, null, /* @__PURE__ */ React18.createElement(SettingsContainer, {
-    classNames: styles.grid
-  }, /* @__PURE__ */ React18.createElement(Input12.Label, {
-    classNames: mx5(styles.title, "md:col-span-2")
-  }, toLocalizedString(title, t)), /* @__PURE__ */ React18.createElement(Input12.DescriptionAndValidation, null, /* @__PURE__ */ React18.createElement(Input12.Description, {
-    classNames: styles.description
-  }, toLocalizedString(description, t))), /* @__PURE__ */ React18.createElement("div", {
+
+// 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
+var SETTINGS_ROOT_NAME = "Settings.Root";
+var SETTINGS_VIEWPORT_NAME = "Settings.Viewport";
+var SETTINGS_SECTION_NAME = "Settings.Section";
+var SettingsRoot = ({ children, classNames }) => {
+  return /* @__PURE__ */ React22.createElement("div", {
+    className: mx4("flex flex-col gap-2", classNames)
+  }, children);
+};
+SettingsRoot.displayName = SETTINGS_ROOT_NAME;
+var SettingsViewport = composable3(({ children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React22.createElement(ScrollArea2.Root, {
+    ...composableProps3(props),
+    orientation: "vertical",
+    centered: true,
+    thin: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React22.createElement(ScrollArea2.Viewport, {
+    classNames: "px-4 pointer-coarse:px-2"
+  }, /* @__PURE__ */ React22.createElement("div", {
     role: "none",
-    className: "text-end plb-1"
+    className: "dx-document flex flex-col gap-2 py-4"
   }, children)));
+});
+SettingsViewport.displayName = SETTINGS_VIEWPORT_NAME;
+var SettingsSection = ({ title, description, children }) => {
+  const { t } = useTranslation11(translationKey13);
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement("h2", {
+    className: "px-trim-md mt-trim-md text-xl"
+  }, toLocalizedString2(title, t)), description && /* @__PURE__ */ React22.createElement("p", {
+    className: "px-trim-md text-description"
+  }, toLocalizedString2(description, t)), /* @__PURE__ */ React22.createElement("div", {
+    className: "w-full pt-trim-md space-y-trim-md"
+  }, children));
 };
-SettingsItemInput.displayName = SETTINGS_ITEM_INPUT_NAME;
+SettingsSection.displayName = SETTINGS_SECTION_NAME;
 var Settings = {
   Root: SettingsRoot,
+  Viewport: SettingsViewport,
   Section: SettingsSection,
-  SectionHeading: SettingsSectionHeading,
-  Group: SettingsGroup,
-  GroupButton: SettingsGroupButton,
-  Container: SettingsContainer,
-  Frame: SettingsFrame,
-  FrameItem: SettingsFrameItem,
+  Panel: SettingsPanel,
   Item: SettingsItem,
-  ItemInput: SettingsItemInput
+  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 forwardRef3, useCallback as useCallback15, useContext, useImperativeHandle, useMemo as useMemo8, useState as useState6 } from "react";
-import { Filter as Filter2, Format as Format5, Obj as Obj4, Query, QueryAST } 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 } from "@dxos/echo";
+import { View } from "@dxos/echo";
 import { EchoSchema, isMutable, toJsonSchema } from "@dxos/echo/internal";
-import { invariant } from "@dxos/invariant";
-import { useObject } from "@dxos/react-client/echo";
-import { Callout, IconButton as IconButton4, Input as Input13, useTranslation as useTranslation10 } from "@dxos/react-ui";
+import { invariant as invariant3 } from "@dxos/invariant";
+import { useObject, useQuery as useQuery2 } from "@dxos/react-client/echo";
+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 { FieldSchema, ProjectionModel, VIEW_FIELD_LIMIT, createEchoChangeCallback, getTypenameFromQuery } from "@dxos/schema";
-import { mx as mx6, osTranslations as osTranslations2, subtleHover as subtleHover2 } from "@dxos/ui-theme";
-var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-form/src/components/ViewEditor/ViewEditor.tsx";
-var listGrid = "grid grid-cols-[min-content_1fr_min-content_min-content_min-content]";
-var listItemGrid = "grid grid-cols-subgrid col-span-5";
-var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode = "schema", registry, readonly, showHeading = false, types, tags, onQueryChanged, onDelete }, forwardedRef) => {
+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";
+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({
@@ -2272,12 +2751,26 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     projectionModel
   ]);
   const queueTarget = Match2.value(view.query.ast).pipe(Match2.when({
-    type: "options"
-  }, ({ options }) => {
-    return Option4.fromNullable(options.queues).pipe(Option4.flatMap((queues) => Array2.head(queues)), Option4.getOrUndefined);
+    type: "from"
+  }, ({ from }) => {
+    if (from._tag !== "scope") {
+      return void 0;
+    }
+    return Option6.fromNullable(from.scope.queues).pipe(Option6.flatMap((queues) => Array4.head(queues)), Option6.map(String), Option6.getOrUndefined);
   }), Match2.orElse(() => void 0));
-  const viewSchema = useMemo8(() => {
-    const base = Schema3.Struct({
+  const feeds = useQuery2(db, Filter2.type(Feed.Feed));
+  const targetRef = useMemo12(() => {
+    if (!queueTarget) {
+      return void 0;
+    }
+    const feed = feeds.find((feed2) => Feed.getQueueDxn(feed2)?.toString() === queueTarget);
+    return feed ? Ref6.fromDXN(Entity2.getDXN(feed)) : void 0;
+  }, [
+    queueTarget,
+    feeds
+  ]);
+  const viewSchema = useMemo12(() => {
+    const base = Schema5.Struct({
       query: mode === "schema" ? Format5.URL.annotations({
         title: "Record type"
       }) : QueryAST.Query.annotations({
@@ -2285,26 +2778,27 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
       })
     });
     if (mode === "tag") {
-      return Schema3.Struct({
+      return Schema5.Struct({
         ...base.fields,
-        target: Schema3.optional(Schema3.String.annotations({
-          title: "Target Queue"
-        }))
-      }).pipe(Schema3.mutable);
+        // TODO(wittjosiah): Replace Type.Feed with Dataset.Dataset when Ref.Ref supports unions.
+        target: Ref6.Ref(Feed.Feed).pipe(Schema5.annotations({
+          title: "Target Feed"
+        }), 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: queueTarget
+    target: targetRef
   }), [
     mode,
     view.query.ast,
-    queueTarget
+    targetRef
   ]);
-  const fieldMap = useMemo8(() => mode === "tag" ? customFields({
+  const fieldMap = useMemo12(() => mode === "tag" ? customFields({
     types,
     tags
   }) : void 0, [
@@ -2312,48 +2806,46 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ classNames, schema, view, mode =
     types,
     tags
   ]);
-  const handleUpdate = useCallback15((values) => {
-    requestAnimationFrame(() => {
-      const query = mode === "schema" ? Query.select(Filter2.typename(values.query)).ast : values.query;
-      onQueryChanged?.(query, values.target);
-    });
+  const handleUpdate = useCallback18((values) => {
+    const targetValue = values.target;
+    let queueDxn;
+    if (Ref6.isRef(targetValue)) {
+      const feedDxn = targetValue.dxn.toString();
+      const feed = feeds.find((feed2) => Obj6.getDXN(feed2).toString() === feedDxn);
+      if (feed) {
+        queueDxn = 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,
-    view,
-    queueTarget,
-    mode
+    mode,
+    feeds
   ]);
-  const handleDelete = useCallback15((fieldId) => {
-    invariant(!readonly, void 0, {
-      F: __dxlog_file3,
-      L: 155,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const handleDelete = useCallback18((fieldId) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 127, S: void 0, A: ["!readonly", ""] });
     onDelete?.(fieldId);
   }, [
     onDelete,
     readonly
   ]);
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React24.createElement("div", {
     role: "none",
-    className: mx6(classNames)
-  }, schemaReadonly && !readonly && /* @__PURE__ */ React19.createElement(Callout.Root, {
+    className: mx5(classNames)
+  }, schemaReadonly && !readonly && /* @__PURE__ */ React24.createElement(Message.Root, {
     valence: "info",
-    classNames: "mlb-cardSpacingBlock"
-  }, /* @__PURE__ */ React19.createElement(Callout.Title, null, t("system schema description"))), /* @__PURE__ */ React19.createElement(Form.Root, {
+    classNames: "my-form-padding"
+  }, /* @__PURE__ */ React24.createElement(Message.Title, null, t("system-schema.description"))), /* @__PURE__ */ React24.createElement(Form.Root, {
     schema: viewSchema,
     values: viewValues,
     fieldMap,
-    autoSave: true,
-    onSave: handleUpdate
-  }, /* @__PURE__ */ React19.createElement(Form.FieldSet, null), /* @__PURE__ */ React19.createElement(FormFieldLabel, {
-    label: t("fields label"),
+    db,
+    onValuesChanged: handleUpdate
+  }, /* @__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,
@@ -2365,9 +2857,9 @@ var ViewEditor = /* @__PURE__ */ forwardRef3(({ 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({
@@ -2382,38 +2874,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: 220,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const [expandedField, setExpandedField] = useState7();
+  const handleAdd = useCallback18(() => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 183, 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: 234,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
+  const handleDelete = useCallback18((fieldId) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 196, S: void 0, A: ["!readonly", ""] });
     if (fieldId === expandedField) {
       setExpandedField(void 0);
     }
@@ -2423,36 +2899,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: 246,
-      S: void 0,
-      A: [
-        "!readonly",
-        ""
-      ]
-    });
-    Obj4.change(view, (v) => {
+  const handleMove = useCallback18((fromIndex, toIndex) => {
+    invariant3(!readonly, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 207, S: void 0, A: ["!readonly", ""] });
+    Obj6.update(view, (view2) => {
       const fields = [
-        ...v.projection.fields
+        ...view2.projection.fields
       ];
       const [moved] = fields.splice(fromIndex, 1);
       fields.splice(toIndex, 0, moved);
-      v.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);
   }, [
@@ -2461,84 +2929,84 @@ 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(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: listGrid
+    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: listItemGrid,
+      classNames: "grid grid-cols-subgrid col-span-5",
       "aria-expanded": expandedField === field.id
-    }, /* @__PURE__ */ React19.createElement("div", {
+    }, /* @__PURE__ */ React24.createElement("div", {
       role: "none",
-      className: mx6(subtleHover2, listItemGrid, "rounded-sm cursor-pointer min-bs-10")
-    }, /* @__PURE__ */ React19.createElement(List2.ItemDragHandle, {
+      className: mx5(subtleHover2, "grid grid-cols-subgrid col-span-5", "rounded-xs cursor-pointer min-h-10")
+    }, /* @__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.ItemButton, {
-      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, {
-      label: t("delete field label"),
+    }), !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(IconButton4, {
+    }), /* @__PURE__ */ React24.createElement(List2.ItemIconButton, {
       iconOnly: true,
       variant: "ghost",
-      label: t("toggle expand label", {
+      label: t("toggle-expand.label", {
         ns: osTranslations2
       }),
       icon: expandedField === field.id ? "ph--caret-down--regular" : "ph--caret-right--regular",
       onClick: () => handleToggleField(field),
       "data-testid": "field.toggle"
-    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React19.createElement("div", {
+    }))), expandedField === field.id && !readonly && /* @__PURE__ */ React24.createElement("div", {
       role: "none",
-      className: "col-span-5 mbs-1 mbe-1 border border-separator rounded-md"
-    }, /* @__PURE__ */ React19.createElement(FieldEditor, {
+      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", {
+  })), !readonly && !expandedField && /* @__PURE__ */ React24.createElement("div", {
     role: "none",
-    className: "mlb-cardSpacingBlock"
-  }, /* @__PURE__ */ React19.createElement(IconButton4, {
+    className: "my-form-padding"
+  }, /* @__PURE__ */ React24.createElement(IconButton4, {
     icon: "ph--plus--regular",
-    label: t("add property button label"),
+    label: t("add-property-button.label"),
     onClick: handleAdd,
     disabled: viewSnapshot.projection.fields.length >= VIEW_FIELD_LIMIT,
-    classNames: "is-full"
+    classNames: "w-full"
   }))));
 };
 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,
@@ -2557,7 +3025,9 @@ export {
   GeoPointField,
   MarkdownField,
   NumberField,
+  ObjectForm,
   ObjectPicker,
+  ObjectProperties,
   RefField,
   SelectField,
   SelectOptionField,
@@ -2567,16 +3037,18 @@ export {
   TupleField,
   ViewEditor,
   cellClassesForFieldType,
+  createSelectField,
+  detectFieldType,
   formatForDisplay,
   formatForEditing,
   getDefaultValue,
   getFormProperties,
   getRefProps,
+  getSelectOptionsFromAst,
+  omitHiddenFormFields,
   omitId,
   parseValue,
   pathNotUniqueError,
-  setValueEchoAware,
-  translations,
   useFormContext,
   useFormFieldState,
   useFormHandler,